Skrive Playwright-tester
Automatiser nettleserflyter med Playwright.
Skrive Playwright-tester er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Din første Playwright-test
En Playwright-test er en asynkron funksjon som mottar fixtures som page. Du importerer test og expect fra @playwright/test og beskriver et brukerscenario.
import { test, expect } from '@playwright/test';
test('opens the home page', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveURL(/.*localhost/);
});page-fixturen
page-objektet representerer én nettleserfane. Hver test får en ny, isolert page i en ren kontekst, slik at tester ikke deler informasjonskapsler eller lagring ved et uhell.
Navigere med goto
page.goto(url) laster inn en URL og venter til siden er klar. Sammen med baseURL i konfigurasjonen kan du bruke relative stier.
await page.goto('/login'); // resolves against baseURL
await page.goto('https://example.com'); // absolute also worksFinne elementer med lokatorer
En lokator er en lat referanse til et element som venter automatisk. Foretrekk semantiske lokatorer som getByRole, getByLabel og getByText fremfor sårbare CSS-selektorer.
const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');Skrive og klikke
Bruk fill til å angi verdier i inndatafelt og click til å trykke på knapper. Playwright venter automatisk til elementene er synlige og aktiverte før handlingen utføres.
await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();Automatisk venting fjerner ustabile sleep-kall
I motsetning til eldre verktøy venter Playwright automatisk på elementer og på at påstander skal bli sanne. Du trenger nesten aldri manuelle tidsavbrudd, og det er dette som gjør testene stabile.
// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();Gruppere tester med describe
Bruk test.describe til å gruppere relaterte scenarier og dele oppsett 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();
});
});Teste en fullstendig brukerreise
Kjed sammen handlinger for å modellere et komplett forløp. Hvert trinn leses som et manus for brukerens handlinger.
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/);
});Kjøre testene
Kjør alle spesifikasjonene fra CLI. Legg til --headed for å se nettleseren, eller --ui for å åpne Playwrights interaktive testkjører.
npx playwright test
npx playwright test --headed
npx playwright test --uiFeilsøke mislykkede tester
Ved feil kan Playwright ta skjermbilder, video og en trace som du kan spille av trinn for trinn. Trace-visningen viser DOM-en ved hver handling, noe som gjør ustabile feil enkle å diagnostisere.
npx playwright test --trace on
npx playwright show-trace trace.zipTestisolasjon er viktig
Siden hver test får sin egen nettleserkontekst, må du ikke være avhengig av rekkefølgen eller delt tilstand mellom testene. Sett opp dataene hver test trenger, i sin egen beforeEach eller i selve testen.
Hurtigsjekk
Hvorfor bør du unngå waitForTimeout?
Oppsummering
En Playwright-test bruker page-fixturen: goto til navigering, semantiske lokatorer (getByRole, getByLabel) til å finne elementer, og fill/click til samhandling. Automatisk venting fjerner ustabile sleep-kall. Gruppér med describe, kjør med npx playwright test og feilsøk med traces.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 38
- Leksjoner
- 144
Ofte stilte spørsmål
Er leksjonen «Skrive Playwright-tester» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Skrive Playwright-tester», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Skrive Playwright-tester»?
Automatiser nettleserflyter med Playwright. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Angular Academy?
Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Skrive Playwright-tester»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?
Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Oversikt over E2E-testing
- Skrive Playwright-tester
- Selektorer og påstander
- CI-integrasjon