Jak używać Claude Code z Playwright MCP: Kompletny przewodnik konfiguracji

Co to jest Playwright MCP?

Serwer Playwright MCP daje każdemu klientowi Model Context Protocol supermoc automatyzacji przeglądarki. Zamiast prosić sztuczną inteligencję, aby “spojrzała na” piksele, serwer zwraca ustrukturyzowane snapshoty dostępności strony, a model wchodzi w interakcję z elementami poprzez identyfikator referencyjny. To sprawia, że pętla jest szybka, deterministyczna i wolna od obciążenia modelu wizyjnego. Działa z VS Code, Cursor, Windsurf, Claude Desktop, Claude Code i każdym innym klientem MCP.

Dla Claude Code w szczególności oznacza to, że agent w Twoim terminalu może teraz otworzyć przeglądarkę, kliknąć, wypełnić formularze, mockować żądania sieciowe, przechwycić zrzuty ekranu, a nawet wykonać niestandardowe skrypty Playwright — wszystko napędzane przez naturalne podpowiedzi językowe.

Wymagania wstępne

Zanim zaczniesz, upewnij się, że masz:

• Node.js w wersji 18 lub nowszej zainstalowany
• Claude Code zainstalowany i zalogowany (uruchom claude w terminalu, aby sprawdzić)
• Terminal, w którym czujesz się komfortowo pracować

To wszystko — Playwright MCP pobiera swoje binarne pliki przeglądarki przy pierwszym uruchomieniu.

Gotowy na rozwój swojej firmy?

Rozpocznij bezpłatny okres próbny już dziś i zobacz rezultaty w ciągu kilku dni.

Poproś o demo Zaloguj się

Konfiguracja integracji Playwright MCP

Połączenie Playwright MCP z Claude Code to jedno polecenie. Wykonaj następujące kroki, aby to podłączyć:

Dodaj serwer Playwright MCP

Otwórz terminal i uruchom:

claude mcp add playwright npx @playwright/mcp@latest

To rejestruje nowy serwer MCP o nazwie playwright, który Claude Code uruchamia za pośrednictwem npx za każdym razem, gdy potrzebuje narzędzi przeglądarki. Pierwsze uruchomienie pobiera pakiet i wymagane binarne pliki przeglądarki, więc daj sobie minutę za pierwszym razem.

Sprawdź połączenie

Uruchom nową sesję Claude Code i uruchom polecenie /mcp:

claude

/mcp

Powinieneś zobaczyć playwright wymieniony jako połączony serwer, wraz z narzędziami, które udostępnia (nawigacja, klikanie, pisanie, zrzuty ekranu, mockowanie sieci i inne).

Opcjonalnie: Zamiast tego użyj konfiguracji JSON

Jeśli wolisz edytować pliki konfiguracji bezpośrednio, ten sam serwer można dodać do ~/.claude.json (lub projekt-scoped .mcp.json) używając standardowego formatu MCP:

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

Uruchom ponownie Claude Code po edycji pliku, a serwer pojawi się w /mcp.

Twoja pierwsza automatyzacja przeglądarki w Claude Code

Z podłączonym serwerem, Twoje podpowiedzi mogą teraz sterować prawdziwą przeglądarką. Spróbuj kanonicznej pierwszej interakcji z dokumentacji Playwright:

Przejdź do https://demo.playwright.dev/todomvc i dodaj kilka elementów todo.

Claude Code otworzy przeglądarkę, zażąda snapshotu dostępności strony, zlokalizuje wejście według jego referencji elementu, wpisze każde zadanie todo i potwierdzi wynik z powrotem w terminalu.

Uwaga na temat otwieranej przeglądarki: domyślnie uruchamia to Chromium w trybie headed. Aby to zmienić, dodaj flagi do args w konfiguracji MCP i uruchom ponownie Claude Code: --headless, aby ukryć okno, lub --browser=firefox|webkit|msedge, aby przełączyć silniki.

Jak działają snapshoty dostępności

Gdy uruchamia się narzędzie Playwright MCP, zwraca ustrukturyzowany snapshot strony — role elementów, zawartość tekstu i identyfikatory referencyjne — zamiast pikseli. Claude czyta snapshot i używa referencji takich jak ref=e5 do wpisania w pole tekstowe lub ref=e10 do przełączenia pola wyboru. Bez pchania pikseli, bez kruchych selektorów CSS — tylko ustrukturyzowany stan strony, o którym model może rozumować.

Dołącz do naszego newslettera

Otrzymuj najnowsze wskazówki, trendy i oferty za darmo.

Adres e-mail

Zapisz się

Podstawowe możliwości, które możesz używać z Claude Code

Gdy Playwright MCP jest podłączony, te same podpowiedzi, które dałbyś kolegze z zespołu, działają w Claude Code:

