Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Automatyzacja testowania UI za pomocą interfejsu wiersza poleceń Antigravity (AGY), BrowserMCP, Playwright i agenta przeglądarki

1. Wprowadzenie

Rewolucja w zakresie agentów AI zmienia sposób, w jaki tworzymy oprogramowanie, dzięki czemu cały proces jest niezwykle interesujący, ekscytujący i dostępny. Zadania i projekty, które wcześniej zajmowały programistom miesiące, można teraz zrealizować w jednej sesji za pomocą narzędzi opartych na agentach.

Jednym z obszarów, w którym ta transformacja oparta na agentach może przynieść duże korzyści, jest testowanie aplikacji internetowych. Tradycyjnie testowanie aplikacji internetowych było żmudnym zadaniem i ciągłą walką z ich niestabilnością. A gdyby można było całkowicie ominąć tę złożoność? Co by było, gdyby można było po prostu powiedzieć agentowi, co ma przetestować, w zwykłym, naturalnym języku, i pozwolić mu samodzielnie zdecydować, jak to zrobić?

W tym ćwiczeniu pokażemy, jak używać interfejsu wiersza poleceń Antigravity wraz z umiejętnościami agenta i narzędziami multimodalnymi MCP, takimi jak BrowserMCP. Dowiesz się, jak tworzyć i uruchamiać zautomatyzowane testy interfejsu za pomocą języka naturalnego. Pokażemy, jak narzędzia oparte na agentach mogą wykonywać złożone zadania i zapewniać Ci jako twórcy dodatkowe możliwości.

To ćwiczenie skupia się na konkretnych przypadkach użycia automatyzacji interfejsu i zdalnego sterowania przeglądarką, ale najważniejsze są podstawowe zasady i ogromne możliwości, jakie one otwierają. Ucząc agentów korzystania z lokalnych interfejsów wiersza poleceń i serwerów MCP, możemy delegować złożone procesy, którymi sami nie mielibyśmy czasu ani specjalistycznej wiedzy, aby się zająć.

Czego się nauczysz

Czym jest Antigravity CLI i jaką rolę odgrywa w ekosystemie Antigravity.
Czym jest protokół Model Context Protocol (MCP) i dlaczego jest to przełomowa technologia.
Jak BrowserMCP umożliwia agentom AI sterowanie przeglądarkami.
Jak uruchamiać zautomatyzowane testy UI z interfejsu wiersza poleceń Antigravity.
Poznaj umiejętności agentów i ich zalety.
Uczenie agenta korzystania z Playwright za pomocą umiejętności.
Informacje o wbudowanym agencie przeglądarki Antigravity.
Inne przypadki użycia sterowania przeglądarką.

Co zrobisz

W tym ćwiczeniu wykorzystywane są interfejs wiersza poleceń Antigravity, narzędzia MCP, umiejętności agentów i aplikacja demonstracyjna React.

W ramach ćwiczenia:

Skonfiguruj środowisko programistyczne.
Zapoznaj się z aplikacją demonstracyjną, która wymaga przetestowania.
Użyj interfejsu wiersza poleceń Antigravity, aby wchodzić w interakcje z aplikacją za pomocą BrowserMCP.
Naucz agenta, jak korzystać z Playwright, za pomocą umiejętności agenta.

2. Ekosystem Antigravity

W maju 2026 r. Google wycofało nową serię Antigravity. Była to gruntowna przebudowa Antigravity i podział na te 4 usługi:

