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
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.
Kolejnym krokiem będzie dodanie kilku pól wraz z selectorami ze strony, którą testujemy. 
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.
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.
