CodeceptJS testy akceptacyjne w przyjemny frameworku js.

Posted by in codeceptjs, dajsiepoznac, Testowanie automatyczne

CodeceptJS testy akceptacyjne w przyjemny frameworku js.

Witajcie,

Dziś chcę przedstawić przykład użycia framework’a w którym zdecydowałem się tworzyć swój projekt konkursowy. Testy do aplikacji typu mikroblog. Aplikację piszę Bartek (http://feree.net/) – również biorący udział w DajSięPoznać. Przy okazji czytania wiadomości na testerskim Slacku trafiłem na ten framework i właśnie w tym projekcie chcę go przetestować (Chyba, że z jakiegoś powodu jego możliwości będą mnie ograniczać to wówczas przejdę na Protractor’a). Aplikacja korzysta na fronendzie z Angulara, więc potrzebowałem frameworka radzącego sobie z nim lepiej niż czysty Selenium WebDriver.

Korzyści

  • Framework dostosowany jest do tzw. DSP (eng. Domain Specific Language) – czyli nasz kod testu posiada warstwę abstrakcji zrozumiałą w danym języku.  Przez to skupiamy się bardziej na scenariuszu dzięki czemu łatwiej analizuje się kod.
  • Testy piszemy jako użytkownik, każdy krok zaczynamy od „I.”-  pozwala to osobom postronnym lepiej zrozumieć scenariusz, który brzmi jak akcje, których dokonywalibyśmy na stronie a „pod spodem” danego kroku  „I.sth” znajduje się zaimplementowana akcja.
  • BDD – kładziemy nacisk na to jak ma się zachowywać system.

Wady

  • Jest to dość nowy framework więc mogą pojawić się czasami sytuacje nie wspierania danej funkcji.

Jak zacząć?

CodeceptJS posiada przyjemny konfigurator, który pozwala szybko stworzyć szkielet projektu. Zaczynamy od wejścia na stronę framework http://codecept.io/ . Polecam zapoznać się z jasno przedstawioną dokumentacją.

Do instalacji codeceptJS potrzebować będziemy node.js.

Po  instalacji node.js przechodzimy do terminala.

[sudo] npm install -g codeceptjs

instaluje globalnie codeceptJS

lub lokalnie

npm install –save-dev codeceptjs

Następnie po instalacji pakietu npm przechodzimy do terminala

codecepjs init  

Ta komenda utworzy nam szkielet projektu w ścieżce w której znajdujemy się aktualnie w terminalu. Aby dowiedzieć gdzie się aktualnie znajdujemy używamy polecenia pwd (w mac’u, powershell’u).

codeceptjs pyta się o folder w którym będziemy przechowywać nasze testy.

Następnie wybieramy  to jakiego helpera będziemy używać :

Ja wybieram Protractora

Wybieramy ścieżkę gdzie będziemy przechowywać output (logi, screenshoty)

Czy chcemy by utworzył folder ze stepami

Wybieram język angielski

Po skończonej konfiguracji również z terminala możemy dodać pierwszy test.

codeceptjs gt

Po wygenerowaniu testu możemy przejść do pisania kodu.CodeceptJS testy

Do pisania kodu w CodeceptJS wykorzystywał będę webStorm’a lub Visual Studio Code.

Przechodzimy w VSC – > Open -> folder exampleCodeceptJS

CodeceptJS testy

Do konfiguracji dodajemy helper Protractora. W czasie gdy czekałem na aplikacje do testów, którą tworzył Bartek, doszedłem do wniosku, że mogę zacząć pisać testy już do przykładowej strony aby zaznajomić się z frameworkiem. Jako przykład posłużył mi todomvc example, który posiada angulara na frontendzie. Url:

http://todomvc.com/examples/angularjs/

Polecam próbę na tej stronie.

Przechodzę do first_test.js

CodeceptJS testy

Metoda amOnPage(‚/’); przenosi do wybranej strony. CodeceptJS wie gdzie ma się udać, ponieważ url docelowy wzięty jest z pliku codecept.json

Przechodzimy do próby uruchomienia testów w terminalu, w folderze gdzie tworzyliśmy codeceptjs init:

codeceptjs run 

CodeceptJS testy

Naszym oczom ukazuje się błąd. I dobrze ;- ). Nasz WebDriver nie jest jeszcze uruchomiony. Aby to zrobić (musimy mieć go zainstalowanego) wpisujemy

webdriver-manager update

webdriver-manager start

update – po to by nasz server WebDriver’a był aktualny.

start – uruchamia server WebDriver’a.

Wracamy do polecenia :

codeceptjs run CodeceptJS testy

Nasze test uruchamia się. ; -)

Podsumowanie

Dziś dowiedzieliśmy się jak zainstalować codeceptJS, jak rozpocząć tworzenie testów tym frameworku. W kolejnych częściach będziemy pisać kolejne testy.