Playwright CLI gjør vanlig språk om til nettlesertester
Nøkkelinnsikt
- Playwright CLI lagrer øyeblikksbilder av sider lokalt i stedet for å laste dem inn i AI-konteksten, noe som sparer tokenforbruk sammenlignet med Playwright MCP
- En AI-agent kan navigere en nettside, klikke på elementer og lage en fungerende Playwright-test uten at du skriver kode
- Videoopptak og sporingsfiler lar deg se nøyaktig hva agenten gjorde, steg for steg
Denne artikkelen oppsummerer How to Use Playwright CLI Skill for Agentic Testing. Se videoen →
Les denne artikkelen på English
Kort fortalt
Debbie O'Brien fra Block viser hvordan Playwright CLI-ferdigheten gjør Goose, en AI-agent med åpen kildekode, til et verktøy for nettlesertesting. I stedet for å skrive testkode for hånd, beskriver du hva du vil med vanlige ord. Agenten surfer på siden, klikker på elementer og lager en fungerende Playwright-test som består ved første kjøring.
Hva du lærer
- Hvordan installere og aktivere Playwright CLI-ferdigheten i Goose
- Hvordan surfe på nettsider og lage testkode med vanlig språk
- Hvordan ta opp video og sporingsfiler for å feilsøke det agenten gjør
Oppsett og første steg
Installer Playwright CLI globalt
Kjør installeringskommandoen for Playwright CLI slik at den blir tilgjengelig i hele systemet. Deretter installerer du ferdighetene i prosjektet ditt med playwright cli install-skills (0:35). Dette oppretter en mappe med en ferdighetsfil og referansedokumenter som forteller agenten hvilke kommandoer som finnes.
Aktiver ferdigheten i Goose
I Goose-agenten din, søk etter Playwright CLI-utvidelsen og kontroller at den er aktivert (2:00). O'Brien bruker Goose sitt kodeverktøy, men alle agenter som støtter ferdigheter fungerer.
Åpne en nettleser og ta et skjermbilde
Be agenten åpne en nettside. Som standard kjører nettleseren i hodeløs modus (headless mode), altså uten synlig vindu, fordi agenten ikke trenger å se den. Legg til --headed hvis du vil følge med visuelt (4:13). Agenten lagrer et øyeblikksbilde av siden lokalt som en YAML-fil med sidens tilgjengelighetstre (accessibility tree), et strukturert kart over alle elementer på siden. Dette er hovedforskjellen fra Playwright MCP-serveren: øyeblikksbildet ligger på disk, ikke i AI-ens kontekstvindu, noe som sparer tokener (3:42).
Forklart enkelt: Tenk på øyeblikksbildet som en innholdsfortegnelse i en bok. I stedet for å lese hvert eneste ord (laste hele siden inn i AI-ens hukommelse), sjekker agenten innholdsfortegnelsen for å finne det den trenger. Begrensningen: i motsetning til en ekte innholdsfortegnelse kan øyeblikksbildet bli utdatert hvis siden endrer seg mellom handlinger.
Lage tester med vanlig språk
Beskriv brukerreisen med vanlige ord
O'Brien skriver: «Gå til videosiden og filtrer på MCP, og lag deretter en test basert på det du har gjort» (4:38). Agenten navigerer til siden, finner MCP-filteret, klikker på det og ser på resultatet. Den bruker referansenumre fra øyeblikksbildet for å finne elementer.
Se over den genererte testkoden
Agenten oppretter en Playwright TypeScript-testfil med page.goto, sjekker som expect(page).toHaveTitle(), og klikkehandlinger med getByRole (6:03). Koden som blir laget følger Playwrights beste praksis med rollebaserte velgere (den finner elementer etter funksjon, som «knapp» eller «lenke», i stedet for skjøre CSS-velgere).
Kjør testen
Be agenten kjøre testen. Den kjører npx playwright test og rapporterer resultatet. Testen består ved første kjøring (8:06).
Forklart enkelt: Se for deg at du dikterer en oppskrift til en kokk som skriver ned hvert steg og hver mengde mens du lager maten. Etterpå kan hvem som helst følge den nedskrevne oppskriften og lage den samme retten. Haken: agenten noterer det den ser, så hvis den overser et lite steg, kan «oppskriften» bli ufullstendig.
Opptak av video og sporingsfiler
Utover å lage tester kan Playwright CLI ta opp hva agenten gjør, slik at du kan se gjennom det etterpå (9:20).
Videoopptak lagrer en MP4-fil av nettleserøkten. O'Brien foreslår å legge ved slike opptak i pull requests (endringsforespørsler), slik at de som vurderer koden kan se nøyaktig hva agenten testet.
Sporingsopptak lager en detaljert logg som åpnes i Playwrights Trace Viewer (12:39). Sporingen viser en tidslinje over hver handling, referansene som ble brukt, nettverksforespørsler, meldinger fra konsollen og skjermbilder for hvert steg. Du kan til og med velge pekere direkte fra sporingen.
Feilsøking
- Sporingsfil åpnes ikke i Trace Viewer? Visningsverktøyet forventer en
.zip-fil. Hvis sporingen ble lagret som en ukomprimert mappe, pakk den til zip først (12:18). - Ser du ikke nettleseren? Som standard kjører CLI-en uten synlig vindu. Bruk
--headedfor å se nettleservinduet. Bare nødvendig hvis du vil se hva som skjer. - Finner ikke ferdigheten? Kontroller at Playwright CLI-utvidelsen er aktivert i agentens innstillinger, ikke bare installert.
Test deg selv
- Overføring: Hvordan kunne du brukt denne metoden til å teste en betalingsflyt med flere steg i en nettbutikk? Hvilke instruksjoner ville du gitt agenten?
- Avveining: Når ville du valgt Playwright CLI-ferdigheten fremfor Playwright MCP-serveren? Hvilke situasjoner passer best for hver løsning?
- Arkitektur: Hvordan ville du satt opp en CI-pipeline som bruker en AI-agent til å lage og kjøre nettlesertester automatisk ved hver pull request?
Ordliste
| Begrep | Forklaring |
|---|---|
| Playwright | Et rammeverk for nettlesertesting fra Microsoft som automatiserer klikk, skjemautfylling og navigering i Chrome, Firefox og Safari. |
| CLI (Command-Line Interface) | Kommandolinjeverktøy. En tekstbasert måte å bruke programvare på ved å skrive kommandoer i stedet for å klikke på knapper. |
| Goose | En AI-agent med åpen kildekode fra Block (tidligere Square) som kjører på maskinen din og kan bruke utvidelser kalt ferdigheter. |
| Ferdighet (skill) | En utvidelse som lærer en Goose-agent nye evner, som å surfe på nettet eller lage tester. |
| Hodeløs nettleser (headless browser) | En nettleser som kjører uten synlig vindu. Raskere og bruker færre ressurser, men du kan ikke se hva som skjer. |
| Tilgjengelighetstre (accessibility tree) | Et strukturert kart over alle elementer på en nettside. Samme data som skjermlesere bruker, og det Playwright CLI bruker for å finne elementer. |
| Øyeblikksbilde (snapshot) | En lagret kopi av sidens tilgjengelighetstre på et bestemt tidspunkt. Lagres lokalt for å spare token-kostnader. |
| Sporing (trace) | Et detaljert opptak av hver nettleserhandling, inkludert skjermbilder, nettverksforespørsler og konsollmeldinger. |
| Ende-til-ende-test (end-to-end test, E2E) | En test som sjekker hele brukerreisen gjennom en applikasjon, fra start til slutt. |
| Token | En liten enhet tekst som AI-modeller behandler. Færre tokener betyr lavere kostnad og raskere svar. |
| MCP-server (Model Context Protocol) | En protokoll for å koble AI-agenter til eksterne verktøy. Playwright MCP-serveren laster sidedata inn i AI-ens kontekst, noe som bruker flere tokener. |
Kilder og ressurser
Vil du vite mer? Se hele videoen på YouTube →