Puppeteer i Playwright MCP

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
• 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.

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

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

Kontekst dokumentacji Utrzymuj swoje AI uziemione w aktualnej dokumentacji bibliotek.