Przewodnik po serwerze Playwright MCP i kreator konfiguracji
Playwright MCP Server: instalacja, opcje i narzędzia | We.Inc
Co robi serwer Playwright MCP, jak działają snapshoty dostępności, które opcje warto ustawić, jego główne narzędzia i kreator, który napisze konfigurację za Ciebie.
Playwright MCP to otwartoźródłowy serwer MCP od Microsoftu, który daje asystentowi AI prawdziwą przeglądarkę do klikania, pisania, wypełniania formularzy i czytania stron. Zamiast oglądać zrzuty ekranu, czyta drzewo dostępności strony, czyli uporządkowaną listę przycisków, linków i tekstu. Wymaga Node.js 18 lub nowszego i instaluje się jedną linią npx.
Playwright MCP w skrócie
Element
Wartość
Pakiet npm
@playwright/mcp
Wymaganie
Node.js 18 lub nowszy
Jak widzi strony
Snapshoty dostępności, nie piksele
Przeglądarki
chrome, firefox, webkit, msedge
Okno domyślne
Widoczne (headed). Dodaj --headless, aby je ukryć
Jeśli prowadzisz stronę lub sklep, Playwright MCP to praktyczny sposób, by asystent przeszedł przez Twoje strony tak jak klient: otworzył menu, dodał coś do koszyka, wysłał formularz kontaktowy i zgłosił, co nie działa. Jest zbudowany na Playwright, popularnej bibliotece do testowania przeglądarek. Wybierz opcje poniżej i skopiuj konfigurację, a potem przeczytaj uwagi o bezpieczeństwie, zanim skierujesz go na cokolwiek, gdzie jesteś zalogowany.
Wybierz przeglądarkę i to, czy okno ma być widoczne, czy w trybie headless.
Włącz tryb izolowany, jeśli chcesz, aby każda sesja zaczynała się od zera, bez zapisywania czegokolwiek na dysku.
Dodaj potrzebne dodatkowe grupy możliwości, takie jak zapisywanie PDF lub asercje testowe.
Skopiuj JSON do konfiguracji swojej aplikacji MCP i uruchom ją ponownie. Pierwsze uruchomienie pobiera pakiet.
Testuj na kopii stagingowej lub koncie testowym, a nie na swoim prawdziwym logowaniu administratora.
Używaj --isolated przy testach, aby cookies z jednej sesji nigdy nie przeciekały do następnej.
Poproś o snapshot, zanim poprosisz o kliknięcia: asystent wybiera elementy z tej listy.
Podawaj dokładne kroki ("otwórz /pricing, kliknij drugi plan, podaj sumę") zamiast ogólnych celów.
Pamiętaj o browser_run_code_unsafe: uruchamia dowolny kod Playwright, więc używaj go tylko z promptami, którym ufasz.
Najczęściej zadawane pytania
Czym jest snapshot dostępności?
Przeglądarki utrzymują drzewo dostępności, ten sam uporządkowany widok, którego używają czytniki ekranu: każdy przycisk, link, nagłówek i pole z nazwą i rolą. Playwright MCP przekazuje asystentowi to drzewo, więc może on powiedzieć "kliknij przycisk Dodaj do koszyka" bez zgadywania na podstawie obrazu.
Czy Playwright MCP jest granicą bezpieczeństwa?
Nie, a jego README mówi to pogrubioną czcionką. Opcje takie jak --allowed-origins i --blocked-origins również są opisane jako niebędące granicą bezpieczeństwa. Traktuj go jako narzędzie, które nadzorujesz, i uruchamiaj tam, gdzie błąd nie dosięgnie prawdziwych danych klientów.
Czy pamięta logowania między sesjami?
Domyślnie używa trwałego profilu, więc logowania są zapisywane na dysku jak w zwykłej przeglądarce. Z --isolated profil żyje w pamięci i znika po zamknięciu przeglądarki. Cookies możesz wczytać do izolowanej sesji za pomocą --storage-state.
Czy może robić zrzuty ekranu lub zapisywać PDF?
browser_take_screenshot to narzędzie podstawowe. Zapisywanie PDF (browser_pdf_save) włącza się opcjonalnie przez --caps=pdf, a narzędzia klikania po współrzędnych wymagają --caps=vision.
Używać Playwright MCP czy Playwright CLI?
README sugeruje, że agenci programistyczni mogą lepiej radzić sobie z osobnym Playwright CLI, które zużywa mniej tokenów. MCP zostawia do dłuższych sesji eksploracyjnych, w których utrzymywanie otwartego stanu przeglądarki jest warte tego kosztu.
Trwały, izolowany lub Twoja własna przeglądarka
Playwright MCP może działać na trzy sposoby. Domyślny trwały profil przechowuje cookies i logowania w folderze dla każdego projektu. Tryb izolowany trzyma wszystko w pamięci, co pasuje do powtarzalnych testów. Tryb rozszerzenia przeglądarki łączy się z oknem Chrome lub Edge, które masz już otwarte, co jest wygodne, ale oznacza, że asystent działa z Twoimi prawdziwymi logowaniami.
Z trwałego profilu może naraz korzystać tylko jedna przeglądarka. Jeśli uruchamiasz dwie sesje asystenta w tym samym projekcie, uruchom drugą z --isolated lub z innym --user-data-dir.
Dobre zadania dla niego na Twojej stronie
Sprawdzanie, czy każdy link w menu głównym otwiera stronę, która się ładuje. Wypełnianie formularza kontaktowego danymi testowymi i potwierdzanie, że pojawia się podziękowanie. Czytanie komunikatów konsoli na stronie, która wydaje się wolna. Zmiana rozmiaru do szerokości telefonu i wypisanie wszystkiego, co wychodzi poza ekran.
Zapisuj wyniki jako listę kontrolną, którą możesz powtarzać po każdej zmianie, aby przebieg asystenta stał się Twoim testem regresji.
Opcje, które warto znać
Każda opcja ma też odpowiednik w postaci zmiennej środowiskowej, wymieniony w README.
Wybrane opcje Playwright MCP
Opcja
Co robi
--browser <browser>
chrome, firefox, webkit lub msedge
--headless
Działa bez widocznego okna. Domyślnie okno jest widoczne
--isolated
Trzyma profil przeglądarki w pamięci, a nie na dysku
--storage-state <path>
Wczytuje cookies i local storage do izolowanej sesji
--device <device>
Emuluje urządzenie, na przykład "iPhone 15"
--viewport-size <size>
Ustawia viewport w pikselach, na przykład "1280x720"
--caps <caps>
Włącza dodatkowe grupy narzędzi, takie jak pdf lub vision
--allowed-origins / --blocked-origins
Zezwala na źródła żądań lub je blokuje. Nie jest granicą bezpieczeństwa
--timeout-action / --timeout-navigation
Domyślnie 5000 ms i 60000 ms
--port <port>
Udostępnia serwer przez HTTP, aby klient mógł połączyć się przez URL
Narzędzia podstawowe
Podstawowe narzędzia Playwright MCP
Narzędzie
Przeznaczenie
Tylko odczyt
Otwórz URL
Nie
Pobierz snapshot dostępności strony
Tak
Kliknij element
Nie
Wpisz tekst w pole
Nie
Wypełnij kilka pól naraz
Nie
Zapisz zrzut ekranu
Tak
Odczytaj komunikaty konsoli
Tak
Wypisz żądania sieciowe
Tak
Zmień rozmiar okna
Nie
Uruchom kod Playwright
Nie
Przykłady konfiguracji
Konfiguracja standardowa
Minimalna konfiguracja, którą README podaje dla większości aplikacji MCP.
Uruchomienie jako serwer HTTP i połączenie przez URL
Przydatne, gdy aplikacja nie może sama otworzyć okna. Klient wskazuje wtedy na http://localhost:8931/mcp.
Kreator konfiguracji Playwright MCP
Wybierz opcje i skopiuj JSON. Ta strona tylko pisze tekst, nie uruchamia przeglądarki.
Przeglądarka
Headless (bez widocznego okna)
Izolowany profil (nic nie jest zapisywane na dysku)
Rozmiar viewportu, na przykład 1280x720 (opcjonalnie)
Dodatkowe grupy możliwości
Konfiguracja JSON
Viewport musi wyglądać jak 1280x720 (szerokość x wysokość w pikselach). Został pominięty.