Powrót do: Praktyczne wprowadzenie do testów automatycznych z Playwright

Analiza testów z Trace Viewer

TIP: Ta lekcja jest częścią rozwijanego Programu Testy Automatyczne z Playwright 🎭

Prezentacja

Analiza testów z Trace Viewer

Dodatkowe materiały

TIP: W tej lekcji wspominamy o API – jeśli interesuje Ciebie poznanie tego tematu zajrzyj na Podstawy Testowania REST API – Od teorii, przez testy manualne, po automatyzację w JavaScript!
TIP: Od tej lekcji używamy Prettier do formatowania kodu.

Sugerujemy 2 opcje:

  1. Kontynuuj jeśli: wiesz czym jest Prettier i jak go używać.
  2. 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.

Playwright Trace Viewer i opis jego opcji

W widoku Trace Viewer zwróć uwagę na:

  1. Timeline, czyli pasek postępu akcji u góry.
  2. Poszczególne Akcje i szczegółowe kroki ich wykonania.
  3. Stan strony podczas testu, przed i po teście.
  4. 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:

18 komentarzy

  1. Cześć, mój plik playwright.config.ts wygląda nieco inaczej niż ten na nagraniu, jest w nim zdecydowanie mniej informacji. Chyba przeoczyłem moment jego update’u. Czy to będzie problem jeśli go sobie jakoś manualnie uzupełnię i zrobię commita?

    Avatar Paweł Solarz
    Odpowiedz

  2. Hej.
    Po wywołaniu błedu w teście i odpaleniu trace viewera, okienko które wyświetla widok `Action`, `Before` i `After` zawiera biały widok(tylko url się zmienia) zamiast wyświetlania strony pomimo że przełączam się pomiędzy akcjami łapania selektorów po lewej stronie okna. Czym to może być spowodowane?

    Avatar Paweł Maryniak
    Odpowiedz

    1. Hej Paweł!
      Bardzo prawdopodobne, że Playwright wychwytuje zbyt szybko akcje i UI nie zdąży się wyrenderować, a Playwright zakończył test,

      Ja czasem dodaję kod, który powoduje, że PW musi coś zrobić na stronie aby upewnić się czy się w pełni załadowała. Może to być weryfikacja jakiegoś elementu i potem dopiero weryfikuję problematyczny kod.

      Daj znać czy to podejście wywołało pełny rendering strony i jest ona widoczna w Trace Viewer.

      Pozdrawiam!

      Przemek Przemek
      Odpowiedz

      1. Niestety Przemku to nie pomogło. Próbowałem jakieś statyczne waity typu await page.waitForTimeout(3000) oraz przypadek gdzie oczekiwałem aż dany element będzie miał określony tekst i to również nie pomogło. Mam cały czas biały screen w Trace Viewerze w miejscu gdzie powinniśmy widzieć testowaną stronę.

        Avatar Paweł Maryniak
        Odpowiedz

        1. Wygląda na to, że załapałeś się na buga w Playwright. Uaktualnij Playwright do najnowszej wersji:

           npm i @playwright/test@latest

          I zainstaluj nowe przeglądarki:

          npx playwright install

          U mnie to pomogło.
          Daj znać czy u Ciebie też.
          Jakby dalej były problemy, podeślij nam na kontakt jaktestowac kod projektu (spakowany bez folderów node_modules, playwrigh-report, test-results)

          Czekam z niecierpliwością!

          Przemek Przemek
          Odpowiedz

            1. Nie poddawajmy się!

              Podeślij spakowany projekt w zip na kontakt (małpa) jaktestowac.pl ( bez folderów node_modules, playwrigh-report, test-results)

              I zrobimy analizę!

              Pozdrawiam i czekam na kodzik 😀

              Przemek Przemek
              Odpowiedz

              1. Hej, miałem podobny case jak Paweł ale wystarczyło otworzyć trace’a w przeglądarce innej niż chrome (chroma używam na co dzień, mam różne wtyczki zainstalowane i może one zblokowały poprawne renderowanie widoku).

                Avatar Tomasz Pondo
                Odpowiedz

                1. Hej Tomasz!
                  Dzięki za wartościową uwagę – ja stosuję Chrome tylko do testów dlatego jest on w nienaruszonej wtyczkami i ustawieniami formie.
                  Będzie to dobra wskazówka dla innych kursantów.

                  Pozdro!

                  Przemek Przemek
                  Odpowiedz

  3. 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.

    Avatar Mateusz
    Odpowiedz

    1. 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 🙂

      Krzysiek Kijas Krzysiek Kijas
      Odpowiedz

  4. 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 🙂 ?

    Avatar Łukasz Glegoła
    Odpowiedz

    1. 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

      Przemek Przemek
      Odpowiedz

  5. 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 🙂

    Avatar Karolina Zakrzewska
    Odpowiedz

    1. 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.

      Przemek Barański Przemek Barański
      Odpowiedz

  6. 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ść?

    Avatar Paweł
    Odpowiedz

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *