W poprzednim wpisie pokazałem jak zacząć pracę z CodeceptJS.
Jeżeli jeszcze nie miałeś okazji z nim zapoznać się, zachęcam do czytania link. W dzisiejszym wpisie chce pokazać, jak zaimplementować page object pattern dla CodeceptJS oraz, jak skorzystać z kilku przydatnych funkcji, które są dostępne dla tego frameworka.
Czego dowiesz się z tekstu?
- Jak zaimplementować page object pattern dla CodeceptJS?
- Jak uruchomić testy współbieżnie?
- Jak skorzystać z Data Table?
Zacznę od pokazania, w jaki sposób w CodeCeptJS możliwe jest uruchomienie testów współbieżnie. Kopiuje przypadek testowy, który utworzyłem w poprzednim wpisie i wklejam go cztery razy. Robię to po to, żebym mógł pokazać Ci działanie współbieżności, a do tego potrzebne jest posiadanie więcej testów niż jeden. W kodzie prezentuję się to tak:
Kolejnym krokiem jest zapisanie tego pliku i skorzystanie z parametru run-workers 5, który uruchomi testy w sposób współbieżny.
Co, jeżeli natrafimy na taki błąd?
W tym przypadku trzeba pobrać wyższą wersje Node JSa.
Wybrałem drugą opcję. W moim przypadku jest to instalacja node js dla Windowsa. Po tym kroku uruchamianie testów w sposób współbieżny będzie działać.
Filmik jak działają testy współbieżnie w trybie headless z Puppeteerem:
Jeżeli chciałbyś widzieć okno przeglądarki podczas egzekucji testów, to w ustawieniach codecept.conf.js parametr show trzeba zmienić na true. Domyślnie testy uruchamiane są w trybie headless.
Implementacja page object
Kod, który utworzyłem w poprzednim wpisie, w tym kroku dostosuje do page object pattern. Potrzebuje zdefiniować metodę, która będzie wypełniała treścią formularz kontaktowy. CodeceptJS ma możliwość wygenerowania w prosty sposób page objectu dla określonej strony.
Przechodzę do konsoli. W tzw. „helpie” CodeceptJSa mam podpowiedź, że mogę użyć komendy codeceptjs gpo, która stworzy mi pusty page object. Po dodaniu pliku z page objectem przechodzę do dodania metody, która wypełni treścią formularz kontaktowy.
Ta komenda zawiera prosty konfigurator. Jestem pytany o to jak page object ma się nazywać. Nadałem nazwę contactFormPage następnie wybrałem gdzie ma znaleźć się mój page object. Zostawiłem domyślną ścieżkę „./pages/contactFormPage.js”. W tym miejscu CodeceptJS stworzy folder pages, jeżeli jeszcze go nie ma na dysku. Po stworzeniu mogę przejść do implementacji, którą będzie zawierał ten page object.
Następnie należy dodać page object do codecept.conf.js
Teraz wracam do pliku contactFormPage.js i implementuje metodę, która będzie wypełniała formularz kontaktowy i go wysyłała. Rozpoczynam od dodania nazwy metody w tym wypadku będzie to fillForm(name, email, comment).
Metoda składa się z czterech linijek. Zaczynam od podania wartości dla pola Name, następnie przekazuje wartość pola Email oraz dla pola Comment. Metodę kończę wysłaniem formularza. Ktoś mógłby zapytać, czemu również asercji tutaj nie umieściłem? Uważam, że lepiej, gdy asercja znajduje się w samym kodzie testu, bo:
- Od razu w teście widać co jest sprawdzane.
- Nie trzeba wchodzić do implementacji metody.
- Czasem nazwa metody może być myląca, a asercja odnosi się do czegoś innego.
Przechodzę do contactForm_test.js, aby korzystać z page objecta potrzebuje w parametrze testu przekazać nazwę page objecta.
Gdy zdefiniowałem to w ten sposób, od tego momentu mogę korzystać z page objecta w tym teście. Test ma teraz trzy linijki zamiast wcześniejszych ośmiu. Jako parametry podaje wcześniej używane dane testowe. Zmiany dokonuje dla wszystkich skopiowanych testów.
Przydatne opcje
W ostatnim wpisie nie poruszyłem tego, w jaki sposób mogę debugować testy napisane w CodeceptJS. Jednym ze sposobów jest skorzystanie z interaktywnego shella. Żeby z tego skorzystać, używam komendy:
npx codeceptjs shell
Dzięki temu CodeceptJS otwiera okno przeglądarki i mogę przetestować każdą metodę CodeceptJS, która jest po „I.” w konsoli. W łatwy sposób sprawdzenie tego, czy kod będzie działał dla przeglądarki.
Innym sposobem na interaktywne debugowanie dla CodeceptJS jest dodanie „pause” pomiędzy akcjami. Ta komenda zatrzyma przeglądarkę i możemy sprawdzić, jak zachowuje się dany test.
Dry – run pokazuje jakie testy zostaną uruchomione.
CodeCeptJS – bardziej zaawansowany przykład
Tym razem przechodzę do bardziej zaawansowanego przykładu, bo będę korzystał z Data Driven Tests. Czyli możliwości tworzenia i korzystania z danych testowych w sposób dynamiczny.
Test będzie polegał na:
- Wejście do ekranu logowania wordpressa.
- Podanie loginu do jednego konta.
- Podanie hasła do jednego konta.
- Zalogowanie się i sprawdzenie, czy nazwa użytkownika się wyświetla.
CodeceptJS zrobi to dla dwóch kont.
Pracę rozpoczynam od utworzenia nowego pliku. Nazwałem go checkAccounts_test.js implementacje rozpoczynam od dodania Feature w pliku z nazwą obszaru, do którego będą odnosić się testy. Kolejnym krokiem jest zdefiniowanie accounts, które korzystają ze struktury DataTable, która pozwala dla CodeceptJS umieszczać różnego rodzaju wartości np. dane do konta dla użytkowników. To, że w nazwie korzystam z @accounts to jest to sposób, w jaki definiuje się tagi dla CodeceptJS. Tagi pomagają grupować testy.
Przekazuje accounts do Data. Następnie przekazuje w scenariuszu wartość z „current”, który pozwoli pobrać wartość z date table.
Test zaczyna się od przejścia do panelu logowania wordpressa. Zrobiłem to, podając pełną ścieżkę. Oczywiście, gdybym zdefiniował domenę, mógłbym odwoływać się do ścieżki po /. Wypełniam pole login loginem, który znajduje się w current.login. W tym miejscu korzystam ze wpisywania wartości do selectora. Po tym kroku klikam przycisk „Continue”. Pojawia mi się pole password. W nie wpisuje hasło tego użytkownika.
Dodałem krok, który sprawdza, czy przycisk się pojawił. W tym przypadku jest to przycisk „Log In”. Klikam w niego i dodaję metodę I.waitInUrl(’/me’,10), która pozwala czekać na pojawienie się określonej wartości w linku. Po tym kroku dodaję krok czekający na element I.waitForElement(’.profile-gravatar__user-display-name’, 15), który jest odzwierciedleniem nazwy użytkownika wyświetlanym w dashbordzie . Test kończę dodaniem asercji, która sprawdzam, że ta wartość znajduje się na tej stronie.
Uruchamianie testów z tagiem
Jeżeli chcesz uruchomić jakąś pulę testów z określonym tagiem, możesz to zrobić za pomocą tej komendy:
codeceptjs run –grep @accounts
Popularne jest nadawanie tagów np. @slow dla wolniejszych testów, czy @basic dla podstawowych testów, które sprawdzają najważniejsze rzeczy.
Kod dostępny jest na GitHubie
Podsumowanie
W dzisiejszym wpisie przedstawiłem Ci, w jaki sposób można skorzystać w bardziej zaawansowany sposób z CodeceptJS. W relatywnie łatwy sposób możesz zaimplementować page object pattern, jak i również skorzystać z uruchamiania współbieżnego testów. Jeżeli lubisz javascript, ten framework spokojnie możesz wdrożyć przy komercyjnym projekcie.
Chcesz lepiej zrozumieć aplikacje i systemy, które testujesz? Dołącz do ModernTester, poznaj najpotrzebniejsze narzędzia, frameworki oraz języki programowania i ćwicz na specjalnie przygotowanych środowiskach testowych: Platforma e-learningowa ModernTester
Zostaw komentarz