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", ()=>;{</p>
<p>it("Should have proper tittle",()=>;{</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
visitwchodzi 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. 🙂
.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:
- łączny czas trwania testów (podany w sekundach),
- informacja ile testów przeszło pomyślnie oraz ile zakończyło się błędem,
- adres url, dla którego wykonywane są testy,
- 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.
- 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ę
getorazclickznajdujemy oraz klikamy w element o idcn-accept-cookie - sprawdzamy czy element o id
cn-accept-cookiejest 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.
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.