Antigravity 2.0, które jest teraz dedykowanym środowiskiem „budowania” na komputerze, w którym najważniejszy jest agent. Co ważne, nie zawiera ono IDE. Zamiast tego wchodzimy w interakcję tylko z menedżerem agentów. To środowisko ma zapoczątkować erę „od pomysłu do produktu” z wykorzystaniem agentów, bez konieczności zajmowania się kodem. Wielu twórców, którzy nie mają doświadczenia w programowaniu, będzie z niego zadowolonych.
Środowisko IDE Antigravity, które zapewnia bardziej znane środowisko kodowania w stylu VS Code, obsługiwane przez platformę agentów Antigravity. Możemy tu korzystać z pomocy agenta i zawsze widzimy kod. Programiści poczują się tu jak w domu.
Pakiet Antigravity SDK, który udostępnia platformę i narzędzia Antigravity w postaci pakietu SDK agenta Python. Importując z google.antigravity, możemy programowo wykorzystywać funkcje Antigravity.
Interfejs wiersza poleceń Antigravity, który jest kolejną ewolucją niezwykle przydatnego interfejsu wiersza poleceń Gemini. To nadal środowisko, w którym interakcje z modelami Gemini odbywają się przede wszystkim za pomocą terminala. Nowy interfejs wiersza poleceń Antigravity jest jednak napisany w języku Go, co widać po jego działaniu. Jest on znacznie szybszy niż interfejs wiersza poleceń Gemini, zarówno podczas uruchamiania, jak i w trakcie ogólnego użytkowania. Korzysta z tego samego „szkieletu” agenta co Antigravity 2.0 i środowisko IDE, co pozwala na stosowanie wspólnych ustawień i konfiguracji w całym pakiecie Antigravity.

Chociaż w tym module skupiamy się na korzystaniu z interfejsu Antigravity CLI, wszystko, co w nim robimy, można też wykonać w środowisku Agy IDE lub Agy 2.0.

3. Wymagania wstępne

Zanim przejdziemy do ciekawych rzeczy, upewnijmy się, że masz wszystko, czego potrzebujesz.

Narzędzia

W tym module zakładamy, że masz już:

Przeglądarka Chrome
Node.js
Antigravity CLI
Git

Aby używać interfejsu wiersza poleceń Antigravity, musisz uwierzytelnić się w Google. Gdy po raz pierwszy uruchomisz agy, automatycznie poprosi Cię o zalogowanie się w Google w domyślnej przeglądarce. Ta opcja zapewnia duży bezpłatny limit wykorzystania Gemini i nie wymaga projektu Google Cloud. Jeśli masz klucz interfejsu Gemini API lub projekt Google Cloud, możesz też skonfigurować tę opcję.

Instrukcje zakładają, że pracujesz w środowisku Linux (lub WSL) albo macOS. Jeśli używasz systemu Windows (tak jak ja), możesz wykonać te czynności za pomocą WSL.

(Pamiętaj, że BrowserMCP nie będzie działać w Google Cloud Shell, ponieważ łączy się tylko z lokalną przeglądarką działającą na tym samym komputerze).

Konfigurowanie środowiska programistycznego

W GitHubie utworzyłem repozytorium demonstracyjne. Zawiera ono przykładową aplikację, której możemy użyć do testowania interfejsu. Skopiuj ją, uruchamiając to polecenie w lokalnym terminalu:

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

W repozytorium znajduje się plik Makefile, który ułatwia skonfigurowanie środowiska do uruchomienia aplikacji demonstracyjnej. Uruchom go, aby zainicjować środowisko:

make install

# Or if you don't have make
npm install --prefix demo-app

4. Nasza aplikacja demonstracyjna

Testowana dziś aplikacja to The Dazbo Omni-Dash – futurystyczny panel w ciemnej kolorystyce do zarządzania danymi telemetrycznymi dotyczącymi bezpieczeństwa. (Tak, był zakodowany wibracyjnie).

Dlaczego ta aplikacja?

Został on stworzony, aby zapewnić realistyczną powierzchnię testową dzięki:

Uwierzytelnianie próbne: proces logowania wymagający określonych danych logowania.
Treści dynamiczne: karty telemetryczne i logi zabezpieczeń, które symulują dane w czasie rzeczywistym.
Stany interaktywne: menu nawigacyjne i pola formularzy, które zmieniają się w zależności od działania użytkownika.
Nowoczesna technologia: aplikacja została stworzona z użyciem React i Vite, co zapewnia szybkość i krótki czas reakcji.

