Claude Coden käyttäminen Playwright MCP:n kanssa: Täydellinen asennusopas

Mikä on Playwright MCP?

Playwright MCP -palvelin antaa mille tahansa Model Context Protocol -asiakkaalle selainautomaation superkyvyt. Sen sijaan, että pyytäisit tekoälyä “katsomaan” pikselejä, palvelin palauttaa strukturoidut saavutettavuuden tilannekuvat sivusta, ja malli vuorovaikuttaa elementtien kanssa viiteavulla. Tämä tekee silmukan nopeaksi, deterministiseksi ja vapaaksi näkömallin yleiskustannuksista. Se toimii VS Coden, Cursorin, Windurfin, Claude Desktopin, Claude Coden ja minkä tahansa muun MCP-asiakkaan kanssa.

Claude Code -sovelluksessa tämä tarkoittaa, että terminaalissa oleva agentti voi nyt avata selaimen, napsauttaa ympäriinsä, täyttää lomakkeita, valehdella verkkopyyntöjä, ottaa kuvakaappauksia ja jopa suorittaa custom Playwright -skriptejä – kaikki luonnollisen kielen kehotteista ohjattavaa.

Edellytykset

Ennen kuin aloitat, varmista, että sinulla on:

• Node.js 18 tai uudempi asennettuna
• Claude Code asennettu ja kirjautunut (suorita claude terminaalissa tarkistamiseksi)
• Terminaali, jonka kanssa olet tyytyväinen

Se on kaikki – Playwright MCP lataa omat selainbinäärit ensimmäisellä suorituskerralla.

Valmis kasvattamaan liiketoimintaasi?

Aloita ilmainen kokeilujakso tänään ja näe tulokset muutamassa päivässä.

Pyydä demo Kirjaudu sisään

Playwright MCP -integraation asettaminen

Playwright MCP:n yhdistäminen Claude Codeen on yksittäinen komento. Noudata näitä vaiheita sen kytkemiseksi:

Lisää Playwright MCP -palvelin

Avaa terminaali ja suorita:

claude mcp add playwright npx @playwright/mcp@latest

Tämä rekisteröi uuden MCP-palvelimen nimeltään playwright, jonka Claude Code käynnistää npx:n kautta aina, kun se tarvitsee selaintyökaluja. Ensimmäinen kutsuminen lataa paketin ja vaaditut selainbinäärit, joten anna sille minuutti ensimmäisellä kerralla.

Tarkista yhteys

Aloita uusi Claude Code -istunto ja suorita /mcp-komento:

claude

/mcp

Sinun pitäisi nähdä playwright lueteltuna yhdistettynä palvelimena sekä työkalut, jotka se paljastaa (navigointi, napsauttaminen, kirjoittaminen, kuvakaappaukset, verkon valehtelu ja paljon muuta).

Valinnainen: käytä JSON-konfiguraatiota sen sijaan

Jos haluat muokata config-tiedostoja suoraan, sama palvelin voidaan lisätä ~/.claude.json (tai projektin laajuiseen .mcp.json) käyttämällä vakio-MCP-muotoa:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Käynnistä Claude Code uudelleen tiedoston muokkaamisen jälkeen ja palvelin ilmestyy /mcp:hen.

Ensimmäinen selainautomaatio Claude Codessa

Kun palvelin on yhdistetty, kehotteesi voivat nyt ohjata oikeaa selainta. Kokeile kanonista ensimmäistä vuorovaikutusta Playwright-dokumenteista:

Navigoi osoitteeseen https://demo.playwright.dev/todomvc ja lisää muutama todo-kohta.

Claude Code avaa selaimen, pyytää saavutettavuustilannekuvaa sivusta, paikantaa syötteen sen elementtiviitteen perusteella, kirjoittaa jokaisen todo-kohdan ja vahvistaa tuloksen sinulle terminaalissa.

Huomautus siitä, mikä selain avautuu: oletusarvoisesti tämä käynnistää Chromiumin headed-tilassa. Muuta sitä lisäämällä liput args-osaan MCP-konfiguraatiossasi ja käynnistä Claude Code uudelleen: --headless ikkunan piilottamiseksi tai --browser=firefox|webkit|msedge moottoreiden vaihtamiseksi.

Kuinka saavutettavuuden tilannekuvat toimivat

Kun Playwright MCP -työkalu suoritetaan, se palauttaa sivun strukturoidun tilannekuvan – elementtiroolit, tekstisisältö ja viiteavainnukset – pikseleiden sijaan. Claude lukee tilannekuvan ja käyttää viitteitä, kuten ref=e5 tekstiruutuun kirjoittamiseen tai ref=e10 valintaruudun vaihtamiseen. Ei pikselinpyöritystä, ei hauraita CSS-valitsimia – vain strukturoitua sivutilaa, josta malli voi päätellä.

Liity uutiskirjeellemme

Saa uusimmat vinkit, trendit ja tarjoukset ilmaiseksi.

Sähköpostiosoite

Tilaa

Ydinkyvyt, joita voit käyttää Claude Codesta

Kun Playwright MCP on kytketty, samat kehotukset, jotka antaisit työtoverille, toimivat Claude Codessa:

