Cypress.io pierwszy test automatyczny to wpis pokazujący jak napisać pierwszy test z wykorzystaniem tego narzędzia. W poprzednim wpisie na temat Cypressa poruszaliśmy w jaki sposób zainstalować narzędzie i przygotować się do działania. Teraz skupimy się na napisaniu pierwszego prostego testu – bez fajerwerków.
Instalacja + IDE
Na temat instalacji narzędzia pisaliśmy w poprzednim artykule, które link znajduje się powyżej. Dodatkowo niezbędny będzie edytor kodu by móc stworzyć swój pierwszy test. Przy pisaniu niniejszego artykułu korzystaliśmy z Visual Code Studio.
Wprowadzenie
Na początku warto wskazać, że test, który będzie tutaj pisany ma na celu pokazanie najprostszego i najłatwiejszego sposobu na napisanie testu by po prostu działał. W kolejnych lekcjach, zostaną zaprezentowane najlepsze praktyki dla Cypressa, właściwa struktura i zastosowania.
Chcąc pisać pierwsze testy pamiętaj, że Cypress wraz z pobraną wersją udostępnia nam kilkanaście przykładów wykorzystania narzędzia.
Warto też włączyć sobie dokumentację, gdzie znajdują się niezwykle ważne informacje dla osób piszących testy – docs.cypress.io.
Piszemy pierwszy test
Korzystając ze wzorców, które dołącza nam Cypress, napiszemy pierwszy test. Przy okazji posiadajmy też otwartą zakładkę z dokumentacją, by posiłkować się nią, przy pracy.
W pierwszym kroku włącz Visual Code Studio i wybierz folder w którym znajdują się wzory z Cypressa. Jeżeli zainstalowałeś sobie Cypressa na dysku, to najprostsza ścieżka dostępu do przykładowych testów to: katalog_z_Cypressem\resources\app\packages\example\cypress\integration\examples.
Następnie utwórz nowy plik, lub zrób kopię z istniejącego przykładowego testu. Nasz pierwszy test będzie obejmował odwiedzenie niniejszej witryny.
describe('My First Test', () => {
it('finds the content "text/html"', () => {
cy.visit('https://www.dlatesterow.pl/')
})
})
Ten kawałek kodu, poleca Cypressowi odwiedzić niniejszą witrynę. Uruchomienie testu odbywa się poprzez Runnera o którym pisaliśmy. Jego uruchomienie odbywa się poprzez włączenie pliku Cypress.exe, lub też poprzez polecenie w terminalu.
Po otwarciu runnera otrzymamy taki widok. 
Po prawej stronie dokunujemy wy wyboru przeglądarki na której chcemy uruchomić test. Z rozwijanej listy testów klikamy na nasz plik testowy, który uruchamia napisany przez nas test.
Rozbudowujemy test
Obecnie nasz test się uruchamia na wskazanej przez nasz przeglądarce, chcemy jednak zapewne by sprawdzał on więcej rzeczy na naszej stronie. Widzimy też, że okienko ze stroną internetową jest małe i zasadnym będzie jej powiększenie.
Viewport
W ramach przykładowych testów w klasie viewport.js mamy zbiór wielu możliwości dostosowywania ekranu wyświetlanej strony w teście.
cy.viewport(1920,1080)
W taki sposób możemy ustawić rozdzielczość ekranu dowolną, która jest nam niezbędna dla naszego testu. Cypress posiada też domyślne wartości dla rożnych urządzeń, które możemy wykorzystywać w testach, np.:
cy.viewport('macbook-15')
cy.viewport('macbook-13')
cy.viewport('samsung-note9')
cy.viewport('ipad-2')
cy.viewport('iphone-6+')
Cypress posiada pełną dokumentację, gdzie są opisane szczegółowo wszystkie rozdzielczości dla właściwych urządzeń.
Lokalizowanie elementów
Podczas uruchomionej sesji testowej w Cypressie mamy możliwość łatwego i szybkiego lokalizowania elementów na stronie.
Jak widać na powyższym zrzucie ekrany wystarczy wybrać strzałkę i najechać na odpowiedni element. Element zostanie zlokalizowany i możemy go skopiować wraz z polecenie do edytora kodu. W niniejszym przypadku polecenie to:
cy.get('.custom-logo')
To polecenie pozwoli nam zlokalizować element, jednakże trzeba będzie potwierdzić jego obecność, np. poprzez asercję. Wiele informacji znajduje się w dokumentacji pod hasłem should. Dokumentacja osobno traktuje też o asercjach pod tym linkiem. W ramach tego przypadku i loga skorzystać możemy np:
.should('be.visible')
Interakcja na elementach – klikanie
Podstawową interakcją, którą wykorzystamy podczas pierwszego testu będzie to co robi każdy user – klikanie. Taką interakcję możemy wywołać na elemencie, który znajdujemy przez lokalizator i następnie polecamy wykonanie .click().
cy.get('.active > .np-single-slide-wrap > .np-slide-thumb > a > .attachment-news-portal-slider-medium').click()
Dzięki umożliwieniu Cypressowi klikania w elementy, możemy docierać w wiele miejsc na testowanej stronie. Dzięki wykorzystaniu kodu możemy obecnie:
a) uruchomić stronę;
b) sprawdzić nagłówek;
c) sprawdzić czy logo jest na stronie;
d) kliknąć na pierwszy element w karuzeli
describe('My First Test', () => {
it('finds the content "type"', () => {
cy.viewport(1920,1080)
cy.visit('https://www.dlatesterow.pl/')
cy.wait(200)
cy.get('.custom-logo').should('be.visible')
cy.get('.active > .np-single-slide-wrap > .np-slide-thumb > a > .attachment-news-portal-slider-medium').click()
})
})
Pisanie tekstu
Kolejną z podstawowych rzeczy, którą musimy potrafić jest pisanie tekstu. Logowanie, wyszukiwanie elementów to podstawowe czynności do których możemy używać tych metod. W Cypressie odpowiedzialna za to jest metoda:
.type("wyszukiwany tekst")
Wcześniej oczywiście, konieczne jest znalezienie elementu na stronie, by pisać w odpowiednim przez nas miejscu – np. wyszukiwarce. Na przykładzie niniejszej strony takim lokalizatorem będzie wyszukiwarka po prawej stronie:
cy.get('.search-field').type('JMeter')
Jak widzimy powyżej, samo wpisanie tekstu nie wystarcza, gdyż konieczne jest kliknięcie przycisk inicjujący wyszukiwanie.
cy.get('.search-submit').click()
To pozwala nam na interakcję by znaleźć się na stronie z wyszukiwaną frazą – „JMeter”.
Wyszukiwanie tekstu na stronie
W ramach naszego tekstu wyszukamy czy na stronie znajduje się odpowiedni tekst. Chcemy go wyszukać by potwierdzić, czy w ramach wyszukiwania pojawił się określony artykuł o JMeterze.
cy.contains('JMeter nagrywanie ruchu w przeglądarce')
Dzięki temu możemy potwierdzić czy znajdujemy się w tym miejscu w którym chcieliśmy.
Oczekiwanie
W ramach pisanych przez nas testów, może zaistnieć konieczność oczekiwania na jakiś element czy wykonanie interakcji. Szeroko o tym twórcy Cypressa rozpisują się tutaj. My w ramach naszego testu polecimy oczekiwanie 200 ms by wykonać dalsze czynności.
cy.wait(200)
Nasz pierwszy test jest gotowy
Dzięki tym kilku czynnościom w ramach testu automatycznego możemy sprawdzić na witrynie czy poprawnie można:
a) uruchomić stronę;
b) sprawdzić nagłówek;
c) sprawdzić czy logo jest na stronie;
d) kliknąć na pierwszy element w karuzeli
e) nacisnąć na wyszukiwarkę
f) wpisać tekst i zlecić wyszukiwanie tekstu
g) sprawdzić czy został wyszukany oczekiwany przez nas artykuł
describe('My First Test', () => {
it('finds the content "type"', () => {
cy.viewport(1920,1080)
cy.visit('https://www.dlatesterow.pl/')
cy.wait(200)
cy.get('.custom-logo').should('be.visible')
cy.get('.active > .np-single-slide-wrap > .np-slide-thumb > a > .attachment-news-portal-slider-medium').click()
cy.get('.search-main > a > .fa').click()
cy.get('.search-field').type('JMeter')
cy.get('.search-submit').click()
cy.contains('JMeter nagrywanie ruchu w przeglądarce')
})
})
Oczywistym jest, że nagrody za clean code za to nie otrzymamy, jednak na początek chciałem przedstawić Wam możliwość szybkiego napisania testu z użyciem Cypressa.
Podpowiedź
W trakcie gdy sporządzamy test w Visual Code Studio, swoje postępy możemy zapisywać na bieżąco. W przypadku pierwszego uruchomienia testu z runnera, możemy nie zamykać okna przeglądarki z sesji Cypressa. Taka czynność spowoduje, że w przypadku zapisania testu w VCS test od razu zostanie uruchomiony i zweryfikowany czy działa poprawnie.
Podsumowanie
Cypress.io pierwszy test automatyczny to wprowadzenie dla osób chcących rozwijać się z wykorzystaniem Cypressa. Postaw pierwsze kroki, czytaj dokumentację i testuj bez przeszkód. Wszelkie artykuły związane z Cypress IO znajdziecie w dedykowanym dziale.
