Zalety Playwright Test

Language

date

Mar 6, 2024

slug

zalety-playwright

author

status

Public

tags

Playwright

Porady

Blog

summary

Poznaj najważniejsze zalety Playwright Test i przedyskutuj je w swoim zespole

type

Post

thumbnail

updatedAt

Mar 8, 2024 07:49 AM

category

👨‍🏫 Porady

Filozofia Playwright Test

W odpowiedzi na prośby czytelników dodaliśmy ikonkę ⭐ przy funkcjach Playwright, które nie występują w głównej bibliotece Cypress (darmowej wersji). Warto jednak zauważyć, że wiele z tych funkcji można uzyskać w Cypress przy pomocy zewnętrznych pluginów (utrzymywanych przez niezależnych dostawców). Za pomocą ⭐ podkreślamy elementy wbudowane w pobieraną bibliotekę do natychmiastowego użycia.

Najważniejsze funkcje z Playwright Test

⭐ Zrównoleglenie na wielu poziomach

1. Lokalnie ustawienie workers dzielą nasze testy na wiele wątków (ich liczba zależy od liczby logicznych wątków posiadanego procesora)

2. Na serwerze Ciągłej integracji ustawienie shards rozprasza testy pomiędzy maszyny

3. Ustawienie fullyParallel pozwala określić czy nasze testy mają zostać podzielone w zakresie plików czy też jako poszczególne testy (wtedy na różne workery trafią testy z tego samego pliku)

4. Kontrola zrównoleglenia poprzez Projects lub Serial Mode - możemy dla danych testów zastrzec, aby nie były zrównoleglane

5. Testy są równolegle wykonywane zarówno dla testów jak i różnych przeglądarek (a właściwie emulacji)

Automatyczne czekanie i Timeouts

1. Dostępne w asercjach, dzięki czemu działa mechanizm sprawdzania poprawności asercji

2. Dostępne w lokatorach, Playwright ponawia automatycznie próbę pobrania elementu gdy chcemy wykonać akcję

3. Możemy sterować czasem wykonania ponowienia sprawdzenia asercji poprzez expect.poll

4. Można ponawiać testy także za pomocą opcji retries

5. Timeouts dla testów, akcji lub asercji możemy ustawić globalnie lub niezależnie dla grupy lub indywidualnego testu (a nawet pojedynczej akcji lub asercji)

Raporty

1. Wystarczy proste ustawienie w konfiguracji aby tworzyć raporty HTML

2. Dostępne są różne rodzaje raportów JSON, minimalistyczny Dot, czy List wygodny dla Ciągłej Integracji

3. Raporty HTML bez problemu są scalane - zarówno lokalnie z wielu Workers jak i na CI z wielu Shards (tu potrzeba odrobinę kodu)

4. ⭐ Raporty mogą zwierać grupy testów, tagi, rodzaje wyniku testów (pass, failed, flaky, skipped), wideo, screenshoty, kod testu oraz Traces

Debugowanie

1. Za pomocą tradycyjnych screenshots, wideo i obserwacji przeglądarki uruchamianej w czasie testów

2. Za pomocą Trace Viewer narzędzia interaktywnego do śledzenia historii wykonania testu, ze screenshotami przed, w czasie i po akcji, pełnym ruchem sieciowym, kodem testu, artefaktami (screenshots) oraz wszystkimi akcjami narzędzia Playwright wraz z informacjami związanymi z konfiguracją - 🔗https://playwright.dev/docs/trace-viewer

3. ⭐ Z UI Mode - narzędzie do uruchamiania, grupowania i śledzenia testów z osadzonym Trace Viewer - 🔗https://playwright.dev/docs/test-ui-mode

4. ⭐ Z pomocą wtyczki Playwright VSCode Extension - do uruchamiania w trybie debug i szybkiego włączania opcji (browser, headless, Traces) - 🔗https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright

Konfiguracja

1. Jedno miejsce do ustawienia najważniejszych funkcji projektu z Playwright

2. Możliwość, tworzenia, rozszerzania i nadpisywania wielu konfiguracji

3. Ustawienie timeouts, lokalizacji testów, adresu strony, własności przeglądarki, zależności pomiędzy grupami testów, globalnych ustawień przed i po testach, raportów, uruchomienia testowanej aplikacji etc

4. Jeden standard, który może być w pełni rozumiany przez zespół i przenoszony do kolejnych projektów testowych

⭐ Projects

1. W konfiguracji możemy definiować dowolną liczbę Projects

2. Mogą one wskazywać własności poszczególnych przeglądarek (emulacja) ich ustawienia, wyświetlany obszar, geolokalizacja, sieć czy też indywidualne ustawienia

3. Projects mogą zależeć od siebie a ich artefakty mogą być przekazywane, na przykład sesja wytworzona w jednym Project może być użyta w innych

4. Mogą posiadać indywidualne ustawienia dotyczące Timeouts czy Retries

Hooks i Fixtures

1. Możemy tworzyć kod niezbędny dla testów na bardzo różnych poziomach: przed każdym testem, raz przed grupą testów, i tak samo po testach - dzięki temu testy mogą zawierać kod wyłącznie niezbędny do testu

2. Możemy wstrzykiwać gotowe przygotowane obiekty, które mogą posiadać własny kod inicjalizacyjny i sprzątający

3. ⭐ Możemy grupować testy i nadawać grupom różne własności związane ze zrównolegleniem, powtarzaniem testów bądź opóźnieniem, czy innymi indywidualnymi ustawieniami