Uruchamianie aplikacji

Aby uruchomić aplikację, wpisz:

make dev

# Or if you don't have make
npm run dev --prefix demo-app

Serwer deweloperski powinien uruchomić się bardzo szybko, a aplikacja będzie dostępna pod adresem http://localhost:5173.

Możemy po prostu kliknąć link, aby otworzyć aplikację w przeglądarce. Po prostu pozostaw ten proces uruchomiony w terminalu. Kolejne polecenia terminala wykonamy w osobnej sesji terminala.

5. Wyzwania związane z testowaniem interfejsu

Tradycyjne testowanie interfejsu użytkownika jest trudne do przeprowadzenia i jeszcze trudniejsze do utrzymania. Typowe problemy to:

Wysoka krzywa uczenia się: wymaga od deweloperów poświęcania ogromnej ilości czasu na opanowanie złożonych języków specyficznych dla danej domeny i osobliwości związanych z określonymi platformami (takimi jak Selenium czy Playwright) tylko po to, aby zautomatyzować podstawową interakcję.
Kruche selektory i automatyzacja: tradycyjne skrypty opierają się na sztywnych strukturach DOM (np. div > div > button) lub konkretnych etykietach tekstowych. Co się stanie, jeśli zmienisz nazwę przycisku „Wyloguj się” na „Zakończ sesję”? Możesz też przenieść przycisk do zupełnie innego menu. A może chcesz zmienić strukturę kodu HTML? Tradycyjne narzędzia do testowania przestaną działać, co spowoduje konieczność ciągłej konserwacji skryptów.
Test „niestabilności”: testy, które w jednej minucie przechodzą, a w następnej nie z powodu problemów z czasem, warunków wyścigu lub wolno wczytujących się zasobów.
Równoważność środowiska: zmaganie się z trudnymi do odtworzenia stanami aplikacji i obciążeniem związanym z czyszczeniem danych testowych.

Intencja a wdrożenie

Aby rozwiązać te problemy, potrzebujemy sposobu testowania, który koncentruje się na intencji, a nie na implementacji.

Dzięki wykorzystaniu narzędzi agentowej AI możemy tworzyć powtarzalne automatyzacje, które są całkowicie odporne na drobne zmiany w interfejsie i zmiany strukturalne. Zamiast zakodowanych na stałe nazw, etykiet lub dokładnej hierarchii obiektów agent wykonuje działania na podstawie intencji użytkownika wyrażonej w języku naturalnym. Jeśli przycisk się przesunie lub jego etykieta nieznacznie się zmieni, funkcje multimodalne agenta pozwolą mu zlokalizować element i wykonać zadanie.

6. MCP na ratunek

Model Context Protocol (MCP) to otwarty standard, który umożliwia modelom i agentom AI interakcję z zewnętrznymi narzędziami, interfejsami API i danymi. Można go porównać do uniwersalnego adaptera, który umożliwia modelom i agentom znajdowanie i wykonywanie narzędzi, do których mają dostęp.

Tradycyjnie integracja dużych modeli językowych (LLM) z zewnętrznymi danymi i narzędziami wymagała od deweloperów pisania niestandardowych, zakodowanych na stałe połączeń interfejsu API dla każdego nowego źródła danych, co powodowało problem z integracją „M x N”, w którym każdy nowy model i narzędzie zwiększały obciążenie związane z konserwacją. Protokół MCP (Model Context Protocol) rozwiązuje ten problem, eliminując konieczność pisania konkretnego kodu do koordynowania tych funkcji. Zamiast jawnie kodować złożone przepływy pracy, deweloperzy mogą polegać na modelu LLM, który interpretuje żądania użytkownika w języku naturalnym i dynamicznie określa, których narzędzi użyć.