• Navigointi: “Mene example.com:iin,” “mene takaisin,” “lataa sivu uudelleen.”
• Napsauttaminen ja kirjoittaminen: “Napsauta Lähetä-painiketta,” “täytä sähköpostikentän arvo test@example.com .”
• Kuvakaappaukset: “Ota kuvakaappaus hinnoitteluosasta.”
• Näppäimistö ja hiiri: Paina näppäimiä, vie hiiri päälle, vedä ja pudota.
• Välilehdet ja dialogit: Avaa uusia välilehtiä, vaihda niiden välillä, hyväksy tai hylkää ponnahdusikkunat.
• Verkon seuranta: “Luettele sivun lataamisen jälkeen tehdyt pyynnöt.”
• API:n valehtelu: “Valehdi /api/users-päätepisteelle palauttamaan tyhjä taulukko.”
• Tallennustilan tila: Tallenna todennetut istunnot tiedostoon ja lataa ne myöhemmin uudelleen.

Työnkuluille, jotka tarvitsevat enemmän kuin yhden työkalun kutsu, voit pyytää Claude Codea kutsumaan browser_run_code ja suorittamaan Playwright-skriptin inline-tilassa – hyödyllinen väitteille, tiedon purkamiselle tai mihin tahansa, josta hyötyvät muutama rivi imperatiivista koodia.

Hyödylliset konfiguraatiovaihtoehdot

Playwright MCP:llä on muutamia lippuja, joista kannattaa tietää. Lisää ne args-taulukkoon konfiguraatiossasi (tai claude mcp add -komentoosi --:n jälkeen).

Headless-tila

Selain toimii headed-tilassa oletusarvoisesti, jotta voit katsoa mitä tapahtuu. Jos haluat suorittaa headless-tilassa – hyödyllinen CI:lle tai etäkuorille – välitä --headless:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless"
      ]
    }
  }
}

Valitse selain

Vaihda moottoreita --browser-lipulla. Tuetut arvot ovat chrome, firefox, webkit ja msedge:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser=firefox"
      ]
    }
  }
}

Profiilitilat

Playwright MCP tukee kolmea profiilitilaa:

• Pysyvä (oletus): Kirjautumistila ja evästeet säilyvät istuntojen välillä.
• Eristetty: Välitä --isolated aloittaaksesi jokainen istunto puhtaalta, valinnaisesti siemennetty --storage-state:lla.
• Selainlaajennus: Välitä --extension liittyäksesi olemassa oleviin selainvälilehteihin Playwright MCP Bridge -laajennuksen kautta.

Erillinen HTTP-palvelin

Jos sinun on suoritettava näyttöä ilman näyttöä olevan headed-selainta (tai IDE-työntekijästä), käynnistä palvelin erikseen ja muodosta yhteys HTTP:n yli.

Avaa toinen terminaali – jätä se käyntiin koko istunnon ajaksi – ja käynnistä palvelin siellä:

npx @playwright/mcp@latest --port 8931

Pidä terminaali auki. Se on se, joka paljastaa selaimen osoitteessa localhost:8931, jotta voit katsella istuntoa omassa selaimessasi ja jotta Claude Codella on jotain, mihin se voi muodostaa yhteyden. Terminaalin sulkeminen sammuttaa palvelimen.

Sitten terminaalissa, jossa suoritat Claude Codea, osoita se päätepisteeseen päivittämällä konfiguraatiosi:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

Käytännön työnkulut, jotka kannattaa varastaa

Kun Playwright MCP on yhdistetty, Claude Code voi käsitellä päästä päähän -testiskaffoldausta, virheiden toistamista, API:n valehtelu-tarkistuksia, sivun auditointeja ja julkaisun savutesteistä – mitä tahansa, joka sisältää selaimen ohjaamisen ja raportoinnin.

Kaksi asiaa tekee näistä kehotuksista oikeasti toimivaksi käytännössä. Ensinnäkin CLAUDE.md projektin juuressa, joka dokumentoi staging-URL:si, demo-tunnistetiedot ja kaikki konventiot, joita agentti pitäisi noudattaa – ilman sitä, “kirjaudu sisään demo-käyttäjänä” ei ole mitään ankkuria. Toiseksi, jos haluat Claude Coden vetävän kontekstia ongelmista tai lipuista, yhdistä toinen MCP-palvelin siihen – GitHub MCP -palvelin on yleinen valinta. Ohita molemmat ja Claude Code kysyy (kohtuullisesti) mitä ongelma #482 on.

Miksi yhdistää Claude Code Playwright MCP:hen?

Muutamia syitä, miksi tämä yhdistelmä on vaikea voittaa:

• Terminaali-natiivi: Kaikki tapahtuu siellä, missä jo työskentelet. Ei kontekstinvaihtoa erilliseen testijuoksijaan.
• Saavutettavuus ensin: Tilannekuvat voittavat kuvakaappaukset nopeudella ja luotettavuudella, ja ne toimivat ilman näkömallia.
• Oikea Playwright alla: Mitä tahansa voit tehdä Playwrightilla koodissa, voit tehdä täällä – multi-selain, verkon valehtelu, tallennustilan tila ja paljon muuta.
• Koostuva muiden MCP-palvelimien kanssa: Pinoa Playwright GitHub:n, tietokantasi tai seurantasi MCP-palvelimen rinnalle, ja Claude Code voi siirtää työtä päästä päähän kaikkien niiden yli.
• Avoin standardi: MCP on kannettava. Sama Playwright-palvelin toimii Cursorissa, VS Codessa, Windsurfissa ja Claude Desktopissa, jos vaihdat asiakkaita.

Lisää palvelin, suorita /mcp vahvistamiseksi, ja seuraava “mene testaa kirjautumissivua” -kehotus muuttuu oikeaksi selainistunnoksi – Claude Codella ohjatuksi, katsotuksi (tai ei) headed-tilassa, ja todennettavaksi saavutettavuuden tilannekuvien kautta.