Browser MCP: Playwright, Puppeteer i Chrome DevTools

Spędziłeś godzinę wdrażając nowy przepływ zakupowy. Kod wygląda dobrze, typy się zgadzają, testy jednostkowe przechodzą. Ale kiedy otwierasz przeglądarkę, przycisk “Wyślij” jest ukryty za sticky footerem. Twoje AI mogłoby wyłapać to w sekundach — gdyby mogło zobaczyć przeglądarkę.

Co z tego wyniesiesz

• Konfigurację Playwright MCP i Puppeteer MCP dla wszystkich trzech narzędzi
• Kiedy sięgnąć po Chrome DevTools MCP — audyty Lighthouse, ślady wydajności i debugowanie na żywo
• Zrozumienie trybu drzewa dostępności vs trybu zrzutu ekranu
• Prompty kopiuj-wklej dla testów E2E, regresji wizualnej i web scrapingu
• Strategie uruchamiania browser MCP w CI/CD

Jak to działa

Konfiguracja jest identyczna we wszystkich trzech narzędziach: zarejestruj serwer MCP, a następnie steruj przeglądarką promptami w języku naturalnym. Przepływ zawsze sprowadza się do tych samych trzech kroków.

1. Wybierz serwer. Playwright MCP do pracy cross-browser i interakcji z drzewem dostępności (domyślny), Puppeteer MCP do scrapingu wyłącznie w Chrome. Oba skonfigurowano poniżej.

2. Zarejestruj go raz w konfiguracji MCP swojego narzędzia (bloki poniżej), a następnie zrestartuj narzędzie, aby podchwyciło nowy serwer.

3. Steruj przeglądarką zwykłym językiem. Poproś AI, aby nawigowało, wypełniało formularze, klikało i robiło zrzuty ekranu. Odczytuje ono stronę przez drzewo dostępności i działa na elementach po ich etykietach, bez żadnych selektorów.

Playwright MCP: zalecany wybór

Oficjalny Playwright MCP Microsoftu domyślnie używa strukturalnych drzew dostępności. AI rozumie elementy strony semantycznie — przyciski po ich etykiecie, pola input po ich nazwie — zamiast przez kosztowne wywołania wizyjne.

Cursor

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

Claude Code

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

Codex

[mcp_servers.playwright]
command = "npx"
args = ["-y", "@playwright/mcp@latest"]

Kluczowe narzędzia: browser_navigate, browser_click, browser_type, browser_take_screenshot, browser_snapshot (odczyt drzewa dostępności), browser_select_option i browser_evaluate.

Wskazówka

Prompt kopiuj-wklej dla testów E2E:

“Open localhost:3000/register, fill in the form with test@example.com and a secure password, submit it, and verify the success message appears. Then navigate to /login, log in with the same credentials, and confirm the dashboard loads. Take a screenshot of the dashboard.”

Puppeteer MCP: alternatywa

Serwer MCP Puppeteer to lżejsza opcja do automatyzacji tylko Chrome i szybkich zadań scrapingowych.

Cursor

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Claude Code

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Codex

[mcp_servers.puppeteer]
command = "npx"
args = ["-y", "@modelcontextprotocol/server-puppeteer"]

Wybierz Playwright dla wsparcia cross-browser i interakcji z drzewem dostępności. Wybierz Puppeteer dla funkcji specyficznych dla Chrome lub prostszych zadań scrapingowych.

Chrome DevTools MCP: wydajność i debugowanie

Playwright i Puppeteer służą do sterowania przeglądarką. Oficjalny Chrome DevTools MCP (chrome-devtools-mcp, utrzymywany przez zespół Chrome DevTools) służy do jej inspekcji — oddaje agentowi panele, które otworzyłbyś ręcznie: ślady wydajności z analizami w stylu Lighthouse, konsolę ze stosami wywołań mapowanymi na źródła, inspekcję żądań sieciowych, DOM/CSS oraz zrzuty sterty. Sięgnij po niego, gdy “czy przycisk działa?” zmienia się w “czy ta zmiana pogorszyła LCP?” albo “dlaczego to żądanie się nie udaje?”.