Gdy użytkownik wyda polecenie w języku naturalnym (np. „Przejdź do localhost:5173, zaloguj się jako „admin” i kliknij przycisk Prześlij”), LLM wykryje dostępne funkcje i wygeneruje uporządkowane żądanie wywołania konkretnego narzędzia. Klient MCP działa jako tłumacz, przekazując to żądanie do wyznaczonego serwera MCP, który wykonuje działanie lub pobiera dane i zwraca kontekst do modelu. Dzięki temu AI może działać autonomicznie bez konieczności zakodowania przez programistę konkretnej ścieżki wykonania.

MCP tworzy uniwersalny standard, często określany jako „USB-C dla aplikacji AI”, który zapewnia ogromną gotową do użycia możliwość ponownego wykorzystania. Deweloperzy mogą zbudować serwer MCP tylko raz, a każdy host AI zgodny z MCP może się z nim natychmiast połączyć, eliminując problem integracji M x N. Nie musisz już tworzyć niestandardowych mostów API dla każdej platformy. Zamiast tego możesz korzystać z ekosystemu gotowych serwerów MCP o otwartym kodzie źródłowym dla popularnych usług, takich jak GitHub, Slack, bazy danych itp., podłączając je bezpośrednio do przepływów pracy agenta. Ta modułowa architektura typu plug-and-play zapewnia, że jeśli później zmienisz dostawcę LLM lub uaktualnisz narzędzia, podstawowa infrastruktura integracji pozostanie całkowicie niezmieniona.

7. Automatyzacja za pomocą BrowserMCP

Co to jest BrowserMCP?

To pierwsze narzędzie, z którym będziemy dziś eksperymentować. BrowserMCP to serwer MCP, który daje agentom AI „oczy” i „ręce” potrzebne do interakcji z przeglądarką internetową. W skrócie naśladuje on interakcję człowieka z przeglądarką. Jest to oprogramowanie typu open source, a repozytorium GitHub możesz sprawdzić tutaj. Główną dokumentację BrowserMCP znajdziesz tutaj.

Oto niektóre z jej możliwości:

Może otwierać adresy URL.
Może sprawdzać DOM.
Może klikać przyciski i wpisywać tekst w formularzach.
Możesz przeciągać i upuścić.
Może odczytywać dzienniki konsoli przeglądarki.
Jest szybka: automatyzacja odbywa się lokalnie na Twoim komputerze.

Instalowanie Browser MCP

Aby używać BrowserMCP, musisz wykonać 2 czynności:

Zainstaluj rozszerzenie BrowserMCP w Chrome (lub w dowolnej przeglądarce opartej na Chromium).
Skonfiguruj ręcznie serwer MCP w konfiguracji Antigravity.

Aby zainstalować rozszerzenie, postępuj zgodnie z instrukcjami tutaj. Zajmie to tylko kilka sekund. Po zainstalowaniu kliknij „Połącz” w rozszerzeniu, aby umożliwić agentowi sterowanie bieżącą kartą. (Oczywiście bieżąca karta powinna być tą, na której działa aplikacja demonstracyjna).

Następnie skonfigurujemy rzeczywisty serwer MCP w Antigravity. W tym celu dodajemy definicję serwera browsermcp do naszego globalnego pliku mcp_config.json.

Utwórz lub zmodyfikuj plik ~/.gemini/config/mcp_config.json i dodaj do niego tę konfigurację:

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

Szczegółowe instrukcje konfigurowania serwerów MCP i umiejętności w ekosystemie Antigravity znajdziesz w tych materiałach:

Testowanie za pomocą BrowserMCP

Teraz przejdźmy do najważniejszej części. Najpierw uruchom interfejs Antigravity CLI (wpisując agy) w nowej sesji terminala. (Pamiętaj, że aplikacja demonstracyjna jest uruchomiona w pierwszej sesji terminala). W interaktywnym interfejsie TUI wpisz /mcp, aby sprawdzić listę aktywnych narzędzi i upewnić się, że browsermcp jest dostępne.