TypeScript

1. Domyślny język dla Playwright Test

2. Tworzenie bezpiecznego i łatwego w utrzymaniu kodu

3. Wsparcie przez narzędzia do zarządzania regułami w kodzie (ESLint, Prettier)

4. Wykorzystanie praktyk takich jak aliasy, type hinting, interfaces

⭐ Async/Await

1. Dzięki wsparciu async/await możliwe jest wykonywanie równoległe akcji

2. Możemy czekać na odpowiedź API w czasie akcji na GUI

3. Możemy wykonywać automatyczny kod podczas akcji (handling)

4. Możemy wykonywać więcej niż jedną akcję na raz

Network Intercepting

1. Wykorzystanie np. w testach GUI aby je wyizolować od ruchu sieciowego API

2. Modyfikowanie dowolnego ruchu sieciowego

3. Zatrzymywanie request, nadpisywanie response, logowanie wybranych własności

⭐ Visual Comparison

1. Porównywanie wybranych elementów graficznych strony do przechowywanych screenshotów

2. Można porównać wybrane obszary strony

3. Można ignorować elementy pobieranych screenshots

4. Można ustawić jak bardzo screenshots muszą być zgodne

5. Wyniki można wygodnie przeglądać w raportach

⭐ Obsługa iframe, tabów, nowych stron, wyskakujących okienek

1. Zarządzanie tymi kontekstami

2. Łatwe przełączanie się pomiędzy kontekstami

Rodzaje testów jakie można wykonać w Playwright Tests

1. Testy GUI
1. Zarówno headless jak i z widokiem przeglądarki
2. Wsparcie Chromium (i pochodnych), Firefox i Safari
3. Emulacja ustawień aby łatwo testować przeglądarki w różnych warunkach
4. Możliwość testów w izolacji od API

2. Testy API
1. Osobny obiekt do wykonywania testów API
2. ⭐ Brak potrzeby uruchamiania przeglądarki
3. ⭐ Podgląd i debugowanie testów za pomocą Trace Viewer z pełną informacją i szczegółami ruchu sieciowego
4. Testy WebSockets

3. Testy niefunkcjonalne
1. Proste w konfiguracji accessibility testing (wtyczka zewnętrzna)
2. Wsparcie raportów Lighthouse (wtyczka zewnętrzna)
3. Integracja z 🔗Artillery.IO do testów wydajnościowych (wtyczka zewnętrzna)

4. Testy komponentów (eksperymentalne🧪)
1. testy tylko wybranych elementów widoków

Zarządzanie sesją i danymi wrażliwymi

1. Łatwe przechowywanie i korzystanie z dotenv do zarządzania ustawieniami środowiskowymi: 🔗https://playwright.dev/docs/test-parameterize#env-files

2. Proste przechowywanie wygenerowanej sesji: 🔗https://playwright.dev/docs/auth#session-storage

3. Wstrzykiwanie przechowywanej sesji do testów poprzez Projects lub bezpośrednio w testach

Dodatkowe

1. ⭐ Generowanie testów za pomocą nagrywanych akcji z możliwością nagrania asercji wbudowane w IDE

2. Proste wstrzykiwanie JS w celu uzyskania dostępu do niestandardowych elementów strony

3. Dowolna izolacja kodu na poziomie kontekstu (z cookies np. sesją) lub nowej strony (czysta przeglądarka) w obrębie testu lub dowolnej grupy

4. Widoczność czasu wykonania akcji w kodzie podczas uruchomienia testu z wtyczką VSCode

5. Możliwość wielokrotnego uruchomienia pojedynczego testu lub grupy z linii poleceń

6. Łatwa integracja z zewnętrznymi bibliotekami JS/TS jak Faker (generowanie danych losowych), Winston (logger), Dotenv (zarządzanie danymi wrażliwymi)

Na koniec główne wady

• Brak wsparcia dla mobilnych urządzeń (w szczególności iOS bo Android jest w fazie eksperymentalnej - 🔗https://playwright.dev/docs/api/class-androiddevice)

• Brak pełnego wsparcia dla BDD (biblioteka zewnętrzna - 🔗https://github.com/vitalets/playwright-bdd)

• Brak możliwości mockowania WebSockets - 🔗https://github.com/microsoft/playwright/issues/4488

• Brak obsługi starszych wersji przeglądarek

• Playwright Test jest dostępny tylko dla JavaScript i TypeScript (w odróżnieniu od biblioteki Playwright)

Podsumowanie

💡

Jeśli planujesz wprowadzić Playwright do swojego projektu lub chcesz poszerzyć swoje kompetencje z tego frameworka, to zapoznaj się z następującymi materiałami:

• 🔗Jak zacząć naukę automatyzacji z Playwright?

• 🔗Różne smaki Playwright - o Playwright, Playwright Test, różnych językach i podejściach

• Kompleksowy 🔗Program Testy Automatyczne z Playwright

• Mega darmowe materiały na YouTube wprowadzające do Playwright: 🔗https://www.youtube.com/watch?v=JqEp2cjnzAo&list=PLfKhn9AcZ-cD2TCB__K7NP5XARaCzZYn7&index=2

Pozwolą Ci one poznać wady i zalety tego narzędzia😉 Tym samym, zobaczysz, czy Playwright jest odpowiednim rozwiązaniem dla Ciebie i Twojego projektu🙌