Let's talk
  • [ Tech ]

Testy end-to-end z wykorzystaniem Nightwatch.js

Kaliop

Opublikowano 19 marca 2019

Testowanie aplikacji jest niezwykle ważne. Nie da się tego wystarczająco podkreślić. Nikt nie chce aplikacji pełnej błędów ani ciągłego naprawiania tych samych usterek. W przypadku dużych projektów posiadanie przynajmniej testów end-to-end jest absolutną koniecznością. A nie jest to wcale takie trudne. Pamiętaj, że zawsze możesz zacząć od małej skali, a następnie stopniowo rozbudowywać zestawy testowe, aby obejmowały coraz większą część Twojej aplikacji.

Ten artykuł przeprowadzi Cię przez proces konfiguracji prostego środowiska do testów end-to-end oraz wykonywania podstawowych operacji, korzystania z hooków, dodawania własnych poleceń i używania zmiennych współdzielonych między zestawami testów.

Nightwatch.js to proste narzędzie do testów end-to-end, które pozwala sprawdzać działanie aplikacji za pomocą łatwych w obsłudze poleceń w środowisku Node.js. Pod maską wykorzystuje serwer WebDriver do wykonywania opisanych przez Ciebie operacji.

Skonfigurujemy prosty stos do testów end-to-end. Nightwatch.js posłuży nam jako framework do pisania testów, a Chromedriver będzie sterownikiem przeglądarki, którego użyjemy do ich przeprowadzania.

Strona, którą będziemy testować: https://nightwatch-demo.netlify.com/

Jest to prosta strona z polem tekstowym, w którym należy wpisać swoje imię, a następnie wyświetla ona komunikat powitalny.

Instalacja

mkdir nightwatch-tests && cd nightwatch-tests
npm init -y
npm install nightwatch --save-dev
npm install chromedriver --save-dev

Utwórz plik o nazwie  nightwatch.json i umieść w nim następującą konfigurację:


Pisanie pierwszego testu

Utwórz katalog o nazwie tests.

Ten katalog jest Twoim punktem wejścia, zgodnie z tym, co określono w pliku konfiguracyjnym (src_folders). Każdy plik w tym folderze reprezentuje test suite. Utwórz plik o nazwie home.js wewnątrz katalogu tests, ponieważ będziemy testować stronę główną.

W każdym test suite eksportujemy obiekt za pomocą module.exports. Każda właściwość obiektu reprezentuje krok w zestawie testów.

Na przykład w naszym zestawie testów home mamy tylko jeden krok, który nazywa się Demo Test.

Ta funkcja przyjmuje argument o nazwie browser, który jest obiektem służącym do wykonywania zadań, takich jak pause, waitForElementVisible i tak dalej. Funkcje, których możesz użyć, znajdziesz w api reference. Nie zapomnij wywołać metody end, aby poinformować Nightwatch, że test został zakończony.

Aby prawidłowo uruchomić test, skonfigurujemy polecenie testowe w pliku package.json. Zastąp polecenie test frazą nightwatch.

Możesz teraz uruchomić polecenie testowe:

npm run test
 

You should see the following output:

Exemple demo test

Hooki testowe

Hooki to potężne narzędzia, których możesz użyć, gdy chcesz wykonać to samo zadanie przed lub po uruchomieniu zestawu testów. Istnieją 4 hooki, których powszechnie używamy:

  • before: uruchamia się przed zestawem testów 

  • after: uruchamia się po zestawie testów 

  • beforeEach: uruchamia się przed każdym krokiem w zestawie testów 

  • afterEach: uruchamia się po każdym kroku w zestawie testów

Można ich używać do wielu rzeczy. Na przykład możesz wywołać konkretną usługę przed zestawem testów, aby przygotować środowisko. Możesz też wywołać inną usługę na końcu zestawu testów, aby ją wyłączyć.

Stwórzmy prosty hook, który będzie logował informację o zakończeniu zestawu testów.

Hook kończy swoje działanie w momencie, gdy funkcja zwraca wartość (co w tym przypadku dzieje się na jej końcu, ponieważ funkcje domyślnie zwracają undefined po dotarciu do ostatniej linii).

Możesz uruchomić test i zobaczyć komunikat „I am done.” na końcu danych wyjściowych testu.

Może się zdarzyć, że będziesz musiał wykonać zadania asynchroniczne. W takim przypadku możesz skorzystać z parametru done.

Własne polecenia (Custom commands)

Istnieją procesy, które wymagają wykonania zadań nieobecnych w API Nightwatch. Na przykład, jeśli rejestrujesz się w swojej witrynie, możesz otrzymać kod lub link e-mailem. Do tego typu operacji warto wykorzystać funkcję custom command w Nightwatch.

Możesz stworzyć polecenie, które użyje API Gmaila, pobierze ostatnią wiadomość otrzymaną od noreply@yourwebsite.com i przeszuka jej treść, aby wyodrębnić link.

W tym artykule zrobimy coś prostszego, ale idea pozostaje taka sama.

Istnieją dwa różne sposoby definiowania własnych poleceń:

  • Polecenia w formie funkcji (Function-style), które są bardzo proste, ale mają spore ograniczenia.

  • Polecenia w formie klas (Class-style), które są znacznie bardziej elastyczne.

Skupmy się na tym drugim sposobie, ponieważ to właśnie z niego będziesz korzystać przez większość czasu. Polecenia w formie klas opierają się na EventEmitter. Działają one poprzez wywołanie zdarzenia complete, gdy zadanie zostanie zakończone. Poniższe polecenie to „dziwna pauza” (weird pause), która działa tylko dla nieparzystej liczby milisekund. Umieśćmy plik w katalogu custom-commands i nazwijmy go weirdPause.js.

Dodaj właściwość custom_commands_path do swojego pliku konfiguracyjnego nightwatch.json.

Na koniec spróbuj uruchomić je zarówno z liczbą parzystą, jak i nieparzystą. Nazwą polecenia jest sama nazwa pliku. Jest to nieco dziwne rozwiązanie i niezbyt przyjazne dla środowisk IDE.

Możesz zauważyć, że liczba parzysta przerywa test, natomiast liczba nieparzysta przechodzi bez żadnych problemów.

Exemple test failure

Exemple demo test suite

Zmienne globalne

Podczas testowania możesz chcieć zdefiniować zmienne, których będziesz używać w całej aplikacji. Możesz to zrobić w pliku konfiguracyjnym Nightwatch. Dodajmy właściwość launch_url oraz obiekt globals z dodatkowym polem::

Teraz możemy używać tych zmiennych bezpośrednio w teście. Są one dostępne za pośrednictwem zmiennej browser.

Bez wymówek!

To są podstawy potrzebne do napisania Twojego pierwszego testu end-to-end. Masz już wszystko, czego potrzebujesz, aby skonfigurować środowisko i zacząć testować swoją aplikację. Pamiętaj, że start jest naprawdę prosty i możesz - a wręcz powinieneś - przetestować przynajmniej swoje najważniejsze strony.

Nightwatch potrafi znacznie więcej. Możesz dowiedzieć się więcej na ich website.

Podobne treści