Jeśli nie została jeszcze uruchomiona, uruchom teraz aplikację demonstracyjną:

make dev

Jeśli jeszcze tego nie zrobisz, musisz otworzyć aplikację w przeglądarce Chrome i połączyć rozszerzenie BrowserMCP na tej karcie. Kliknij link z polecenia run. Następnie kliknij ikonę rozszerzenia BrowserMCP i wybierz „Połącz”.

Teraz możemy użyć interfejsu wiersza poleceń Agy do uruchomienia testu. Skopiuj i wklej ten prompt do interfejsu wiersza poleceń:

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

Interfejs CLI może najpierw sprawdzić, czy aplikacja demonstracyjna działa na określonym porcie. Następnie poprosi Cię o potwierdzenie działań, które planuje wykonać.

Zezwól interfejsowi wiersza poleceń na uruchomienie wszystkich narzędzi BrowserMCP w tej sesji. Następnie wróć do przeglądarki i obserwuj automatyczne interakcje.

Kilka uwag na temat powyższego prompta:

Najpierw informujemy agenta, aby się wylogował, jeśli aplikacja jest już zalogowana. Pamiętaj, że nie musimy mówić agentowi, aby kliknął konkretny tekst, np. „Wyjdź z bramy”. Jest na tyle inteligentny, że wie, co kliknąć.
Po zalogowaniu się i wyrenderowaniu strony głównej agent zbiera informacje telemetryczne. Nie musimy ponownie mówić agentowi, aby szukał w określonych sekcjach lub dopasowywał określone słowa. Jeśli później rozszerzymy lub zmienimy informacje wyświetlane na tej stronie, ten prompt nadal będzie działać, a dane wyjściowe nadal będą rejestrowane w naszej tabeli w formacie Markdown.

Fajnie, prawda?

Na razie kończymy pracę z BrowserMCP, więc odłącz go w przeglądarce.

8. Automatyzacja za pomocą umiejętności i Playwright

Ograniczenia BrowserMCP

BrowserMCP to świetne rozwiązanie, ale ma kilka ograniczeń. Na przykład:

Wymaga to istniejącej sesji przeglądarki z połączonym rozszerzeniem BrowserMCP. (Nie powoduje to rozpoczęcia nowych sesji).
Nie obsługuje przeglądarek innych niż Chromium.
Wymaga uruchomienia osobnego procesu przeglądarki na tym samym komputerze, na którym działa serwer MCP.
Nie może on współpracować z lokalnym systemem plików. Nie może na przykład tworzyć lokalnych plików z dowodami w postaci zrzutów ekranu ani pobierać i przechowywać plików z aplikacji internetowej, takich jak pliki PDF do pobrania.
Nie jest deterministyczny. Będzie próbować wykonywać działania, o które go poprosisz, ale stan lokalny, np. nieoczekiwane wyskakujące okienko, może przerwać interakcję.
Nie obsługuje działania „bez interfejsu graficznego”, co oznacza, że nie może działać w potoku CI/CD bez prawdziwego okna przeglądarki.

Playwright

Playwright to znacznie bardziej zaawansowane narzędzie. Jest to sprawdzona platforma open source do automatyzacji i testowania przeglądarek. Może robić wiele rzeczy, których nie potrafi BrowserMCP, w tym wszystkie wymienione powyżej.

Znacznie lepiej nadaje się do przeprowadzania złożonych, niezawodnych i powtarzalnych scenariuszy testowych. Szczególnie dobrze sprawdza się w przypadku długotrwałych sesji lub równoległego prowadzenia wielu niezależnych sesji.

Jednak ta dodatkowa funkcja wiąże się z dużo bardziej stromą krzywą uczenia się.

Umiejętności

Na szczęście nie musimy uczyć się bezpośrednio korzystania z Playwrighta. Zamiast tego możemy użyć umiejętności agenta.

