Przejdź do głównej zawartości

Automatyzacja przeglądarki

Dzięki automatyzacji przeglądarki Speedwave może obsługiwać prawdziwą przeglądarkę: otwierać stronę, klikać, wpisywać tekst, wypełniać formularze, robić zrzuty ekranu, czytać wyrenderowany DOM i sprawdzać, czy dany element lub tekst jest widoczny. Skorzystaj z niej, kiedy zwykłe pobranie strony to za mało: przy aplikacji renderowanej w JavaScripcie, aplikacji jednostronicowej albo stronie, której załadowanie zajmuje chwilę. W sekcji Automatyczne testowanie przeglądarki zobaczysz, jak to wygląda w trakcie sesji.

Rozszerza też to, co potrafi sprawdzić audyt strony. Spośród reguł audytu 115 opiera się na zwykłym pobraniu strony i obywa się bez przeglądarki, natomiast pozostałych 13 wymaga działającej przeglądarki i zostaje pominiętych, kiedy automatyzacja przeglądarki jest wyłączona.

Speedwave udostępnia tę funkcję za pośrednictwem oficjalnego serwera Microsoftu @playwright/mcp, który uruchamia przeglądarkę Chromium w trybie headless wewnątrz zabezpieczonego kontenera workera. Nie ma tu żadnych poświadczeń ani pliku z tokenem: worker działa jako usługa compose mcp-playwright, w kontenerze o nazwie speedwave_<project>_mcp_playwright.

Przeglądarka to usługa współdzielona, a nie osobna dla każdej wtyczki, dzięki czemu Chromium nie uruchamia się po kilka razy, gdy potrzebuje go więcej niż jedna wtyczka. Speedwave korzysta z niej przez te same narzędzia MCP niezależnie od tego, czy poprosisz o to wprost, czy wywoła ją za ciebie któraś z wtyczek.

Skoro nie ma poświadczeń do przechowywania, nie ma też czego konfigurować. Wystarczy włączyć automatyzację przeglądarki w danym projekcie i już można z niej korzystać. Speedwave uruchamia serwer @playwright/mcp z domyślnym zestawem narzędzi, bez dodatkowych flag, dając w sumie 21 narzędzi:

NarzędzieCo robi
browser_navigateWczytuje adres URL na stronie.
browser_navigate_backCofa się o jeden krok w historii strony.
browser_tabsWyświetla listę, otwiera, zamyka lub przełącza karty przeglądarki.
browser_snapshotWykonuje zrzut dostępności (accessibility snapshot) bieżącej strony. Tylko odczyt.
browser_take_screenshotRobi zrzut ekranu widocznego obszaru lub całej strony. Tylko odczyt.
browser_console_messagesOdczytuje log konsoli przeglądarki. Tylko odczyt.
browser_network_requestsPokazuje listę żądań sieciowych wysłanych od chwili wczytania strony. Tylko odczyt.
browser_evaluateWykonuje wyrażenie JavaScript na stronie lub elemencie.
browser_run_codeWykonuje krótki fragment kodu Playwright na stronie.
browser_clickKlika element.
browser_hoverNajeżdża kursorem na element.
browser_dragPrzeciąga jeden element i upuszcza go na drugim.
browser_typeWpisuje tekst w edytowalne pole.
browser_press_keyWciska pojedynczy klawisz lub skrót klawiszowy.
browser_select_optionWybiera opcję z listy rozwijanej.
browser_fill_formWypełnia kilka pól formularza za jednym wywołaniem.
browser_file_uploadDołącza jeden lub więcej plików do pola wyboru pliku.
browser_handle_dialogZatwierdza lub odrzuca okno dialogowe przeglądarki, na przykład alert albo prośbę o potwierdzenie.
browser_wait_forCzeka, aż tekst się pojawi, zniknie albo upłynie zadany czas.
browser_resizeZmienia rozmiar okna przeglądarki.
browser_closeZamyka bieżącą stronę.

Żadne z tych narzędzi nie działa destrukcyjnie w takim sensie, jak wywołanie usuwające dane z prawdziwej bazy: stan przeglądarki i tak przepada przy każdym restarcie kontenera. Zrzuty ekranu i zawartość stron wracają jako osadzone dane base64 w odpowiedzi narzędzia. Automatyzacja przeglądarki nie zapisuje w twoim projekcie żadnych plików.

Przeglądarka działa w kontenerze, więc localhost w jej środku oznacza sam kontener, a nie twój komputer. Żeby połączyć się z serwerem deweloperskim uruchomionym na twoim komputerze, wpisz host.docker.internal zamiast localhost, na przykład http://host.docker.internal:4200 dla aplikacji na porcie 4200. Speedwave odwzorowuje ten alias na adres bramy twojego hosta, dzięki czemu może wczytać i przetestować stronę, którą uruchamiasz u siebie lokalnie.

Przy każdym restarcie kontenera tymczasowa pamięć przeglądarki zostaje wyczyszczona, więc za każdym razem dostajesz czysty profil. Ciasteczka ani inne dane nie przechodzą z jednego uruchomienia do następnego, dlatego logowanie z jednej sesji nie jest dostępne w kolejnej.

  1. Włącz Beta features w menu Speedwave na pasku zadań, bo automatyzacja przeglądarki to integracja w wersji beta.
  2. Włącz ją w swoim projekcie. Nie ma tu nic do uwierzytelnienia.
  3. Poczekaj na restart kontenerów. Za pierwszym razem Speedwave buduje obraz workera i pobiera Chromium, więc czekasz nieco dłużej; przy kolejnych przełączeniach korzysta z obrazu z pamięci podręcznej i dzieje się to niemal natychmiast.

Zajrzyj do Podłącz integrację, żeby poznać wzorzec, według którego działa każda integracja.

Worker jest zabezpieczony dokładnie tak jak każdy inny kontener: wszystkie uprawnienia Linuksa (capabilities) odebrane, brak możliwości eskalacji uprawnień, główny system plików tylko do odczytu, a pamięć tymczasowa oznaczona flagami noexec,nosuid. Chromium pracuje z wyłączoną własną piaskownicą procesu i wymienia tę warstwę ochrony na izolację kontenera: jej zadanie przejmują otaczająca maszyna wirtualna oraz warstwa odbierająca uprawnienia. W sekcji Model izolacji zobaczysz, jak to warstwowanie sprawdza się we wszystkich kontenerach projektu.

Przeglądarka ma dostęp do sieci i wczytuje każdy publiczny adres URL, jaki poda jej wywołanie. Sięga też do twojego komputera, ale wyłącznie przez loopback: za pośrednictwem host.docker.internal w zasięgu jest wszystko, co nasłuchuje na 127.0.0.1. Miej to na uwadze, jeśli uruchamiasz tam nieuwierzytelnione usługi.