W poprzednim wpisie wspomniałam o narzędziu Cypress, które umożliwia nam uruchamianie testów z poziomu przeglądarki dzięki czemu bardzo przyjemnie się z nim pracuje. Dziś pokażę Wam jak pisać testy i jak je uruchamiać.
Wstęp do Cypress zapewne brzmiał dość zagadkowo, więc dziś skupimy się na praktycznych przykładach. Przedmiotem naszych testów będzie bardzo prosta aplikacja napisana przeze mnie w React. Gotowy kod znajdziecie na moim Githubie.
Nasz pierwszy pierwszy test
Aplikacja to mała ToDo lista, która wygląda tak:
Następnie dodajemy jakieś elementy do listy ToDo:
Kliknięcie przycisku Mark as Done powoduje usunięcie elementu z listy.
W moim przykładzie skorzystałam z bazowego projektu dostarczanego przez React – utworzonego za pomocą komendy create-react-app
. Więcej na jej temat znajdziecie tutaj. Jest to bardzo wygodny sposób na utworzenie nowej aplikacji React. Przy czym musicie pamiętać, że Cypress może działać z dowolną aplikacją.
Projekt nosi nazwę CypressDemo. Zatem by zacząć przygodę z Cypress musimy najpierw w katalogu projektu wywołać polecenie npm init
a następnie npm install cypress --save-dev
. To spowoduje, że w naszym pliku package.json pojawi się nowy wpis. Na przykład u mnie wygląda to tak:
Jeśli macie zainstalowane inne biblioteki w sekcji devDependencies, może to wyglądać nieco inaczej. Generalnie ważne jest, żeby w tym kroku Cypress się tam pojawił. Dodatkowo w drzewku projektu powinien pojawić się folder o nazwie Cypress. Tak jak na przykład tutaj:
Mamy tu kilka podfolderów, ale dzisiaj skupimy się tylko na folderze integration, w którym możecie znaleźć wiele przykładowych testów i zapoznać się z działaniem narzędzia zanim zaczniecie pisać swoje testy. Jednak dla prostoty tego tutoriala usunęłam wszystkie pliki z tego folderu i utworzyłam jeden nowy o nazwie todo.spec.js
Zastanówmy się teraz jakie funkcjonalności naszej listy ToDo są dla nas najważniejsze i które chcielibyśmy otestować?
Głównym zadaniem ToDo listy jest gromadzenie zadań, które chcemy wykonać. Zatem będzie to pierwszy test na którym się skupimy. Pisanie testu zaczynamy od utworzenia grupy testów za pomocą describe. Naszą grupę nazwiemy “ToDo test”
Nasz pierwszy test będzie miał postać:
Co tutaj się dzieje?
W nawiasie zaraz po słowie kluczowym it
mamy opis co nasz test powinien robić. Generalnie dobrze by było, gdyby opis ten był kontynuacją zdania następująca po słowie it. Czyli własnie tak jak tutaj “It shows item on the list after adding”. Następnie mamy funkcję, która zawiera instrukcje wywoływane w ramach tego testu.
cy.visit
to instrukcja która pozwala Cypress otworzyć stronę o podanym adresie.
Za pomocą instrukcji
cy.get('input[type=text]')
wyszukujemy pole tekstowe.
Tutaj jest to o tyle proste, że jest to jedyne pole na stronie. Nie mniej Cypress dostarcza nam sposobów na znalezienie pola również po przypisanym mu id lub miejscu w drzewie DOM.
Natomiast instrukcja type
, którą wywołujemy na wyniku powyższego wyszukiwania pozwala nam zasymulować wpisanie do pola tekstowego tekstu ‘ToDo 1’.
Kolejny krok i kolejna instrukcja
cy.get('button').click()
to symulacja naciśnięcia przycisku. Tutaj też jest to o tyle proste, że ponieważ lista jest pusta na starcie strony, to jest to w tym momencie jedyny przycisk w drzewie DOM.
Następnie szukamy listy w której spodziewamy się znaleźć element własnie dodany.
Element ten powinien zawierać tekst ToDo 1, co właśnie sprawdzamy.
cy.get('ul > li').should('contain', 'ToDo 1');
Jak teraz sprawić by Cypress ten test uruchomił?
Musimy w konsoli, będąc w katalogu projektu, wpisać polecenie:
npx cypress open
.
Wówczas zobaczymy okno z listą plików z naszymi testami. Jeśli podobnie jak ja usunęliście wszystkie inne pliki dostarczone automatycznie przez Cypress, i utworzyliście todo.spec.js, to będziecie go mieć na tej liście. W przeciwnym razie będziecie mieć na niej wszystkie przykładowe pliki, które dostarcza Cypress wraz z instalacją. Kiedy klikniemy na plik todo.spec.js uruchomią się testy w nim zawarte i ich rezultat zobaczymy w bardzo przyjemnej formie w oknie przeglądarki.
W lewej części okna widać nasz test oraz kroki jakie w ramach jego uruchamiania zostały wykonane:
Z kolei po prawej mamy rezultat uruchomienia tych kroków:
W ten oto sposób napisaliśmy nas pierwszy test uruchamiany za pomocą Cypress. W następnej części serii stworzymy kolejne i dowiemy się nieco więcej o opcjach jakie daje nam graficzna prezentacja testów dostarczana przez Cypress.