Wyślij zapytanie Dołącz do Sii

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:

fragment kodu

Kolejnym krokiem jest zapisanie tego pliku i skorzystanie z parametru run-workers 5, który uruchomi testy w sposób współbieżny.

codeceptjs minimum version node - CodeceptJS – część 2 - uruchamianie współbieżne, page object pattern

 

Co, jeżeli natrafimy na taki błąd?

W tym przypadku trzeba pobrać wyższą wersje Node JSa.

pobieranie wyższej wersji

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:

codecept js parallel - CodeceptJS – część 2 - uruchamianie współbieżne, page object pattern

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.

fragment kodu

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

fragment kodu

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.
fragment kodu

Przechodzę do contactForm_test.js, aby korzystać z page objecta potrzebuje w parametrze testu przekazać nazwę page objecta.

fragment kodu contactFormPage

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.

fragment kodu

Dry – run pokazuje jakie testy zostaną uruchomione.

fragment kodu

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.

Widok logowania

Test będzie polegał na:

  1. Wejście do ekranu logowania wordpressa.
  2. Podanie loginu do jednego konta.
  3. Podanie hasła do jednego konta.
  4. Zalogowanie się i sprawdzenie, czy nazwa użytkownika się wyświetla.

CodeceptJS zrobi to dla dwóch kont.

fragment kodu

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

https://github.com/testingplusme/IntroductionToCodeCeptJS/tree/second_artile_parallel_and_page_object

fragment kodu

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

5/5 ( głosy: 8)
Ocena:
5/5 ( głosy: 8)
Autor
Avatar
Michał Ślęzak

Test Architect w Sii Polska. Automatyzacją testów zajmuje się od kilku lat. Prowadzi bloga: testingplus.me oraz jest jednym z liderów PTaQ.org i prowadzącym podcastu TestingParrot: jednego z pierwszych podcastów o testowaniu w Polsce. Pisał dla geek.justjoin.it / blog.testuj.pl / Programista Magazyn. Poza pracą lubi rozwój osobisty, czytanie książek i oglądanie seriali.

Zostaw komentarz

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

Może Cię również zainteresować

Pokaż więcej artykułów

Bądź na bieżąco

Zasubskrybuj naszego bloga i otrzymuj informacje o najnowszych wpisach.

Otrzymaj ofertę

Jeśli chcesz dowiedzieć się więcej na temat oferty Sii, skontaktuj się z nami.

Wyślij zapytanie Wyślij zapytanie

Natalia Competency Center Director

Get an offer

Dołącz do Sii

Znajdź idealną pracę – zapoznaj się z naszą ofertą rekrutacyjną i aplikuj.

Aplikuj Aplikuj

Paweł Process Owner

Join Sii

ZATWIERDŹ

This content is available only in one language version.
You will be redirected to home page.

Are you sure you want to leave this page?