Powrót do: AI_Testers vol. 1 – Bonusy (aktywnie rozwijane)

Jak działa Playwright UI? Uruchamianie i analiza testów

Co zrobimy w tej lekcji?

W tej lekcji skupimy się na podstawach Playwright UI, czyli trybu, który pozwala uruchamiać i analizować testy w wygodnym interfejsie graficznym.

W poprzedniej lekcji uruchamialiśmy testy z terminala oraz w trybie headed. Teraz zobaczysz, jak zrobić to w UI mode – z listą testów, podglądem wykonania, krokami testu i powiązaniem ich z kodem.

Playwright UI jest szczególnie przydatny na początku nauki, ponieważ pozwala zobaczyć, co test robi krok po kroku, zamiast analizować tylko wynik w terminalu.

A dokładniej:

• Uruchomimy Playwright UI
• Omówimy główne elementy interfejsu
• Uruchomimy test z poziomu UI
• Przeanalizujemy wykonanie testu krok po kroku
• Sprawdzimy, jak kroki testu łączą się z kodem
• Wykorzystamy AI do zrozumienia UI mode

Przydatne linki

• Repozytorium aplikacji Rolnopol: https://github.com/jaktestowac/rolnopol
• Uruchamianie i debugowanie testów Playwright: https://playwright.dev/docs/running-tests

Krok 1: Uruchomienie Playwright UI

Ta komenda uruchamia Playwright w trybie UI:

npx playwright test --ui

W tym trybie otwiera się interfejs graficzny, w którym możesz:

• zobaczyć listę testów,
• uruchomić wybrany test,
• sprawdzić status testu,
• przeanalizować kroki wykonania,
• podejrzeć stan strony podczas testu,
• połączyć konkretne kroki z liniami kodu.

UI mode różni się od zwykłego uruchomienia testów tym, że daje więcej informacji wizualnych. Zamiast patrzeć wyłącznie na wynik w terminalu, możesz przejść przez test krok po kroku.

Krok 2: Lista testów

Po uruchomieniu Playwright UI zobaczysz listę testów dostępnych w projekcie.

Lista pozwala:

• zobaczyć pliki testowe,
• sprawdzić nazwy testów,
• wybrać konkretny test,
• uruchomić jeden test zamiast całego zestawu.

To jest przydatne, gdy pracujesz nad jednym scenariuszem i nie chcesz za każdym razem uruchamiać wszystkich testów.

Krok 3: Uruchomienie testu z poziomu UI

Wybierz jeden test z listy i uruchom go z poziomu interfejsu.

Po uruchomieniu zwróć uwagę na:

• status testu,
• czas wykonania,
• listę kroków,
• podgląd strony,
• ewentualne błędy.

Dzięki temu możesz szybko sprawdzić, czy test przeszedł oraz co dokładnie zrobił.

Krok 4: Analiza testu krok po kroku

Playwright UI pokazuje wykonanie testu jako sekwencję kroków.

Klikając kolejne kroki, możesz sprawdzić:

• jaka akcja została wykonana,
• jaki był stan strony w danym momencie,
• która linia kodu odpowiadała za dany krok,
• czy test wykonał to, czego oczekujesz.

To bardzo pomaga w zrozumieniu testów oraz w debugowaniu problemów.

Krok 5: AI jako wsparcie

AI możesz wykorzystać do uporządkowania różnic między trybami uruchamiania testów i do zrozumienia Playwright UI.

Przykładowe prompty:

Wyjaśnij początkującemu, do czego służy Playwright UI i kiedy warto go używać.
Czym różni się uruchamianie testów w terminalu od uruchamiania ich w Playwright UI?
Wyjaśnij różnicę między trybem headless, headed i UI mode w Playwright.
Jak analizować test krok po kroku w Playwright UI?

AI może pomóc szybciej zrozumieć narzędzie, ale najlepiej korzystać z niego razem z praktyką – uruchamiając test i porównując odpowiedź AI z tym, co faktycznie widać w Playwright UI.

Zadania dla Ciebie

1. Uruchom aplikację Rolnopol lokalnie:

npm run start

1. Uruchom Playwright UI:

npx playwright test --ui

1. Wybierz jeden test z listy.
2. Uruchom test z poziomu UI.
3. Przejdź po krokach testu i sprawdź:
   – co robi każdy krok,
   – jak wygląda podgląd strony,
   – która linia kodu odpowiada za dany krok.
4. Uruchom ten sam test ponownie.
5. Zapytaj AI, czym różni się terminal, headed mode i UI mode.

Co dalej?

W kolejnej lekcji przejdziemy głębiej w narzędzia dostępne w Playwright UI.

Zobaczymy:

• jak działa lokator picker,
• jak wybierać elementy na stronie,
• czym są lokatory,
• gdzie znaleźć konsolę,
• jak podejrzeć network,
• jak używać AI do oceny lokatorów i analizy problemów.

Radosław Wasik QA Tech Lead, Content Creator profil na LinkedIn QA Tech Lead z wieloletnim doświadczeniem w testach manualnych i automatyzacji. Specjalizuje się w Playwright (JS/TS) oraz projektowaniu skalowalnych frameworków testowych, które wspierają stabilne procesy CI/CD. Na co dzień prowadzi zespoły QA - wyznacza cele, planuje działania, wspiera rozwój testerów i usprawnia strategie testowe oraz procesy releasowe we współpracy z developerami i biznesem. Przeprowadza również szkolenia dla QA, skupiając się na praktycznej automatyzacji testów, dobrych praktykach (m.in. Page Object Model), pracy z narzędziami oraz budowaniu podejścia jakościowego w zespołach produktowych. Aktywnie dzieli się wiedzą w internecie: na Instagramie @radwasik publikuje krótkie, przystępne materiały o testowaniu, automatyzacji i AI, a na blogu rwasik.pl rozwija tematy w formie artykułów, poradników i case studies z codziennej pracy.