Cursor

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Claude Code

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Codex

[mcp_servers.chrome-devtools]
command = "npx"
args = ["-y", "chrome-devtools-mcp@latest"]

Udostępnia śledzenie wydajności, inspekcję konsoli, monitorowanie sieci, zrzuty ekranu, wprowadzanie do DOM i analizę pamięci — napędzany pod spodem przez Puppeteer, więc nawigacja pozostaje niezawodna. Ponieważ kontroluje żywą stronę, agent debuguje w czasie rzeczywistym, zamiast zgadywać na podstawie kodu źródłowego.

Wskazówka

Prompt kopiuj-wklej dla audytu wydajności:

“Using the Chrome DevTools MCP, record a performance trace of http://localhost:3000, then report the Largest Contentful Paint, the longest main-thread task, and the top render-blocking resource. Suggest the single highest-impact fix and show the code change.”

Uwaga

Chrome DevTools MCP jest narzędziowo ciężki — ładuje wiele schematów narzędzi do kontekstu. Jeśli trzymasz go podłączonego obok innych serwerów, wzorzec wykonywania kodu opakowuje go jako CLI na żądanie i odzyskuje budżet kontekstu.

Drzewo dostępności vs zrzuty ekranu

Tryb drzewa dostępności (domyślny) — szybki, efektywny tokenowo, niezawodny. Przyciski identyfikowane po etykiecie, pola input po nazwie. Używaj do wszystkich standardowych interakcji.

Tryb wizyjny — robi zrzuty ekranu do wizualnego zrozumienia. Niezbędny dla aplikacji canvas, złożonych wizualizacji lub gdy drzewo dostępności błędnie reprezentuje UI.

Notatka

Zacznij od trybu drzewa dostępności. Przełącz się na tryb wizyjny tylko wtedy, gdy AI nie może znaleźć elementu, o którym wie, że powinien istnieć. Elementy canvas, iframe i komponenty shadow DOM czasami wymagają trybu wizyjnego.

Wskazówka

Prompt kopiuj-wklej dla testów regresji wizualnej:

“Navigate to localhost:3000/pricing, take a full-page screenshot. Toggle dark mode using the header switch, take another screenshot. Compare the two and flag any elements with broken layout or poor contrast in dark mode.”

Wskazówka

Prompt kopiuj-wklej dla web scrapingu:

“Navigate to https://example.com/pricing. Extract all plan names, prices, and feature lists. Structure the data as a JSON array with one object per plan. Do not interact with login forms or cookie banners.”

Gdy to się psuje

Przeglądarka nie uruchamia się. Uruchom npx playwright install chromium aby pobrać plik binarny przeglądarki. Na serwerach CI zainstaluj zależności systemowe z npx playwright install-deps.

AI klika zły element. Wiele elementów ma tę samą dostępną nazwę. Dodaj atrybuty aria-label lub poinstruuj AI, aby użyło indeksu elementu w drzewie dostępności.

Zrzuty ekranu są puste. Sesja przeglądarki zaczyna się świeża bez uwierzytelnienia. Najpierw przejdź do strony logowania lub skonfiguruj przechowywane cookies.

Przekroczenia czasu na wolnych stronach. Domyślny timeout nawigacji to 30 sekund. Dla stron SSR zwiększ go: “Navigate to the page and wait up to 60 seconds for full load.”

Co dalej

Redukcja kosztu tokenów MCP Opakuj narzędziowo ciężkie serwery, takie jak Chrome DevTools MCP, w CLI na żądanie, aby odzyskać kontekst.

Serwery MCP baz danych Połącz swoje AI z bazami danych SQL i NoSQL.

Kontekst dokumentacji Utrzymuj swoje AI uziemione w aktualnej dokumentacji bibliotek.