Czym dokładnie jest umiejętność agenta? Można to sobie wyobrazić jako ściśle powiązany pakiet wiedzy specjalistycznej, który możesz przekazać agentowi AI, gdy musi on wykonać określone zadanie. Zawiera instrukcje, sprawdzone metody, a czasami nawet skrypty pomocnicze dostosowane do konkretnego zadania.

Najciekawsza jest stopniowe ujawnianie informacji. Zamiast umieszczać w początkowym promcie systemowym LLM wszystkie możliwe dokumenty API i reguły platformy testowej – co zużywa okno kontekstowe i szybko wyczerpuje tokeny – agent odczytuje umiejętność tylko wtedy, gdy jest mu potrzebna. Dzięki temu kontekst podstawowy jest zwięzły i konkretny, a szczegółowe instrukcje są pobierane w odpowiednim momencie. Tak, umiejętność może zawierać instrukcje dotyczące korzystania z określonych serwerów MCP w celu wykonania zadania.

Wyobraź sobie scenę z filmu „Matrix”: agent patrzy na problem, zdaje sobie sprawę, że musi znać Playwright, pobiera umiejętność i nagle mówi: „Znam kung-fu”. Na wysięgniku Natychmiastowy ekspert.

Jeśli chcesz dowiedzieć się więcej o umiejętnościach, zapoznaj się z tymi materiałami:

Dlaczego umiejętności są idealne dla Playwright

Użycie umiejętności w tym miejscu to świetny wybór. Playwright jest niezwykle potężny, ale jego składnia może być skomplikowana. Dzięki udostępnieniu agentowi umiejętności Playwright nie musimy się martwić, że LLM będzie halucynować przestarzałą składnię lub pisać niestabilne selektory. Dajemy mu wyselekcjonowany, autorytatywny podręcznik dotyczący prawidłowego korzystania z Playwright.

Skorzystam z interfejsu wiersza poleceń Playwright i powiązanych z nim umiejętności.

W tym podejściu instalujemy lokalnie interfejs wiersza poleceń Playwright, a następnie przekazujemy agentowi wiedzę potrzebną do korzystania z niego. Aby uniknąć nieporozumień: nie instaluję żadnego serwera MCP Playwright.

Instalowanie

Najpierw zainstalujmy interfejs wiersza poleceń Microsoft Playwright o otwartym kodzie źródłowym. Jeśli nie zostało to jeszcze zrobione, zamknij interaktywny interfejs CLI, wpisując /quit``. Następnie w terminalu:

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

Teraz dodajmy umiejętność. To polecenie pobierze podfolder umiejętności bezpośrednio z GitHuba do folderu umiejętności Gemini:

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

Teraz możemy go przetestować.

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

Powinno to spowodować uruchomienie sesji przeglądarki otwartej pod określonym adresem URL.

Chcę też, aby Gemini mógł używać Playwright w trybie „z interfejsem”, czyli z widocznym interfejsem. Ale ta umiejętność nie mówi Gemini, jak to zrobić. W sekcji Core dodałem te wiersze do pliku ~/.gemini/skills/playwright-cli/SKILL.md:

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

Testowanie za pomocą Playwright

Podobnie jak wcześniej musimy uruchomić aplikację (jeśli jeszcze nie działa). Zrób to w pierwszej sesji terminala:

make dev

Następnie w drugiej sesji terminala tymczasowo wyłączmy BrowserMCP, aby agent nie miał problemu z wyborem narzędzi. Uruchom ponownie interfejs wiersza poleceń Antigravity (agy). Możemy tymczasowo wyłączyć serwer browsermcp bezpośrednio w tekstowym interfejsie użytkownika:

Wpisz /mcp w polu prompta, aby otworzyć panel zarządzania MCP.
Za pomocą strzałek (w górę i w dół) wybierz browsermcp i naciśnij Enter lub Return.
Przesuń w prawo, aby wybrać opcję Wyłącz, a następnie naciśnij Enter, aby ją wyłączyć.

