Narzędzia deweloperskie w Chrome dla agentów umożliwiają agentowi weryfikowanie elastycznych układów, testowanie interfejsów API wykorzystujących lokalizację oraz symulowanie różnych prędkości procesora i sieci. Użyj tych narzędzi, aby skuteczniej identyfikować przypadki brzegowe i automatyzować audyty wydajności.
Te funkcje emulacji współpracują z innymi narzędziami, które umożliwiają agentowi interakcję z Twoją witryną, np. klikanie elementów, wypełnianie formularzy i nawigowanie po stronach.
Możesz emulować m.in.:
- Widoczny obszar i klient użytkownika: Emuluj określone rozmiary ekranu i identyfikatory urządzeń.
- Geolokalizacja: fałszuj współrzędne lokalizacji, aby testować interfejsy API wykorzystujące lokalizację.
- Sieć i procesor: ograniczaj warunki sieciowe i prędkość procesora, aby symulować rzeczywiste ograniczenia wydajności.
- Schemat kolorów: przełączaj się między trybem jasnym i ciemnym.
Podczas korzystania z emulacji pamiętaj o tych kwestiach:
- Obsługa urządzeń: agent może emulować dowolne urządzenie z listy Puppeteer's
KnownDevices. Obejmuje to symulowanie zdarzeń dotykowych w przypadku obszarów roboczych na urządzeniach mobilnych. - Działanie silnika przeglądarki: narzędzie emuluje cechy urządzenia, ale nie symuluje silników przeglądarek innych niż Chromium ani różnych systemów operacyjnych. Agent zawsze działa w Chrome w bieżącym systemie operacyjnym.
Przypadki użycia emulacji użytkownika
Zamiast ręcznie zmieniać rozmiar przeglądarki, fałszować adresy IP lub ograniczać sieć po każdej zmianie kodu, możesz poinstruować agenta, aby emulował środowiska i weryfikował interfejs użytkownika.
Zintegruj emulację z procesem tworzenia aplikacji za pomocą tych przepływów pracy.
Iteracyjne projektowanie elastycznych stron
Wzorce nawigacji często znacznie się różnią w zależności od tego, czy użytkownik korzysta z urządzenia mobilnego czy komputera. Podczas tworzenia aplikacji możesz poinstruować agenta, aby sprawdził, czy komponenty, które właśnie napisał, są prawidłowo renderowane i czy wyświetlają tę samą treść na różnych urządzeniach.
Przykładowe polecenie:
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
Przykładowe działanie agenta: agent otwiera okno Chrome, przechodzi na stronę, rozpoczyna emulację i porównuje elementy w obu obszarach roboczych. Potwierdza, że wersja na urządzenia mobilne (menu hamburger) i wersja na komputery (nagłówek) zawierają oczekiwane linki.
Sprawdzanie interakcji w różnych obszarach roboczych
Układy są uszkadzane podczas interakcji, a nie tylko w CSS. Statyczne zrzuty ekranu często nie uwzględniają błędów, które występują, gdy użytkownicy dotykają interfejsu. Możesz zlecić agentowi testowanie określonych przepływów interakcji w wielu obszarach roboczych, aby wykryć ukryte błędy funkcjonalne.
Przykładowe polecenie:
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
Przykładowe wykonanie agenta: agent wpisuje zapytanie i zmienia rozmiar ekranu na każdy z 3 rozmiarów. W tym przykładzie agent wykrywa, że na tablecie i urządzeniu mobilnym pasek wyszukiwania rozszerza się na całą szerokość nagłówka, zasłaniając link Zaloguj się.
Prototypowanie funkcji wykorzystujących lokalizację
Testowanie interfejsów API, które korzystają z fizycznej lokalizacji użytkownika (np. wyszukiwania „W pobliżu” lub wyszukiwania sklepów), zwykle wymaga ręcznego zastępowania czujników. Teraz możesz poinstruować agenta, aby fałszował określone geolokalizacje, aby bezproblemowo weryfikować logikę frontendu i backendu.
Przykładowe polecenie:
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
Przykładowe wykonanie agenta: agent przechodzi do witryny, wyszukuje Berlin, a następnie dynamicznie wstrzykuje określone współrzędne szerokości i długości geograficznej, aby emulować Paryż. Następnie wchodzi w interakcję z funkcją Użyj mojej lokalizacji , aby upewnić się, że wyświetlają się prawidłowe sklepy.