Automatyzuj audyty jakości witryny z Playwright Skill

Wypuszczaj z pewnością, automatyzując audyty UI

Ręczne testowanie to powolny, podatny na błędy trud, który zabija tempo. Za każdym razem, gdy wprowadzam zmianę, martwiłem się o uszkodzone linki albo błędy w konsoli ukryte na pierwszy rzut oka na środowisku produkcyjnym. To godziny ręcznego klikania każdego tygodnia tylko po to, by utrzymać podstawowy poziom jakości.

Zacząłem używać umiejętności webapp-testing, aby oddelegować tę pracę do Eigent. Łącząc automatyzację Playwrighta z agentowym workflow Eigent, mogę teraz uruchomić pełny audyt witryny — w tym migawki wizualne i sprawdzanie logów — za pomocą jednego promptu.

Oto jak skonfigurowałem workflow do testowania strony Eigent.ai.

1Przygotuj skrypt testowy

Zaczynam od zdefiniowania logiki testów w skrypcie Python. Korzystając z asynchronicznego API Playwrighta, mogę śledzić komunikaty konsoli i błędy sieciowe podczas nawigacji. Ten skrypt działa jak mózg całej operacji, wskazując Eigent dokładnie, czego szukać — od konkretnych linków nawigacyjnych po zrzuty ekranu całej strony.

2Skonfiguruj nasłuchiwacze błędów

Jedną z najbardziej wartościowych części tego workflow jest wykrywanie cichych awarii. Skonfigurowałem skrypt tak, aby nasłuchiwał błędów konsoli przeglądarki i nieudanych żądań sieciowych. Dzięki temu Eigent może logować problemy techniczne, takie jak brakujący token PostHog, który znalazłem — błąd konfiguracji, który łatwo przeoczyć podczas ręcznego sprawdzania.

3Nawiguj po witrynie autonomicznie

Eigent przejmuje prowadzenie nawigacji. Zaczyna od strony głównej i identyfikuje główne linki nawigacyjne, takie jak Environments i Enterprise. Klikając kolejne sekcje i czekając, aż sieć będzie bezczynna, upewnia się, że każda zmiana strony przebiega płynnie, a treści ładują się zgodnie z oczekiwaniami.

4Zbieraj migawki wizualne

Zrzuty ekranu to najlepszy sposób na weryfikację spójności UI między stronami. Podczas testu Eigent automatycznie wykonuje pełnostronicowe migawki strony głównej i sekcji wewnętrznych. Zebrałem kilka widoków, w tym:

• Strona główna: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/homepage.png
• Strona Environments: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/environments_page.png
• Strona Enterprise: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/enterprise_page.png

5Wygeneruj automatyczny raport

Gdy nawigacja zostanie zakończona, Eigent kompiluje wszystko w raport Markdown. Zawiera on podsumowanie wyników, listę błędów konsoli oraz bezwzględne ścieżki do wszystkich wykonanych zrzutów ekranu. Trzymanie wszystkich tych danych w jednym miejscu sprawia, że proces przeglądu jest natychmiastowy.

6Przeanalizuj wyniki

Przeglądam wynik, aby zidentyfikować wszelkie krytyczne blokery. W tym uruchomieniu audyt wykrył błąd inicjalizacji PostHog i oznaczył przerwany zasób wideo pod task_splitting.mp4. To nie są tylko błędy — to szanse na poprawę doświadczenia użytkownika, zanim zobaczy je klient.

Skalowanie jakości bez zwiększania nakładu pracy

To nie chodzi tylko o wyłapywanie kilku błędów w konsoli. Ten workflow pokazuje, jak Eigent przekształca techniczne narzędzie, takie jak Playwright, w autonomicznego partnera ds. jakości. Zamiast pisać i utrzymywać złożone zestawy testów dla każdej drobnej zmiany UI, mogę po prostu wskazać Eigent adres URL i otrzymać pełny raport.

Automatyzowanie „nudnych” części QA pozwala programistom skupić się na tworzeniu funkcji, jednocześnie zapewniając, że istniejąca witryna pozostaje niezawodna.

Co wypróbować dalej

Każde z tych zadań wykorzystuje tę samą umiejętność webapp-testing — bez potrzeby dodatkowej konfiguracji.

Wskazówki для lepszych wyników

• Używaj stanów oczekiwania networkidle. Dzięki temu zasoby asynchroniczne i skrypty śledzące zakończą ładowanie, zanim Eigent wykona zrzut ekranu lub sprawdzi błędy.
• Odfiltrowuj przerwane żądania. Wiele przeglądarek przerywa żądania podczas szybkiej nawigacji lub lazy loadingu. Filtrowanie ich pomaga skupić się na prawdziwych błędach 404 i błędach serwera.
• Bądź precyzyjny w kwestii ról. Instruując Eigent, aby klikał przyciski, używaj selektorów opartych na rolach, takich jak link lub button, aby testy były bardziej odporne na zmiany CSS.