Teraz poprosimy agenta o przejście do naszej aplikacji za pomocą Playwright. W przeciwieństwie do BrowserMCP nie musimy jednak najpierw uruchamiać przeglądarki. Playwright zrobi to za nas w ramach lokalnego procesu.

Wpisz ten prompt w interfejsie wiersza poleceń Agy:

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(Jak zawsze, interfejs wiersza poleceń poprosi o pozwolenie przed uruchomieniem jakichkolwiek narzędzi).

Co się zmieniło?

Nie musieliśmy najpierw uruchamiać przeglądarki.
Nie musieliśmy uruchamiać rozszerzenia przeglądarki ani się z nim łączyć.
Nie musimy najpierw prosić agenta o wylogowanie. Test jest przeprowadzany w ramach „czystej” sesji.
Możemy robić zrzuty ekranu i zapisywać je jako pliki lokalne.

Wkrótce potem w folderze wyjściowym powinien pojawić się plik dashboard.png.

Zwróć uwagę, że wywołania narzędzi będą wykonywane w interfejsie wiersza poleceń Agy, ale nie zobaczysz interfejsu przeglądarki. Dzieje się tak, ponieważ Playwright domyślnie działa w „trybie bez interfejsu graficznego”.

Jeśli jednak ponownie uruchomisz go z tym zmienionym promptem, zobaczysz też interfejs:

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown and record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

Dane wyjściowe interfejsu Agy CLI powinny wyglądać mniej więcej tak:

Jakie to było niesamowite?

9. Wbudowany agent przeglądarki Antigravity

Google Antigravity ma własnego wbudowanego agenta przeglądarki ( Browser Subagent), który zapewnia automatyzację przeglądarki od razu po wyjęciu z pudełka, bez konieczności instalowania osobnego narzędzia, takiego jak interfejs wiersza poleceń Playwright.

Jak to działa

Aby sterować przeglądarką, wbudowany agent przeglądarki działa bezpośrednio za pomocą protokołu Narzędzi deweloperskich w Chrome (CDP), co eliminuje potrzebę używania rozszerzeń przeglądarki lub wtyczek pośrednich w Antigravity 2.0 i IDE.

Po uruchomieniu Antigravity łączy się z instancją Chrome przez lokalny port debugowania za pomocą połączenia WebSocket. Ogólne instrukcje od agenta są tłumaczone bezpośrednio na polecenia CDP niskiego poziomu, które:

manipulować modelem DOM strony (np. klikać elementy lub wpisywać tekst);
Kontrolowanie stanu przeglądarki i wywoływanie nawigacji.
przechwytywać klatki i dane wizualne w czasie rzeczywistym;

Dzięki połączeniu bezpośredniej kontroli nad platformą CDP z wizualną analizą multimodalną subagent przyjmuje Twój cel ogólny (np. „sprawdź, czy panel wyświetla prawidłowe wartości telemetryczne”), analizuje wizualnie stronę, aby określić wymagane działania, i samodzielnie je wykonuje. Automatycznie nagrywa też filmy i robi zrzuty ekranu swoich działań, zapisując je bezpośrednio w Twojej przestrzeni roboczej jako artefakty, które służą jako wizualny dowód wykonania testu.

Dostępność narzędzia

Wbudowany agent przeglądarki nie jest jeszcze obsługiwany w interfejsie wiersza poleceń Antigravity (Agy CLI), który jest oparty na terminalu. Możesz jednak od razu używać go w Antigravity IDE i Antigravity 2.0. Mamy nadzieję, że w przyszłej wersji Agy CLI będzie obsługiwać agenta przeglądarki.

Uwaga dla użytkowników WSL: uruchomienie agenta przeglądarki w Antigravity w środowisku WSL jest teraz znacznie łatwiejsze niż wcześniej. Zamiast zajmować się złożonym routingiem sieciowym i przekierowywaniem portów, wystarczy włączyć w konfiguracji WSL „dublowany” tryb sieciowy. Szczegółowe instrukcje znajdziesz w przewodniku Rozwiązywanie problemów z WSL za pomocą Google Antigravity: Agy 2.0 i Agy IDE Edition.

