Menu Zamknij

Asercje oraz interakcje z elementami na stronie w testach Cypress

Czy słyszeliście o tym, że pisanie testów w Cypress jest proste i przyjemne, a ich wykonanie zajmuje mniej czasu niż testy pisane w Selenium?
Jak napisać testy zawierające asercje oraz wchodzące w interakcje z elementami na stronie?
W dzisiejszym artykule postaram się odpowiedzieć na zadane wyżej pytania. Zatem zapraszam do lektury, a jeśli po drodze pojawią się jakiekolwiek wątpliwości to zachęcam do zadawania pytań w komentarzu pod artykułem.

W poprzednim artykule zapoznaliśmy się z podstawowymi informacjami odnośnie Cypress. Wyjaśnione zostało jak krok po kroku zainstalować to narzędzie, a także jak odpalić pierwszy, nieskomplikowany test. Jeśli jesteście zainteresowani treściami z tego artykułu to link do niego znajdziecie tutaj:  Szybkie testy UI, czyli wprowadzenie do Cypress.

Test zawierający asercję.

Tym razem mam Ci do zaproponowania napisanie testów zawierających proste asercje. Co ważne takie testy możecie od razu wdrożyć w swoich projektach i cieszyć się z wykonywania prostych sprawdzeń bez konieczności manualnego przeglądania zawartości strony. Pamiętajmy o tym, że mądra automatyzacja zawsze na propsie. 🙂

Nasz test będzie składał się z następujących elementów:

  • wchodzimy na stronę,
  • sprawdzamy tytuł strony,
  • sprawdzamy, czy tytuł strony jest zgodny z oczekiwanym.

Test będzie wyglądał następująco:

 describe("MainPageTests", ()=&gt;;{</p>
<p>it("Should have proper tittle",()=&gt;;{</p>
<p>cy.visit("https://www.https://www.zdalnewarsztatyqa.pl/")<br>
cy.title().should('eq','Zdalne Warsztaty QA')<br>
})<br>
})<br>

Kod jest dość intuicyjny, ale  aby jeszcze bardziej ulżyć osobom, które stawiają swoje pierwsze kroki w automatyzacji postaram się go opisać.

Zatem rozpocznijmy od przedstawienia komend wykorzystanych w naszym teście:

  • komenda visit wchodzi na stronę podaną w argumencie, w naszym przypadku to oczywiście:  https://www.zdalnewarsztatyqa.pl/,
  • komenda title() pobiera tytuł aktywnej strony.

WSKAZÓWKA 

Aby sprawdzić tytuł strony najprościej skorzystać z narzędzi deweloperskich w naszej przeglądarce. W tym celu należy  nacisnąć przycisk F12 i w zakładce Elements znaleźć element Title. Poniżej screen z zaznaczonym na żółto elementem. 🙂

Jeśli zapoznaliście się z treścią poprzedniego artykułu, to być może pamiętacie o tym, że Cypress korzysta z biblioteki Chai, która udostępnia wiele różnych typów asercji. Jedną z nich jest .should która jest użyta w naszym teście. Należy ona do jednej z najczęściej wykorzystywanych asercji i dzięki niej możemy sprawdzić czy tytuł strony, na której się znajdujemy jest taki sam jak podany w asercji.

Mam nadzieję, że te krótkie wyjaśnienia pozwolą Wam lepiej zrozumieć co dzieje się w naszym teście. Jeśli jednak macie jeszcze jakieś wątpliwości odnośnie działania napisanego przez nas kodu, to koniecznie zadajcie pytanie w komentarzu. 

W tym momencie przechodzimy do kolejnego kroku, a mianowicie do odpalenia naszego testu. Gotowi? 🙂

Zatem ręce na pokład, a dokładniej na klawiaturę i w terminalu wpisujemy komendę npx cypress open oraz w Test Runnerze klikamy na plik, w którym znajduje się nasz test. W menu testów po lewej stronie Waszym oczom powinno ukazać się info o naszej asercji, oczywiście w kolorze zielonym. 🙂 Szczegóły znajdziecie poniżej.

Test Runner wyświetlił nam również inne informacje dotyczące naszego testu, takie jak:

  1. łączny czas trwania testów (podany w sekundach),
  2. informacja ile testów przeszło pomyślnie  oraz ile zakończyło się błędem,
  3. adres url, dla którego wykonywane są testy,
  4. podgląd aplikacji, w trakcie wykonywania testów.

Kilka słów o tym, że nie zawsze jest zielono ...