• Nawigacja: “Przejdź do example.com”, “wróć”, “odśwież stronę”.
• Klikanie i pisanie: “Kliknij przycisk Prześlij”, “wypełnij pole e-mail za pomocą test@example.com ”.
• Zrzuty ekranu: “Zrób zrzut ekranu sekcji cennika”.
• Klawiatura i mysz: Naciśnij klawisze, najechaj, przeciągnij i upuść.
• Karty i okna dialogowe: Otwórz nowe karty, przełączaj się między nimi, zaakceptuj lub odrzuć wyskakujące okienka.
• Monitorowanie sieci: “Wypisz żądania wysłane od załadowania strony”.
• Mockowanie interfejsu API: “Mockuj punkt końcowy /api/users, aby zwrócić pustą tablicę”.
• Stan magazynu: Zapisz uwierzytelnione sesje do pliku i załaduj je później.

W przypadku przepływów pracy, które potrzebują więcej niż jedno wywołanie narzędzia, możesz poprosić Claude Code, aby wywołał browser_run_code i wykonał skrypt Playwright wbudowany — przydatne do asercji, ekstrakcji danych lub wszystkiego, co korzysta z kilku linii kodu imperatywnego.

Przydatne opcje konfiguracji

Playwright MCP ma kilka flag warte poznania. Dodaj je do tablicy args w konfiguracji (lub do polecenia claude mcp add po --).

Tryb Headless

Przeglądarka domyślnie działa w trybie headed, aby można było obserwować, co się dzieje. Aby uruchomić headless — przydatne dla CI lub zdalnych powłok — przekaż --headless:

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

Wybierz przeglądarkę

Przełączaj silniki za pomocą flagi --browser. Obsługiwane wartości to chrome, firefox, webkit i msedge:

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

Tryby profilu

Playwright MCP obsługuje trzy tryby profilu:

• Trwały (domyślny): Stan logowania i pliki cookie utrzymują się między sesjami.
• Izolowany: Przekaż --isolated, aby rozpocząć każdą sesję od nowa, opcjonalnie obsiane za pomocą --storage-state.
• Rozszerzenie przeglądarki: Przekaż --extension, aby dołączyć do istniejących kart przeglądarki za pośrednictwem rozszerzenia Playwright MCP Bridge.

Samodzielny serwer HTTP

Jeśli chcesz uruchomić przeglądarkę headed gdzieś bez wyświetlacza (lub od pracownika IDE), uruchom serwer osobno i połącz się przez HTTP.

Otwórz drugi terminal — pozostaw go uruchomionym przez całą sesję — i uruchom tam serwer:

npx @playwright/mcp@latest --port 8931

Pozostaw ten terminal otwarty. To jest to, co udostępnia przeglądarkę na localhost:8931, dzięki czemu możesz zobaczyć sesję w swojej własnej przeglądarce i dzięki czemu Claude Code ma coś do czego się podłączyć. Zamknięcie terminala wyłącza serwer.

Następnie w terminalu, w którym uruchamiasz Claude Code, wskaż go na punkt końcowy, aktualizując konfigurację:

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

Praktyczne przepływy pracy warte kradzieży

Gdy Playwright MCP jest podłączony, Claude Code może obsługiwać rusztowanie testów end-to-end, reprodukcje błędów, sprawdzenia mockowania interfejsu API, audyty stron i testy dymne wydania — wszystko, co wiąże się ze sterowaniem przeglądarką i raportowaniem z powrotem.

Dwie rzeczy sprawiają, że te podpowiedzi faktycznie działają w praktyce. Po pierwsze, CLAUDE.md w katalogu głównym projektu, który dokumentuje Twój adres URL przejściowy, poświadczenia demo i wszelkie konwencje, które agent powinien przestrzegać — bez niego “zaloguj się jako użytkownik demo” nie ma się do czego zakotwić. Po drugie, jeśli chcesz, aby Claude Code pobierał kontekst z problemów lub biletów, podłącz drugi serwer MCP — serwer GitHub MCP jest popularnym wyborem. Pomiń oba, a Claude Code (rozsądnie) zapyta Cię, czym jest problem #482.

Dlaczego łączyć Claude Code z Playwright MCP?

Kilka powodów, dla których ta kombinacja jest trudna do pokonania:

• Terminal-native: Wszystko dzieje się tam, gdzie już pracujesz. Brak przełączenia kontekstu do oddzielnego testera.
• Dostępność-first: Snapshoty biją zrzuty ekranu pod względem szybkości i niezawodności, i działają bez modelu wizyjnego.
• Prawdziwy Playwright pod spodem: Wszystko, co możesz zrobić z Playwright w kodzie, możesz zrobić tutaj — wieloprzeglądarka, mockowanie sieci, stan magazynu i inne.
• Composable z innymi serwerami MCP: Stos Playwright obok GitHub, bazy danych lub serwera monitorowania MCP i Claude Code może przenosić pracę end-to-end na wszystkie z nich.
• Otwarty standard: MCP jest przenośny. Ten sam serwer Playwright działa w Cursor, VS Code, Windsurf i Claude Desktop, jeśli przełączysz klientów.

Dodaj serwer, uruchom /mcp, aby potwierdzić, a Twoja następna podpowiedź “przejdź testować stronę logowania” staje się prawdziwą sesją przeglądarki — napędzaną przez Claude Code, obserwowaną (lub nie) w trybie headed i weryfikowalną poprzez snapshoty dostępności.