Bygg en 4-lags AI-nettleserautomatisering
Nøkkelinnsikt
- Ferdigheter er bare evner. Den virkelige kraften kommer av å legge agenter, kommandoer og oppgavekjørere oppå
- Agentisk UI-testing bruker brukerhistorier i naturlig språk i stedet for skjøre CSS-selektorer og testoppsett
- CLI-verktøy slår MCP-servere for nettleserautomatisering fordi de bruker færre tokens og gir full frihet til å bygge egne lag
Denne artikkelen oppsummerer My 4-Layer Claude Code Playwright CLI Skill (Agentic Browser Automation). Se videoen →
Les denne artikkelen på English
Kort fortalt
Dan Disler, utvikleren bak YouTube-kanalen IndyDevDan, går gjennom en firelagsarkitektur for å bygge AI-agenter som automatiserer nettlesere og kjører UI-tester. Systemet er bygget på Playwright CLI og Claude Code Chrome-verktøy, og vist gjennom en referansekodebase kalt Bowser. Kjernetanken: slutt å tenke på enkeltstående ferdigheter, og begynn å stable dem i lagvise systemer som løser hele klasser av problemer.
To klasser av nettleserarbeid
Disler peker på to ulike typer arbeid som agenter kan håndtere i nettleseren (0:41). Den første er nettleserautomatisering: å la en agent fullføre oppgaver som netthandel, dataregistrering eller informasjonsinnhenting. Den andre er UI-testing (testing av brukergrensesnitt): å la agenter sjekke at appen din fungerer ved å opptre som ekte brukere.
Gjennomgangen viser begge deler i praksis. En Amazon-handlearbeidsflyt kjører via Claude Code Chrome, legger varer i handlekurven og stopper rett før kjøp (11:18). Samtidig starter tre parallelle Playwright-agenter opp usynlige nettlesere for å teste brukerhistorier (steg-for-steg-beskrivelser av hva en ekte bruker ville gjort) på Hacker News (1:03).
Forklart enkelt: Tenk på det som å ansette to typer assistenter. Den ene gjør ærender for deg (nettleserautomatisering). Den andre sjekker at butikken din ser bra ut før kundene kommer (UI-testing). Begge bruker den samme evnen til å styre en nettleser, men til ulike formål. I motsetning til ekte assistenter kan disse agentene kopieres øyeblikkelig, slik at du kan kjøre ti av dem samtidig.
De fire lagene
Arkitekturen som Disler kaller «Bowser» har fire lag, der hvert lag bygger på det under (2:04). Slik henger de sammen:
Lag 1: Ferdigheter (evne)
Ferdigheter (skills) er grunnlaget. De gir agenten din den grunnleggende evnen til å styre en nettleser. Disler bruker to ferdigheter: Playwright CLI for usynlige, parallelle nettleserøkter som bruker færre tokens (enhetene AI-modeller jobber med, omtrent 3-4 tegn hver), og Claude Code Chrome (slås på med --chrome-flagget) for å bruke den eksisterende innloggede nettleserøkten din (2:40).
Nøkkelforskjellen: Playwright CLI kjører skjult og støtter parallelle økter med vedvarende profiler, noe som gjør det ideelt for testing. Claude Code Chrome bruker den faktiske nettleseren din, som betyr at den har tilgang til innlogginger og informasjonskapsler, men kan ikke kjøre parallelt (7:38).
Lag 2: Underagenter (skalering)
Underagenter (subagents) tar en ferdighet og pakker den inn i en spesialisert ledetekst (prompt). Den enkleste versjonen er en generell «Playwright-nettleseragent» som kan håndtere alle nettleseroppgaver (6:33). Den kraftigere versjonen er en nettleser-QA-agent med en strukturert arbeidsflyt: del opp en brukerhistorie i steg, opprett en skjermbildemappe, utfør hvert steg, ta skjermbilder underveis, og rapporter bestått eller ikke bestått (7:53).
Det er her spesialisering skjer. En ferdighet sier bare «du kan bruke en nettleser.» En underagent sier «her er nøyaktig hvordan du sjekker en brukerhistorie, steg for steg, med bevis.»
Lag 3: Skråstrekkommandoer (styring)
Skråstrekkommandoer (slash commands, egendefinerte kommandoer i .claude/commands/) er styringslaget. De koordinerer team av underagenter (12:43). Kommandoen /ui-review oppdager for eksempel alle brukerhistoriefiler, starter én nettleser-QA-agent per historie, kjører dem parallelt, samler resultater og lager en oppsummeringsrapport (15:01).
Disler introduserer også «høyereordens-ledetekster» (higher-order prompts, HOP), kommandoer som tar en annen ledetekst som parameter (18:37). Kommandoen /automate pakker inn en hvilken som helst nettleserarbeidsflyt i et fast kjøremønster, slik at du kan bytte ut den spesifikke oppgaven mens loggføring og feilhåndtering forblir den samme.
Lag 4: Just (gjenbruk)
Just er en oppgavekjører (lignende make, men enklere) som sitter på toppen av stabelen (20:03). En justfile i prosjektroten lister alle tilgjengelige arbeidsflyter som én-linjekommandoer med overstyrbare parametere. Skriv just for å se alle tilgjengelige kommandoer. Skriv just ui-review eller just automate-amazon for å starte en komplett arbeidsflyt.
Fordelen: du, teamet ditt og agentene dine vet alltid hva som er tilgjengelig. Ingen leting gjennom mapper for å finne riktig kommando.
Hvorfor CLI fremfor MCP?
Disler argumenterer sterkt for å bruke CLI-verktøy i stedet for MCP-servere (Model Context Protocol, en protokoll som lar AI-modeller koble seg til eksterne verktøy) for nettleserautomatisering (3:02). MCP-servere bruker flere tokens fordi de har stive grensesnitt og ordrik kommunikasjon. CLI-er bruker færre tokens og lar deg bygge ditt eget lag oppå.
Med en CLI-ferdighet styrer du nøyaktig hvilke standardinnstillinger som settes, hvilket utdataformat som brukes, og hvordan økter håndteres. Med en MCP-server er du låst til serverens designvalg.
Forklart enkelt: Tenk på forskjellen mellom å bestille fra en fast meny (MCP-server) og å ha tilgang til et kjøkken der du lager akkurat det du vil (CLI). Menyen er praktisk, men begrenset. Kjøkkenet krever mer oppsett, men du kan lage nøyaktig det du trenger. Analogien halter fordi CLI-er faktisk krever mindre oppsett enn MCP-servere når ferdighetsfilen er skrevet.
Hvorfor agentisk UI-testing?
Tradisjonell UI-testing med rammeverk som Jest eller Vitest krever at du skriver testoppsett, peker på spesifikke elementer i koden (CSS-selektorer) og vedlikeholder skjør testkode som slutter å fungere når grensesnittet endres. Agentisk testing erstatter alt dette med brukerhistorier i naturlig språk (16:11).
En fil med en brukerhistorie er enkel: et navn, en URL og en steg-for-steg-arbeidsflyt skrevet på vanlig norsk eller engelsk. Agenten besøker URL-en og arbeider gjennom stegene som en ekte bruker ville gjort. Hvis noe feiler, rapporterer den hva som gikk galt og lagrer skjermbilder av hvert steg (3:36).
Avveiningen er forutsigbarhet. Tradisjonelle tester kjører likt hver gang. Agentbaserte tester er ikke-deterministiske, noe som betyr at agenten kan ta litt ulike veier. Disler anerkjenner denne spenningen, men hevder at for mange brukstilfeller veier hastigheten i å skrive og oppdatere tester opp for tapet av perfekt repeterbarhet (16:53).
Løs klasser av problemer, ikke enkeltoppgaver
Disler avslutter med det han kaller metatemaet bak hele arkitekturen: slutt å løse enkeltoppgaver, og begynn å løse hele klasser av problemer (23:03). Bowser-kodebasen er ikke bygget for ett spesifikt prosjekt. Den er en mal du kan ta med til hvilken som helst kodebase og tilpasse.
Tanken er at hver gang du løser et problem med agenter, bør løsningen være gjenbrukbar. Neste gang du møter det samme problemet, skal agentene gjøre mer og du gjøre mindre. «Kode har blitt allemannseie,» sier Disler. «Hvem som helst kan lage kode. Det er ikke lenger et fortrinn. Fortrinnet ditt er den spesifikke løsningen din på problemet du faktisk løser» (5:22).
Han advarer også mot å sette bort læringen til ferdiglagde tillegg og andres ledetekster. Hvis du ikke kan bygge opp lagene selv, vil du alltid være begrenset av hva andre har laget (25:00).
Sjekkliste: Vanlige fallgruver
- Bruker du en MCP-server der en CLI ville fungert? MCP-servere bruker flere tokens og er mindre fleksible. Sjekk om det finnes et CLI-alternativ først.
- Kjører du Claude Code Chrome parallelt? Det støtter ikke parallelle økter. Bruk Playwright CLI for parallell testing og behold Chrome-modus for personlig automatisering som trenger innloggingsøktene dine (7:38).
- Hopper du over skjermbildesporet? Uten skjermbilder kan du ikke bekrefte hva agenten faktisk gjorde. Sett alltid opp QA-agenten til å lagre skjermbilder ved hvert steg.
- Skriver du for vage brukerhistorier? Agenten fungerer best med konkrete, steg-for-steg-instruksjoner. «Test forsiden» er for vagt. «Naviger til forsiden, bekreft at overskriften inneholder X, klikk den første lenken, bekreft at siden laster» er noe agenten kan jobbe med.
- Hopper du rett til kommandoer uten å teste ferdigheter først? Bygg og verifiser hvert lag før du stabler det neste. Test ferdigheten, deretter underagenten, deretter kommandoen (12:07).
Praktiske implikasjoner
For nybegynnere
Start med bare lag 1. Skriv én Playwright CLI-ferdighet som lar agenten din navigere til en URL og ta et skjermbilde. Når det fungerer, prøv å pakke det inn i en underagent med en bestemt oppgave.
For team som sender kode raskt
/ui-review-mønsteret er umiddelbart nyttig. Skriv brukerhistorier for de kritiske arbeidsflytene dine, pek dem mot test-URL-en (testversjonen av siden før den publiseres), og kjør gjennomgangen før hver utsending. Det uforutsigbare er faktisk en fordel her: agenter fanger visuelle problemer og samhandlingsfeil som faste selektorer overser.
For soloutviklere
justfile-laget lønner seg raskt når du sjonglerer flere prosjekter. Ett sted å finne og kjøre all automatisering, alle tester, alle nettleserarbeidsflyter. Du slipper å huske hvilken kommando som ligger hvor.
Test deg selv
- Avveining: Når ville du valgt Claude Code Chrome fremfor Playwright CLI for en nettleseroppgave, og når ville det vært feil valg?
- Arkitektur: Du skal teste en nettapp på tvers av tre nettlesere (Chrome, Firefox, Safari) og fem brukerhistorier. Hvordan ville du strukturert de fire lagene for å kjøre dette effektivt?
- Overføringsverdi: Hvordan kunne du tilpasset firelagsmønsteret (ferdighet, underagent, kommando, oppgavekjører) til et helt annet område, som automatisert kodegjennomgang eller databasemigrering?
Ordliste
| Begrep | Forklaring |
|---|---|
| Agentisk utvikling (agentic engineering) | Å bygge programvare ved å sette sammen systemer av AI-agenter som samarbeider og utfører oppgaver, i stedet for å skrive all kode for hånd. |
| Nettleserautomatisering (browser automation) | Å bruke programvare til å styre en nettleser automatisk, utføre handlinger som å klikke knapper, fylle ut skjemaer og navigere mellom sider uten at et menneske gjør det. |
| CLI (Command-Line Interface) | En tekstbasert måte å snakke med et program på ved å skrive kommandoer. Tenk på det som å sende tekstmeldinger med instruksjoner i stedet for å klikke på knapper. |
| Claude Code Chrome | En Claude Code-funksjon (slås på med --chrome) som lar AI-agenten styre den faktiske Chrome-nettleseren din, med tilgang til innlogginger og utvidelser. |
| Skjult nettleser (headless browser) | En nettleser som kjører uten synlig vindu. Den gjør alt en vanlig nettleser gjør, men usynlig i bakgrunnen. Nyttig for automatisert testing. |
| Høyereordens-ledetekst (higher-order prompt, HOP) | En ledetekst som tar en annen ledetekst som inndata. Tenk på det som en oppskrift der ett av ingrediensene er en annen oppskrift. Den pakker ulike oppgaver inn i et fast kjøremønster. |
| Just | En enkel oppgavekjører (som make, men lettere å bruke) for å definere og kjøre prosjektkommandoer fra én enkelt justfile. |
| MCP (Model Context Protocol) | En protokoll som lar AI-modeller koble seg til eksterne verktøy og tjenester. Nyttig, men mer tokentung enn CLI-alternativer for noen oppgaver. |
| Parallelle økter (parallel sessions) | Å kjøre flere nettleserinstanser samtidig, der hver håndterer en ulik oppgave uavhengig av de andre. |
| Vedvarende profil (persistent profile) | Å lagre nettleserstatus (informasjonskapsler, innloggingsøkter) mellom kjøringer slik at agenten slipper å logge inn på nytt hver gang. |
| Playwright CLI | Et kommandolinjeverktøy fra Microsoft for nettleserautomatisering. Støtter skjult modus, parallelle økter og flere nettlesermotorer. |
| Ferdighet (skill, Claude Code) | En markdown-fil i .claude/skills/ som lærer AI-agenten hvordan den skal bruke et bestemt verktøy eller en bestemt evne. Den grunnleggende byggesteinen. |
| Skråstrekkommando (slash command) | En gjenbrukbar ledetekstfil i .claude/commands/ som kan startes med /kommando-navn. Brukes til å styre komplekse arbeidsflyter. |
| Underagent (subagent) | En barnagent startet av en hovedagent for å håndtere en bestemt oppgave. Flere underagenter kan kjøre parallelt og rapportere resultater tilbake. |
| Brukerhistorie (user story) | En beskrivelse i naturlig språk av en arbeidsflyt sett fra brukerens perspektiv. I agentisk testing erstatter den tradisjonell testkode med steg i vanlig språk. |
Kilder og ressurser
Vil du vite mer? Se hele videoen på YouTube →