Oczywiście wszystkim życzymy, aby Wasze testy zawsze kolorowały się na zielono. 🙂 Wiadomo jednak, że w rzeczywistości już nie zawsze tak jest (za wyjątkiem, tych co patrzą przez zielone szkła w okularach 😉 ). Zatem postaramy się pokazać jaki wynik otrzymamy, gdy np. w naszej asercji popełnimy błąd jakim może być np. literówka  lub zła wielkość liter.

Otóż należy zapamiętać, że asercja .should('eq',...) jest case sensitive, czyli wielkość liter ma znaczenie. 😉 Zatem w naszym teście dokonajmy zmiany w komendzie title i tekst Zdalne Warsztaty QA zamieńmy na Zdalne warsztaty QA, a następnie odpalmy test na nowo.

Jak widać na zrzucie powyżej tym razem test nie przeszedł. Nasza asercja zmieniła kolor na czerwony,  także w info odnośnie oczekiwanej i wskazanej wartości widać gdzie popełniliśmy błąd. Widać też, że czas naszego testu uległ wydłużeniu. Czy ciekawi Was co może być tego przyczyną? Spieszę z wyjaśnieniem. 🙂 Otóż nasz drogi Cypress działa w ten oto sposób, że gdy asercja, którą dodamy do testu się wywali wtedy automatycznie zrobi retry i odpyta ponownie DOM. Gdy zostanie osiągnięty tiemout test sfailuje. Domyślnie czas po jakim test się wywali to 4s. Można ten czas sprawdzić w Test Runnerze klikając na zakładkę Settings defaultCommandTimeout (szczegóły znajdziecie poniżej).

 Tym samym zagadkę wydłużonego czasu trwania testów można uznać za rozwikłaną. 😉

Interakcja z elementami na stronie.

W poprzednim teście wykorzystaliśmy asercje do sprawdzenia tytułu strony, czyli elementu, który należy do nagłówka strony. W kolejnym teście zobaczymy jak można wykorzystać asercję do sprawdzania interakcji z elementami na stronie. Napiszemy test, który będzie:
  • wchodził na podaną stronę,
  • potwierdzał zgodę na ciasteczka poprzez kliknięcie w przycisk do jej akceptacji,
  • sprawdzał czy przycisk, na który kliknął już się nie wyświetla.
describe("MainPageTests", ()=>;{

it("User should be able to accept cookies",()=>;{

cy.visit("https://www.zdalnewarsztatyqa.pl/")

cy.get('#cn-accept-cookie').click()

cy.get('#cn-accept-cookie').should('not.visible')
})
})
Krótko podsumujmy co wykonują poszczególne linie powyższego kodu:
  •  za pomocą komendy visitwchodzimy na  stronę https://www.zdalnewarsztatyqa.pl/,
  • wykorzystując komendę get oraz clickznajdujemy oraz klikamy w element o id cn-accept-cookie
  • sprawdzamy czy element o id  cn-accept-cookie jest niewidoczny na stronie.

WSKAZÓWKA 

Aby sprawdzić id przycisku do akceptacji zgody należy w przeglądarce uruchomić narzędzia deweloperskie (DevTools), czyli  nacisnąć przycisk F12 i na pasku wybrać ikonę Wskaż element na stronie , a następnie kliknąć w przycisk Zgoda. Po wykonaniu powyższych kroków w DevTools zaznaczony zostanie fragment kodu zawierający informacje o idposzukiwanego przez nas elementu. Szczegóły znajdziecie na poniższym screen. 😉

Podsumowanie

Po przerobieniu przykładów z tego artykułu będziecie potrafili napisać podstawowy test z użyciem asercji .should('eq',...) , która pozwala nam porównać otrzymane rezultaty z oczekiwanymi.

Wspomniana asercja działa zarówno:

  • dla testów sprawdzających elementy należące do nagłówka strony, takich jak np. jej tytuł,
  • dla testów, które wchodzą w interakcje z elementami strony,  tak jak np. zniknięcie przycisku po akceptacji zgody.
Kod wszystkich testów z dzisiejszego artykułu znajdziecie na GitHub ZWQA. Aby go pobrać kliknij tutaj. 🙂

Już dziś zapraszam Was również do śledzenia informacji o kolejnych artykułach, w których będziemy omawiać kolejne zagadnienia związane z Cypress. Jeśli chcecie dowiedzieć się o nich z pierwszej ręki zapraszamy do dołączenia do naszego Newslettera oraz grupy Facebook.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *