Skriva Playwright-tester
Automatisera webbläsarflöden med Playwright.
Skriva Playwright-tester är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.
Ditt första Playwright-test
Ett Playwright-test är en asynkron funktion som tar emot fixtures som page. Du importerar test och expect från @playwright/test och beskriver ett användarscenario.
import { test, expect } from '@playwright/test';
test('opens the home page', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveURL(/.*localhost/);
});page-fixturen
Objektet page representerar en enskild webbläsarflik. Varje test får en ny, isolerad page i en ren kontext, så tester delar aldrig oavsiktligt cookies eller lagring.
Navigera med goto
page.goto(url) läser in en URL och väntar tills sidan är redo. Tillsammans med baseURL i konfigurationen kan du använda relativa sökvägar.
await page.goto('/login'); // resolves against baseURL
await page.goto('https://example.com'); // absolute also worksHitta element med locators
En locator är en lat, automatiskt väntande referens till ett element. Föredra semantiska locators som getByRole, getByLabel och getByText framför sköra CSS-selektorer.
const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');Skriva och klicka
Använd fill för att ange inmatningsvärden och click för att trycka på knappar. Playwright väntar automatiskt tills elementen är synliga och aktiverade innan åtgärden utförs.
await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();Automatiskt väntande eliminerar instabila sleep-anrop
Till skillnad från äldre verktyg väntar Playwright automatiskt på element och på att assertioner ska bli sanna. Du behöver nästan aldrig manuella tidsgränser, vilket gör testerna stabila.
// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();Gruppera tester med describe
Använd test.describe för att gruppera relaterade scenarier och dela konfiguration med beforeEach.
test.describe('Login flow', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/login');
});
test('shows the form', async ({ page }) => {
await expect(page.getByLabel('Email')).toBeVisible();
});
});Testa ett komplett användarflöde
Kedja ihop åtgärder för att modellera ett komplett flöde. Varje steg läses som ett manus över användarens beteende.
test('user can log in and see dashboard', async ({ page }) => {
await page.goto('/login');
await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page).toHaveURL(/.*dashboard/);
});Köra testerna
Kör alla specifikationer från CLI:t. Lägg till --headed för att se webbläsaren eller --ui för att öppna Playwrights interaktiva testkörning.
npx playwright test
npx playwright test --headed
npx playwright test --uiFelsöka fel
Vid ett fel kan Playwright fånga skärmbilder, videor och en trace som du spelar upp steg för steg. Trace-visaren visar DOM vid varje åtgärd, vilket gör instabila fel enkla att diagnostisera.
npx playwright test --trace on
npx playwright show-trace trace.zipTestisolering är viktigt
Eftersom varje test får sin egen webbläsarkontext får du inte förlita dig på ordningsföljd eller delat tillstånd mellan tester. Konfigurera den data varje test behöver i sitt eget beforeEach eller direkt i testet.
Snabb kontroll
Varför bör du undvika waitForTimeout?
Sammanfattning
Ett Playwright-test använder page-fixturen: goto för navigering, semantiska locators (getByRole, getByLabel) för att hitta element och fill/click för att interagera. Automatiskt väntande eliminerar instabila sleep-anrop. Gruppera med describe, kör med npx playwright test och felsök med traces.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 38
- Lektioner
- 144
Vanliga frågor
Är lektionen ”Skriva Playwright-tester” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Skriva Playwright-tester”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Skriva Playwright-tester”?
Automatisera webbläsarflöden med Playwright. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Angular Academy?
Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Skriva Playwright-tester”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Angular Academy-lektionen?
Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Översikt över E2E-testning
- Skriva Playwright-tester
- Väljare och assertioner
- CI-integrering