👨💻 Kod / Programowanie
Debuguj testy z podglądem live w Trace Viewer (UI mode)
Trace Viewer to genialne narzędzie Playwright do analizy wykonania testu.
Od wersji 1.35 możemy uruchomić testy z VSCode wraz z raportem Trace Viewer dzięki tej 🔗wtyczce
Nie działa jednak debugowanie testów połączone z podglądem na żywo w Trace Viewer
Zgłosiłem na to zapotrzebowanie w oficjalnym repozytorium Playwright: 🔗https://github.com/microsoft/playwright/issues/23870
Istniej jednak pewien sprytny sposób aby uzyskać podobny efekt:
- Upewnij się, że posiadasz najnowszą wersję Playwright (o aktualizacjach piszemy tutaj 🔗https://playwright.info/instalacja-aktualizacja-playwright) oraz wtyczkę Playwright Test for VSCode
- W VSC, w widoku terminala uruchom JavaScript Debug Terminal (klikając znak +)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff01993e8-c35a-450c-bbcc-ac6f4baf5ec4%2FUntitled.png?table=block&id=6af4ad3a-8e76-4ce4-ad49-9008037bc2b5&cache=v2)
- W terminalu JavaScript Debug wykonaj polecenie uruchamiające UI Mode
npx playwright test --ui
- W VSC zlokalizuj test który chcesz debugować i dodaj w nim breakpoint
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8b7d70f3-9631-4714-aa36-201026ca8c27%2FUntitled.png?table=block&id=f3fe62fd-3a4f-4096-8ca0-d66e26062389&cache=v2)
- Uruchom test z poziomu UI mode
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb0fd8988-01a0-425f-8e7e-b8114c067603%2FUntitled.png?table=block&id=bf88caeb-f01a-4591-b3b5-06a087cb90b4&cache=v2)
😲 Efekt: nasz debuger zatrzyma się w kodzie na pożądanej pozycji, zatrzymując także wykonanie testu w UI mode:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F65a2fb57-ea70-4e0b-994a-c723eb807b9d%2FUntitled.png?table=block&id=2bf15bff-2f63-4ccb-9323-b64c03a28451&cache=v2)
Oczywiście standardowe akcje jak przejście do kolejnej linii i wywołanie kolejnych akcji są w pełni synchronizowane między UI Mode a VSC w trybie debug.
Tym sposobem możemy debugować test i mieć wgląd we wszystkie informacje z Trace Viewer😍