Puppeteer i Playwright MCP

Spędziłeś godzinę wdrażając nowy przepływ zakupowy. Kod wygląda dobrze, typy są sprawdzone, 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

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.playwright]
transport = "stdio"
command = "npx"
args = ["-y", "@playwright/mcp@latest"]

Kluczowe narzędzia: browser_navigate, browser_click, browser_fill, browser_screenshot, browser_get_text, browser_select i browser_evaluate.

Wskazówka

Prompt kopiuj-wklej dla testów E2E:

“Otwórz localhost:3000/register, wypełnij formularz testem@example.com i bezpiecznym hasłem, wyślij go i zweryfikuj, czy pojawia się komunikat sukcesu. Następnie przejdź do /login, zaloguj się tymi samymi danymi uwierzytelniającymi i potwierdź, że dashboard się ładuje. Zrób zrzut ekranu dashboardu.”

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.puppeteer]
transport = "stdio"
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:

“Przejdź do localhost:3000/pricing, zrób pełnostronicowy zrzut ekranu. Przełącz tryb ciemny używając przełącznika w nagłówku, zrób kolejny zrzut ekranu. Porównaj oba i oznacz wszystkie elementy ze złamanym układem lub słabym kontrastem w trybie ciemnym.”

Wskazówka

Prompt kopiuj-wklej dla web scrapingu:

“Przejdź do https://example.com/pricing. Wyodrębnij wszystkie nazwy planów, ceny i listy funkcji. Ustrukturyzuj dane jako tablicę JSON z jednym obiektem na plan. Nie wchodź w interakcję z formularzami logowania lub banerami cookies.”

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: “Przejdź do strony i poczekaj do 60 sekund na pełne załadowanie.”

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.