Powrót do: Praktyczne wprowadzenie do testów automatycznych z Playwright
Analiza testów z Trace Viewer
Prezentacja
Dodatkowe materiały
Sugerujemy 2 opcje:
- Kontynuuj jeśli: wiesz czym jest Prettier i jak go używać.
- Uzupełnij wiedzę ze specjalnego bonusu: Formatowanie kodu z Prettier
Kod do tej lekcji znajduje się tu: GitHub
Pamiętaj, aby po każdej większej modyfikacji uruchamiać testy 😉
Przygotowanie testu który będzie kończył się niepowodzeniem
W pierwszym teście z pliku pulpit.spec.ts uszkadzamy oczekiwaną wartość dodając frazę BUG:
const expectedTransferReceiver = 'BUG Chuck Demobankowy';
Dodajemy również opcję only do testu aby uruchamiał się tylko on.
Po uruchomieniu test powinien zakończyć się niepowodzeniem.
Dodanie wideo do raportów
W pliku playwright.config.ts dodajemy taki wpis w bloku use: video: 'retain-on-failure'.
Tak będzie wyglądał teraz ten blok:
use: {
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
actionTimeout: 0,
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://localhost:3000',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry’,
video: 'retain-on-failure',
},
Po uruchomieniu testów powinieneś otrzymać wideo z zapisem testu!
Włączenie opcji Trace Viewer
W pliku playwright.config.ts zmieniamy w bloku use: ustawienie dla opcji trace: 'retain-on-failure'. Dzięki temu Trace Viewer będzie dostępny w raportach dla naszych testów.
Tak będzie wyglądał teraz ten blok:
use: {
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
actionTimeout: 0,
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://localhost:3000',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'retain-on-failure’,
video: 'retain-on-failure',
},
Po uruchomieniu testów powinieneś otrzymać możliwość podglądu testu w narzędziu Trace Viewer.
W widoku Trace Viewer zwróć uwagę na:
- Timeline, czyli pasek postępu akcji u góry.
- Poszczególne Akcje i szczegółowe kroki ich wykonania.
- Stan strony podczas testu, przed i po teście.
- Logi związane z wykonaniem akcji (w szczegółach danej akcji).
Trace Viewer – jak go uruchomić?
Aby uruchomić Trace Viewer i podejrzeć plik trace.zip, wystarczy użyć w konsoli polecenia:
npx playwright show-trace trace.zip
gdzie trace.zip to ścieżka do pliku .zip.
Trace Viewer ograniczenia
Napraw wartości, które uszkodziliśmy na potrzeby poprzednich testów.
Uszkadzamy lokator, np. dla selektora password-input-lol:
await page.getByTestId('password-input-lol').fill(userPassword);
W Trace Viewer możesz zauważyć, że brakuje informacji o czasie trwania testu i momentu Timeoutu.
Bugi które zidentyfikowaliśmy i zgłosiliśmy twórcom Playwright:
Cześć, mam taki problem że gdy testy nie odpalają się w przeglądarce to mimo timeouta nadal się kręcą czy to z terminala czy z testing. Zaś 2 problem jaki mam to w momencie gdy odpalam testy z przeglądarką i się wysypią to i tak w raportach nie mam trace i video, a niby mam wszystko skonfigurowane poprawnie.
Hej,
Jak wygląda Twój projekt i konfiguracja?
Z jakich wersji narzędzi korzystasz (VSCode, wtyczka Playwright, node.js, Playwright i inne paczki w package.json)?
Spakuj proszę cały swój projekt i podeślij nam na adres kontaktowy – zobaczę wtedy u siebie jak to wygląda 🙂
Nawiązując do sytuacji w lekcji opisanej w minucie 15:40 , kiedy strona się jeszcze nie do końca załadowała, a już wykonywaliśmy akcję w PW – w jaki sposób kod w PW powinieniem być w tym wypadku zrefaktorowany żeby prawidłowo obsłużyć ten flow ? Czy po prostu będzie to w kolejnych lekcjach 🙂 ?
Hej Łukasz!
Oczekiwanie na element na nowej stronie jest ok strategia i jeśli realizuje założony cel nie trzeba tego refaktorować.
Sprawdzenie załadowania się nowej strony, można również zrealizować za pomocą różnych strategi, np. za pomocą takiego czekania:
await page.waitForURL('**/target.html') await page.waitForLoadState();W kursie podstawowym opieramy się na strategii oczekiwania na dany element i to załatwia nam po części oczekiwanie na załadowanie się strony.
Pozdrawiam
też macie brak kolorów w timeline? wszystkie fragmenty są na szaro i szukałam buga w zgłoszeniach jednak nie natrafiłam
Playwright 1.36., sprawdzone na: opera, chrome w wersji ciemnej i jasne 🙂
Niestety zabrali nam kolory z TraceViewer 🙁 Na (nie)pocieszenie dodam, że w UI mode te paski są całkowicie niedostępne wiec dobrze, że tego nie zabrali z TraceViewer.
Oglądając kolejne super wideo zdziwiłem się trochę bo mam wersję 1.30 ale u mnie z jakiegoś powodu nie ma tego przycisku “Open snapshot in new tab” a bardzo by się przydał 🙂 znacie może powód? Może to jakaś nowość?
Dzięki wielkie! 😉
Ta opcja, czyli “Open snapshot in new tab” została wprowadzona w wersji 1.31 (https://playwright.dev/docs/release-notes#version-131 jako “DOM snapshots in trace viewer can be now opened in a separate window.”) 🙂
Cały czas twórcy wprowadzają nowe usprawnienia 🙂