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

Posted by in codeceptjs, dajsiepoznac

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.