Page Object Model CodeceptJS – jak używać wzorca?

Page Object Model CodeceptJS — jak używać wzorca?

Witajcie.

Dzisiaj chcę Wam przedstawić to, jak zaimplementować wzorzec Page Object Model w CodeCeptJS. Pisałem już kiedyś o tym, jak można zrobić to w C# (link). Tym razem zrobimy to w CodeCeptJS. Czym jest ten wzorzec, poruszałem również w tamtym wpisie dotyczącym C#, więc jeżeli go nie znacie, to zachęcam do zajrzenia do tego posta.

Czego potrzebujemy?

  • Projektu stworzonego według poprzednich części serii o codeceptjs
  • Visual Studio Code (lub inne IDE wspierające JS’a)
  • Stronę testową, do której będziemy pisać test

Zaczynamy

Przechodzimy do naszego ulubionego IDE. Następnie otwieramy terminal. W terminalu przechodzimy do katalogu, w którym znajdują się nasze testy.

Wpisujemy codeceptjs 

Podpowiada nam to jakie komendy możemy wykonać. Korzystając z helpa widzimy komendę:

codeceptjs gpo

page object model codeceptjs

Polecenie pozwala na stworzenie page objectu. Po wpisaniu tego polecenia ukazuje się nam pytanie, jak będzie nazywał się nasz page object. Następnie framework „pyta” gdzie chcemy umieścić plik. Jeżeli klikniemy enter, to wówczas umieści on go w folderze pages. Teraz musimy nasz page object zarejestrować w codecept.json, aby framework wiedział, gdzie ma szukać naszego page objecta. Przechodzimy do codecept.json. W include dodajemy parametr „homePage” wraz ze ścieżką, w której znajduję się nasz plik.

page object model codeceptjs

Kolejnym krokiem będzie dodanie kilku pól wraz z selectorami ze strony, którą testujemy. page object model codeceptjs

Wszystkie selectory, które dodałem przy polach, są css selectorami. Gdy dodamy interesujące nas obiekty, to przechodzimy do użycia ich. Pokażę Wam to na przykładzie z home_some_test.js.

Stworzyłem scenariusz, który robi prostą operację — wchodzi na stronę po „/” klika w przycisk, który ma css selector – „.red”.

Pamiętajcie, aby w scenariuszu przekazać interesujący Was obiekt jako parametr.

page object model codeceptjs

Zrzut ekranu 2017-04-11 o 20.36.57

Podsumowanie

W dzisiejszym wpisie pokazałem jak zaimplementować wzorzec page object model w codeceptjs. W następnych wpisach dowiemy się o kolejnych właściwościach tego frameworka.

 

CodeceptJS – interaktywny shell – Jak może pomóc w testach?

CodeceptJS – interaktywny shell – W jaki sposób może pomóc w testach?

Witajcie.

W poprzednim poście rozpoczynającym serię wpisów na temat CodeceptJS nauczyliśmy się jak stworzyć pierwszy test oraz w jaki sposób zainicjować projekt. Dziś zajmiemy się dalszymi aspektami poznawania CodeceptJS , którego używam do projektu testów w konkursie DajSiePoznać (link). Z dzisiejszego wpisu nauczymy się jak uruchomić CodeceptJS  w trybie interaktywnym (shell), dzięki czemu nasze testy będziemy mogli tworzyć szybciej. Tryb interaktywny pozwala bowiem szybko sprawdzić, czy nasz krok (czyli zapisana metoda po „I” np. I.click(‚element’)) uruchomia się oraz równocześnie zobaczyć efekt działania kodu. Rezultat działania testu widzimy szybciej niż przez codeceptjs run. Testy możemy pisać w taki sposób:

  • Wpisujemy metodę po metodzie w shellu
  • Jeżeli dany krok po „I.”  jest dobry to kopiujemy daną linijkę do testu w naszym IDE
  • Dzięki temu gdy jest błąd od razu wiemy w której linijce / kroku

Czego potrzebujemy?

  • Przygotowanego projektu tak jak w pierwszej części serii o codeceptjs (link)
  • Strony, na której będziemy pisać testy. (Ja wykorzystam stronę aplikacji, którą wystawił mi Bartek (link))
  1. Włączamy terminal.
  2. Przechodzimy do katalogu, w którym mamy testy.

codeceptjs      3. Następnie w terminalu używamy komendy:

codeceptjs shell

      4. Dalej wpisujemy metodę I.amOnPage(‚/) specjalnie z błędem, by zobaczyć jak framework się zachowa. Jak widzimy występuję błąd.

      5. Kolejnym krokiem jest wpisanie I.amOnPage(‚/’) metody, która przeniesie nas do do strony testowanej.

      6. Następnie używamy metody I.see(”), która pozwala sprawdzić, czy dany element jest widoczny na stronie.

      7. Po innych użyciach metody I.see(”). Używam metody I.click(‚.red’) dzięki temu, zostaje kliknięty przycisk MORE. Klikamy w selector „.red”, który ma przycisk MORE.

Zrzut ekranu 2017-03-26 o 21.08.59
Zrzut ekranu 2017-03-26 o 21.01.01

 

Zrzut ekranu 2017-03-26 o 21.03.14

 

 

Podsumowanie

Zatem w tym poście dowiedzieliśmy się, w jaki sposób możemy używać powłoki shell w naszych testach. Dzięki niej możemy krok po kroku sprawdzać rezultat z uruchomienia danego testu. Jest to szybki sposób, jeżeli chcemy „na szybko” sprawdzić, czy krok, który chcemy wykonać, przejdzie. W następnych częściach dowiemy się m.in. w jaki sposób używać wzorca Page Object Pattern oraz innych przełączników podczas uruchamiania testów.

 

CodeceptJS testy akceptacyjne w przyjemny frameworku js.

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.