10. Inne zastosowania automatyzacji przeglądarki

Automatyzacja przeglądarki nie polega tylko na sprawdzaniu, czy przycisk logowania działa przed wdrożeniem w piątkowe popołudnie. Gdy zdasz sobie sprawę, że możesz połączyć LLM bezpośrednio z przeglądarką, otworzy się przed Tobą zupełnie nowy świat projektów opartych na agentach.

Jeśli tworzysz własnych agentów AI, oto kilka sposobów, w jakie możesz wykorzystać narzędzia takie jak BrowserMCP czy interfejs wiersza poleceń Playwright, aby wykonać za Ciebie najtrudniejsze zadania:

Osobisty asystent badawczy: wyobraź sobie, że wskazujesz agentowi konkretny adres URL i prosisz go o zbadanie tematu, ale witryna wymaga zalogowania się i przejścia przez złożone menu. Zamiast pisać niestandardowy skrypt do pobierania danych z internetu, który w przyszłym tygodniu może przestać działać, możesz po prostu poprosić agenta o zalogowanie się, przejście do danych i ich podsumowanie.
Integrator „Swivel-Chair”: wszyscy mamy starsze systemy intranetowe, które nie mają interfejsów API. Chodzi o sytuacje, w których musisz ręcznie skopiować dane z systemu A i wkleić je do formularza w systemie B. Agent z automatyzacją przeglądarki może działać jako uniwersalny łącznik, odczytując ekran starszego systemu i wypełniając formularz w nowym.
Automatyczne triage i usuwanie problemów: czy o 3 w nocy system monitorowania wysłał Ci alert P1? Twój agent może automatycznie otworzyć adres URL konkretnego panelu, odczytać wykresy lub dzienniki (korzystając z funkcji widzenia multimodalnego) i opublikować podsumowanie bezpośrednio na kanale Slack, oszczędzając Ci cenne minuty podczas incydentu.

Zaletą tego podejścia jest to, że nie musisz już ograniczać się do dostępnych interfejsów API. Jeśli człowiek może to zrobić w przeglądarce, Twój agent też może.

11. Podsumowanie

Gratulacje! Właśnie udało Ci się utworzyć i przeprowadzić automatyczne, niezawodne testy interfejsu, po prostu mówiąc agentowi AI, co ma zrobić, w zwykłym języku. Bez niestabilnych selektorów CSS i złożonych skryptów konfiguracji.

Wiesz już:

Testowanie interfejsu nie musi być uciążliwe: skupiając się na celu testu, a nie na niestabilnej implementacji DOM, możemy znacznie zmniejszyć nakłady na konserwację.
Model Context Protocol (MCP) zapewnia agentom uniwersalny dostęp do narzędzi, danych i środowisk w trybie plug-and-play.
BrowserMCP to niesamowite narzędzie, które umożliwia korzystanie z funkcji agenta w lokalnych, istniejących sesjach Chrome.
Umiejętności i interfejs wiersza poleceń Playwright umożliwiają nowy poziom powtarzalnego i deterministycznego testowania automatyzacji – wszystko to dzięki stopniowemu ujawnianiu informacji.
Antigravity's Browser Subagent idzie o krok dalej, wprowadzając autonomiczne, multimodalne nawigowanie i rejestrowanie artefaktów od razu po wyjęciu z pudełka.

A teraz idź i zautomatyzuj nudne czynności!

12. Przydatne linki

Jeśli chcesz dowiedzieć się więcej o narzędziach i koncepcjach, które omówiliśmy dzisiaj, zapoznaj się z tymi materiałami:

Kod repozytorium

Repozytorium GitHub agentic-ui-testing – jeśli to ćwiczenie było dla Ciebie przydatne, oznacz repozytorium gwiazdką.

Podstawowe narzędzia i metodologie

Koncepcje i umiejętności agentowe

Inne