W artykule wyjaśniamy czym jest Cypress.io i jak testerzy mogą w prosty sposób z niego korzystać. Dowiesz się m.in. jak skonfigurować środowisko testowe.
W poniższym artykule zamierzam wyjaśnić Wam czym jest Cypress.io i jak w prosty sposób z niego korzystać. Dowiecie się między innymi:
- Jak skonfigurować środowisko testowe;
- Jak napisać swój pierwszy test z wykorzystaniem podstaw JavaScript;
Czym jest Cypress.io i dlaczego warto z niego korzystać?
Cypress to open source’owe narzędzie do automatyzacji testów funkcjonalnych.
Działa w oparciu o platformę Node.js, co oznacza, że kod do naszych testów pisany jest w języku JavaScript.
Cypress oferuje bogaty wachlarz możliwości w zakresie tworzenia testów automatycznych. Dzięki zastosowaniu JS, możemy pisać nasze testy w prostej, krótkiej i czytelnej formie.
Cypress posiada również wbudowane narzędzie do debugowania testów w czasie rzeczywistym. W trakcie trwania testu debugger pokazuje krok po kroku, która faza testu jest aktualnie przeprowadzana i jaki jest jej rezultat. Po zakończeniu testu możemy przejść do dowolnego kroku, którego jesteśmy ciekawi i przejrzeć co tam zaszło. Zapewnia to zarówno niesamowitą wygodę, jak i swobodę w pisaniu testów. Pozwala też zmieniać kod testu i sprawdzać jego wyniki w czasie rzeczywistym.
Konfiguracja środowiska testowego
Konfiguracja Cypressa jest bardzo prosta. Pierwszym krokiem jest pobranie i zainstalowanie Node.js.
Po zainstalowaniu Node’a przenosimy się do konsoli CMD. W tejże konsoli wpisujemy następującą komendę:
C:\Users\TestArmy>npm install cypress
Po zakończonej instalacji Cypress jest gotowy do użycia.
Odpalić Cypressa możemy na kilka sposobów. Najprostszym z nich jest wyszukanie na dysku komputera zainstalowanego programu i włączenie go poprzez kliknięcie ikony aplikacji. My jednak, będąc nadal w oknie konsoli świeżo po zainstalowaniu aplikacji, wykorzystamy komendę:
C:\Users\TestArmy>npx cypress open
Po jej wpisaniu nasz Command line powinien zacząć przetwarzać procesy i po niedługiej chwili powinno pojawić się nowe okno z gotowym do użycia Cypressem.
Twórcy narzędzia zadbali o użytkowników i wyposażyli program w paczkę przykładowych testów pokazujących jakie możliwości ma to narzędzie. Każdy z pokazanych wyżej plików zawiera testy, które po włączeniu odpalają przeglądarkę, w tym przypadku jest to Chrome 81, i wykonują testy zawarte w pliku.
Napiszmy swój pierwszy test
Mamy już przygotowane narzędzie do automatyzacji. Teraz potrzebna jest nam aplikacja, którą chcemy przetestować. W tym artykule do celów czysto szkoleniowych wykorzystamy http://automationpractice.com/index.php. Jest to strona przeznaczona właśnie do nauki pisania testów automatycznych.
Mając aplikację możemy zabrać się do pracy. Pierwszym krokiem będzie wybór funkcjonalności do przetestowania. Każdy w zależności od potrzeb może wybrać co innego. My w tym przypadku zajmiemy się wyszukaniem produktu.
Zaczynajmy! Pierwszym co musimy zrobić jest stworzenie pliku js, w którym będziemy pisać nasz test. Jeśli korzystacie z jakiegoś IDE (ja obecnie korzystam z Webstorma) to otwórzcie w swoim IDE główny katalog Cypressa, a następnie folder Integration. Powinien znajdować się tam inny katalog Examples, a w nim przykładowe testy. Teraz stwórzmy własny katalog MyTests, gdzie będziemy zamieszczać nasze testy. W katalogu MyTests klikamy PPM na nazwę katalogu, następnie tworzymy plik sample_spec.js.
Mając gotowy plik, możemy wreszcie przystąpić do pracy. Zacznijmy od sprawienia, żeby Cypress wszedł na stronę, którą chcemy przetestować.
Do wywołania strony musimy skorzystać z wartości context, wywołując obiekt Window. Następnie dodajemy “beforeEach” i wskazujemy Cypressowi co ma zrobić poprzez wpisanie “cy.visit()”, a następnie podając wewnątrz nawiasu adres strony adres strony w apostrofach. W ten sposób, zanim Cypress zrobi cokolwiek innego, najpierw wejdzie na naszą stronę.
Kiedy strona zostanie załadowana, wprowadzamy do wyszukiwarki frazę, której będziemy szukać. W tym celu klikamy PPM na pole wyszukiwarki i wybieramy “Zbadaj element”. Następnie sprawdzamy nazwę klasy elementu wyszukiwarki. Teraz wystarczy korzystając z komend “cy.get()” znaleźć element na stronie i “cy.type()” wpisać go do wyszukiwarki.
Ostatnim krokiem będzie wyszukanie tej frazy. W tym celu ponownie musimy znaleźć przycisk wyszukiwania, żeby zatwierdzić akcję. W tym przypadku kolejny raz wykorzystując “cy.get()” wprowadzimy do nawiasu nazwę klasy przycisku w apostrofach i skorzystamy z funkcji “click()”.
Tym oto sposobem napisaliśmy nasz pierwszy test. Kilka krótkich linijek wystarczyło, aby Cypress wykonał za nas operację wyszukiwania. A oto efekt:
Nasz test wyświetla się na zielono. Oznacza to, że został wykonany pomyślnie i nie napotkał żadnych błędów.
Podsumowując
Cypress to doskonałe narzędzie do automatyzacji. Jest prosty w obsłudze, czytelny i przyjazny dla użytkownika. Posiada bogatą dokumentację i wciąż pojawiają się jego coraz lepsze wersje. Jest świetnym narzędziem zarówno dla osób, które miały już styczność z narzędziami do automatyzacji, jak i dla tych, którzy dopiero chcą zacząć swoją przygodę z testami automatycznymi.
Link do dokumentacji: https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell
