Wyzwania automatyzacji testów interfejsu użytkownika

Przygotowanie testu

Po przetestowaniu logowania chciałbym zająć się najważniejszą funkcjonalnością WP, czyli zarządzaniem postami. W tym celu utworzę kolejny plik tests/02_posts/01_posts_test.js. Zanim będę mógł utworzyć nowy post muszę być zalogowany. Chciałbym, żeby to odbyło się przed każdym scenariuszem w moim pliku.

Uwaga: W konfiguracji włączyłem opcję zachowania cookies i state przeglądarki, więc nie jest to potrzebne, ale dla celów demonstracji wykomentowałem te linie w pliku webdriver.conf.js:

Teraz, aby zalogować się przed każdym scenariuszem użyję hook’a Before i nasze testy mogą wyglądać teraz następująco:

Uruchamianie tylko wybranych testów

Często będziecie chcieli pracować tylko nad testami w jednym pliku. Można to uzyskać przekazując parametr –grep przy uruchamianiu testów. Ja dla wygody skorzystałem z funkcji tagowania testów i utworzyłem pomocniczy skrypt NPM, żeby uruchamiać tylko konkretne testy.

W package.json:

Wewnątrz testu, który chcesz odpalić możesz dodać tag @current w taki sposób:

ZOBACZ TEŻ:  100-letnia zagadka rozwiązana za pomocą superkomputerów 

Następnie wystarczy, że uruchomisz:

Debugging

Jedną ze słabo udokumentowanych możliwości jest debugowanie z wykorzystaniem IDE – np. WebStorm czy VS Code. W moim package.json skonfigurowałem komendę, aby odpalić testy w trybie interaktywnego debuggera, aby umożliwić podłączenie się z poziomu IDE:

Ponadto dla VS Code dodałem konfigurację launch.json, która umożliwia ustawianie breakpoint’ów w kodzie. Po wywołaniu powyższego polecenia Node będzie czekał aż podłączymy się do niego debuggerem, aby kontynuować.

Natomiast interaktywne debugowanie jest według mnie dużo mniej przydatne, niż odpalanie CodeceptJS z przełącznikiem –debug, o czym możesz przeczytać w dokumentacji: https://codecept.io/advanced/#debug.

Usuwanie problemów

W tej sekcji będę dodawał problemy zgłaszane przez czytelników wraz z rozwiązaniami.

Nieprawidłowe dane logowania

Kiedy zalogujesz się jako admin w lokalnej przeglądarce możesz otrzymywać błędy w logowaniu przy próbie logowania poprawnymi danymi. Polecam wtedy wylogować się na lokalnej przeglądarce. W przypadku odpalania testów testów z poziomu serwera CI taki problem nie wystąpi, ponieważ zwykle są one uruchamiane w odizolowanych wirtualnych maszynach.

Następne kroki

Nie będę bardziej zagłębiał się w API CodeceptJS oraz jego możliwości, ponieważ są one dobrze udokumentowane. Chciałem pokazać bardziej życiową konfigurację i wykorzystanie na realnym projekcie, aby stworzyć szkieleton, który możesz wykorzystać dla swoich celów. Zapraszam do kontynuowania lektury na stronie CodeceptJS: https://codecept.io/basics/.

Konfiguracja projektu w Semaphore CI

Jednym z głównych celów, o którym wspominałem na początku, jest automatyzacja sprawdzania regresji. W związku z tym na koniec chcę pokazać, jak można skonfigurować projekt, który będzie uruchamiał nasze testy w Semaphore CI.

1. Zacznij od rejestracji konta w Semaphore i podłączenia Github’a.

2. Następnie przejdź na stronę dodawania nowego projektu https://semaphoreci.com/new i wybierz Github:

3. Odnajdź swoje repozytorium i kliknij w nie:

4. Wybierz swój branch:

5. Wybierz właściciela projektu:

6. I poczekaj aż Semaphore wykryje jego typ:

7. Powinna pokazać Ci się rekomendacja wyboru platformy opartej na Dockerze, więc wybierz ją:

8. Następny krok z wyborem Deployment platform możesz pominąć klikając link Skip this step na dole.

9. Ostatnim krokiem jest konfiguracja parametrów build’a:

Z naszej perspektywy ważne jest, aby wyłączyć serwisy mysql oraz apache2, żeby nie było konfliktów z portami naszych serwisów z docker-compose.yml. Poniżej treść do przeklejenia:

10. Ostatecznie kliknij przycisk Build with this settings

11. I Voilà – twój projekt zbuduje się na Semaphore w niecałe dwie minuty 🙂

Zapraszamy do dyskusji

Patronujemy

 
 
More Stories
Dropbox co to jest i jak działa
Co to jest Dropbox i jak działa technologia Dropbox Sync?