Nøkkelinnsikt

• Playwright CLI bruker ca. 26 000 tokens per oppgave mot ca. 114 000 for MCP-serveren, en reduksjon på omtrent 4x
• CLI-en lagrer tilgjengelighetstreet til disk og sender bare et sammendrag til Claude Code, slik at kontekstvinduet holdes slankt
• Gjenbrukbare Claude Code-ferdigheter lar deg pakke arbeidsflyter for testing med flere agenter inn i en enkel kommando

---

Kort fortalt

Chase Hannegan viser hvordan Playwright CLI, et gratis verktøy fra Microsoft for å styre nettlesere automatisk, fungerer sammen med Claude Code for å kjøre nettleseroppgaver med langt færre tokens enn alternativene. Videoen sammenligner tre alternativer: Claude in Chrome-utvidelsen, Playwright MCP-serveren (Model Context Protocol, en protokoll som kobler AI-modeller til eksterne verktøy) og den nye Playwright CLI-en. CLI-en vinner på effektivitet og bruker omtrent 26 000 tokens per oppgave mot 114 000 for MCP-serveren. Hannegan går gjennom oppsett, en demo i sanntid med parallelle underagenter som tester brukergrensesnitt, og hvordan du pakker hele arbeidsflyten inn i en gjenbrukbar Claude Code-ferdighet (skill).

---

Hva du vil lære

• Hvordan installere Playwright CLI og koble det til Claude Code på under fem minutter
• Hvorfor CLI-en bruker langt færre tokens enn MCP-serveren eller Chrome-utvidelsen
• Hvordan kjøre parallelle nettlesertester med underagenter og pakke dem inn i gjenbrukbare ferdigheter

---

Hvorfor Playwright CLI?

Claude Code har flere måter å styre en nettleser på: Claude in Chrome-tillegget, Playwright MCP-serveren og Playwright CLI. Alle tre lar en AI-modell styre en nettleser gjennom kode, men de skiller seg i hvor mye data de dytter inn i modellens kontekstvindu (den begrensede mengden tekst AI-en kan "se" samtidig).

Chrome-tillegget tar skjermbilder av hver side (3:53). Bilder er dyre i tokens, tillegget kan ikke kjøre i hodeløs modus (uten synlig nettleservindu), og det kan ikke kjøre flere økter samtidig (4:11).

MCP-serveren bruker tilgjengelighetstreet. Dette er et strukturert kart over alt på en nettside (knapper, lenker, tekstfelt), opprinnelig laget for at skjermlesere skal kunne hjelpe blinde brukere med å navigere. Det er lettere enn skjermbilder, men MCP-varianten sender hele treet inn i Claude Codes kontekstvindu hver gang den navigerer (6:08). På en innholdsrik side kan dette treet utgjøre tusenvis av tokens.

CLI-en tar en annen vei. Den leser det samme tilgjengelighetstreet, men lagrer det til disk i stedet for å sende alt til Claude Code (6:40). Deretter sender den bare et kort sammendrag til modellen (6:50). Resultatet: omtrent 26 000 tokens per oppgave mot 114 000 for MCP, en forskjell på rundt 90 000 tokens (3:36).

---

Oppsett

Installasjonen krever tre kommandoer (7:11):

Etter disse tre stegene åpner du Claude Code, og du er klar til å begynne.

---

Kjøre en nettlesertest

Med ferdigheten installert styrer du Playwright gjennom vanlig språk. Hannegan viser dette ved å be Claude Code teste et skjema på nettsiden sin (9:38):

"Can you use the Playwright CLI tool to test the form submission? Make it a single agent and make it headed so I can see it."

Claude Code laster ferdigheten, undersøker prosjektet for å forstå sidestrukturen, åpner nettleseren, blar til skjemaet, fyller inn feltene og sjekker resultatene. Når den er ferdig, lukker den nettleseren og rapporterer testresultatene med skjermbilder (10:25).

Nøkkelfunksjoner som CLI-en støtter (4:36):

• Hodeløs modus: nettleseren kjører usynlig i bakgrunnen og bruker færre ressurser
• Samtidige økter: flere agenter kan teste ulike scenarioer på samme tid
• Vedvarende innloggingsprofiler: lagrede cookies og økter slik at nettleseren forblir innlogget mellom kjøringer

---

Pakke arbeidsflyter inn i ferdigheter

Det blir virkelig nyttig når du kombinerer Playwright CLI med Claude Code-ferdigheter (lagrede instruksjonsfiler som lar deg kjøre en hel arbeidsflyt med en enkel kommando) (11:04).

I stedet for å skrive "kjør tre parallelle nettlesertester med synlig vindu på skjemaet" hver gang, kan du lagre instruksjonen som en ferdighet:

Slik gjør du en flerstegs testarbeidsflyt om til noe du kan kjøre med en enkel kommando, hver gang.

---

Sjekkliste: Vanlige fallgruver

• Nettleseren åpner seg ikke? Som standard kjører Playwright CLI i hodeløs modus. Legg til "headed" i instruksjonen din hvis du vil se nettleservinduet (9:22).
• Ferdigheten blir ikke funnet? Sørg for at du kjørte playwright-cli install --skills etter at du installerte CLI-pakken. Ferdighetsfilen må finnes for at Claude Code skal vite hvordan verktøyet brukes.
• Høy tokenbruk til tross for CLI? Sjekk at du bruker CLI-ferdigheten, ikke MCP-serveren. Begge bruker Playwright, men MCP-løsningen sender hele tilgjengelighetstreet inn i kontekstvinduet.
• Testene feiler på prosjektet ditt? Claude Code har full innsikt i prosjektfilene dine, noe som hjelper den å forstå sidestrukturen. Pass på at utviklingsserveren kjører før du ber den teste (10:01).

---

Praktiske implikasjoner

For enkeltpersoner

Begynn med å teste brukergrensesnittet. Hver gang du endrer et skjema, en knapp eller et sideoppsett, kan du be Claude Code teste det med Playwright CLI. Du slipper manuell testing, og med 4x lavere tokenbruk sparer du fort mye.

For team

Pakk testarbeidsflytene deres inn i delte Claude Code-ferdigheter. Nye teammedlemmer kan kjøre hele testpakken uten å vite hvordan Playwright fungerer under panseret.

For kostnadsbevisste prosjekter

Bruker du allerede Playwright MCP-serveren? Å bytte til CLI-en kutter tokenkostnadene med omtrent 75 %. I et prosjekt der du ofte kjører nettleseroppgaver, sparer det mye over tid.

---

Test deg selv

1. Overføringsverdi: Hvordan kunne du bruke Playwright CLI + underagent-mønsteret til noe annet enn skjematesting, for eksempel overvåking av en konkurrents prisside?
2. Avveining: Når ville du valgt Chrome-utvidelsen fremfor Playwright CLI til tross for den høyere tokenkostnaden?
3. Arkitektur: Lag en nattlig testrytine som bruker Playwright CLI-ferdigheter til å teste fem kritiske sider, rapportere feil og logge resultatene til en fil.

---

Ordliste

---

Kilder og ressurser