Testing

Cypress – dlaczego warto zainteresować się tym frameworkiem?

Lipiec 12, 2021 0
Podziel się:

Cypress jest narzędziem wykorzystywanym do automatyzacji testów. To narzędzie pozwala automatyzować testy interfejsu użytkownika, umożliwia automatyzowanie testów integracyjnych, a także łączy oba podejścia np. tworząc dane testowe poprzez API i sprawdzając, czy poprawne dane wyświetlają się użytkownikowi na interfejsie graficznym.

Od jakiegoś czasu coraz częściej można spotkać Cypressa wśród narzędzi wymaganych przez pracodawców w ogłoszeniach o pracę. Wynika to z faktu, że coraz więcej zespołów / firm nie tylko przygląda się temu narzędziu, ale także korzysta z niego na co dzień. Popularność tego frameworka rośnie bardzo szybko. W dzisiejszym wpisie pokażę Ci, dlaczego warto nim się zainteresować. Opowiem o jego zaletach i wadach, a także przedstawię, jak wygląda przykładowy test. Po przeczytaniu poniższego artykułu będziesz miał większe rozeznanie, czy to narzędzie może się u Ciebie sprawdzić i mam nadzieję, zachęci Cię do spróbowania użycia go.

 Jak działa Cypress?

cypress 1 - Cypress – dlaczego warto zainteresować się tym frameworkiem?

Źródło: https://www.cypress.io/

Twórcy narzędzia wyszli z założenia, że Cypress ma być frameworkiem, który zawiera wszystkie komponenty potrzebne do sprawnego pisania testów automatycznych. Zamiast instalacji kilku różnych bibliotek, tak ja w przypadku Selenium, Cypress oferuje rozwiązanie, które od zainstalowania jest w pełni funkcjonalne i nie wymaga dodatkowych komponentów. Oczywiście istnieje możliwość rozszerzania Cypressa np. poprzez użycie różnego rodzaju pluginów, które pozwalają na realizację dodatkowych zadań m.in. dokonywanie podczas testów wizualnej regresji.

Popularność i rozwój narzędzia

Cypress jest coraz popularniejszym narzędziem. Dowodem na to są poniższe argumenty.

Ważnym czynnikiem przy doborze nowego narzędzia do projektu jest sprawdzenie, czy istnieją organizacje, które obecnie korzystają z tego narzędzia komercyjnie. Jest to kluczowy aspekt zwłaszcza w kwestii nowych narzędzi, dlatego powinniśmy to zweryfikować. Im więcej podmiotów korzysta z danego narzędzia, tym jego rozwój okazuje się być stabilniejszy. Lista firm, które korzystają z Cypressa w sposób komercyjny, stale powiększa się. Na poniższej grafice znajduje się kilka z nich. cypress logotypy - Cypress – dlaczego warto zainteresować się tym frameworkiem?

 

Źródło: https://www.cypress.io/

 

Informacje pochodzące z GitHuba pozwalają dostrzec, że wokół Cypressu gromadzi się bardzo liczna i aktywna społeczność.

cypress 3 - Cypress – dlaczego warto zainteresować się tym frameworkiem?

Źródło: https://www.crunchbase.com/organization/cypress-io

 

Kolejnym ważnym aspektem, który decyduje, czy dane narzędzie warto brać pod uwagę, jest jego rozwój komercyjny. Pod koniec 2020 roku Cypress otrzymał finansowanie w wysokości 40 milionów dolarów. Wybierając narzędzie, zwłaszcza typu open source, warto zwrócić uwagę na to, czy narzędzie jest dostępne w poszerzonej (płatnej) wersji oraz czy posiada finansowanie. Dlaczego to jest tak ważne? Rozwój narzędzi jest bardzo kosztowny, a brak finansowania z funduszy bądź od klientów uniemożliwi jego rozwój i utrzymanie. Oczywiście nasze prognozy nie muszą się zawsze sprawdzić. Warto jednak zdawać sobie sprawę z potencjalnego zagrożenia.

Jakie przeglądarki są wspierane?

Od początku działania, Cypress oferował wsparcie tylko i wyłącznie dla Chrome’a. Z czasem jednak, zaczął wspierać również inne popularne przeglądarki, w tym Firefoxa, co jest najważniejszą zmianą. Dzięki temu, że Cypress pokrywa Firefoxa, Chrome’a oraz Edge’a możemy automatyzować testy dla około 84% użytkowników w Polsce. Odsetek pokrycia rynku może się różnić pomiędzy krajami, jednak wartości oscylują w okolicy 85%. Chrome, Firefox, Edge, Electron, Brave – te wszystkie przeglądarki wspiera Cypress.

Zalety Cypress

Jasna dokumentacja i aktywna społeczność
Ważnym czynnikiem, na który warto zwrócić uwagę jest to, że Cypress ma bardzo jasno opisaną dokumentację użycia tego narzędzia. Duża ilość przykładów, które pokrywają realne, komercyjne sytuacje, pomagają szybciej wdrożyć się i zrozumieć, jak korzystać z narzędzia. Dodatkowo społeczność Cypressa jest aktywna, czego efektem jest m.in. stworzenie dość zaawansowanego projektu do nauki automatyzacji, który znajduje się na Githubie.

Przyjaźniejsza obsługa Waitów
Cypress posiada mechanizm, obsługujący dynamiczne czekanie (waity) na elementy, akcje znajdujące się na stronie, którą testujemy. W większości sytuacji jest to mechanizm, który z sukcesem spełnia swoją rolę. Dostępne są również metody, które pozwalają nam wskazać określone warunki, gdy z jakiegoś powodu potrzebujemy poczekać na element lub akcję. Istnieje możliwość ustawienia globalnego maksymalnego czasu oczekiwania na określone elementy, domyślnie są to 4 sekundy. Nie będzie to czekanie „na sztywno”, ale czekanie dynamiczne, w zależności od tego, jak strona będzie się ładować. Poza domyślnym waitem mamy możliwość na poczekanie np. na to jak określone zapytanie się zakończy.

Obsługa zapytań HTTP
Cypress pozwala na obsługę zapytań HTTP podczas naszej pracy. Funkcjonalności pozwalają na modyfikację zapytania, pobieranie danych, dodawanie mocków i stubów, a nawet na opóźnianie określonych odpowiedzi. Jest to bardzo przydatne, gdyż podczas wykonywania testów, możemy korzystać z API, strony czy np. generować potrzebne dane testowe z API, a nie przy pomocy UI.

Raporty z testów – zrzuty ekranu / Video / Logi
Cypress dostarcza kilka mechanizmów, pozwalających na wybór sposobu logowania akcji, podczas uruchamiania naszych testów. Mamy możliwość dodawania zrzutów ekranów z testów, co więcej, w uruchamianym teście zrzut ekranu zawiera informacje na temat wykonanych akcji do momentu jego utworzenia.

cypress 10 - Cypress – dlaczego warto zainteresować się tym frameworkiem?

Poza zrzutem ekranu, który zawiera więcej informacji niż standardowy zrzut ekranu np. z Selenium, istnieje możliwość nagrywania wideo z testów. Cypress oferuje swój Cypress Dashboard, w którym logi i rezultaty z testów mogą być prezentowane.Jest to funkcjonalność dostępna w komercyjnej części Cypressa. Przy darmowym koncie dostęp do dashboardu jest w wersji okrojonej (obowiązują limity na użytkowanie narzędzia).

Wady Cypressa

Utrudnienia z Iframe’ami
Praca z iframe’ami rzeczywiście jest utrudniona. Cypress ma znacznie więcej problemów niż Selenium. Mamy możliwość skorzystania z dodatkowych bibliotek, które pomagają w pracy z iframe’mi np. “cypress-iframe”, jednak nie zawsze te rozwiązania działają prawidłowo. Sam automatyzowałem jeden z elementów w wordpressie poprzez Cypressa i Selenium. W Cypressie było to znacznie bardziej skomplikowane, jednak potrafiłem znaleźć rozwiązanie. Sam problem z iframemami poruszony jest w tym wątku na githubie.

Zachęcam do śledzenia tego forum, jeżeli sami automatyzujecie aplikację, która korzysta z iframe’a. Sam problem nie jest oficjalnie rozwiązany, a w tym wątku wiele osób dzieli się swoimi sposobami na poradzenie sobie z tą kontrolką (iframe’m).

Wsparcie tylko dla JS/TS
Nie dla każdego jest to wada. Ja umieszczam to jako wadę dlatego, że Selenium WebDriver  wspiera praktycznie wszystkie języki programowania. Inną rzeczą wartą wspomnienia jest to, że często JS jest trudniejszym językiem programowania dla osób początkujących. Z innej strony to, że JS/TS jest używany może również być odebrane jako zaleta, a to dlatego, że większość full stack developerów korzysta z tych języków programowania na co dzień i skorzystanie z ich pomocy będzie jak najbardziej możliwe. Innym trendem jest to, że to właśnie programiści piszą testy w Cypressie przez to, że znają właśnie JS / TS. Reasumując, dla jednych może być to wada, a dla jeszcze innych zaleta.

Instalacja Cypressa

Do instalacji Cypressa potrzebujemy npm lub yarna i node js. Podczas tworzenia tego artykułu miałem następującą wersję:

cypress 11 - Cypress – dlaczego warto zainteresować się tym frameworkiem?

Zawsze zachęcam, w miarę możliwości do korzystania z najnowszej, aktualnie dostępnej wersji.

aZM3Vv1CGY - Cypress – dlaczego warto zainteresować się tym frameworkiem?

npm install cypress --save-dev

 

Po zainstalowaniu Cypressa przechodzimy do folderu „integration\examples”, który zawiera kilkanaście przykładów, prezentujących możliwości korzystania z Cypressa.

cypress 5 - Cypress – dlaczego warto zainteresować się tym frameworkiem?

W tym miejscu znajdują się przykłady, które pokrywają większość standardowych, codziennych akcji, które potrzebujemy obsłużyć podczas automatyzacji testów.

Uruchamianie Cypressa

Żeby uruchomić Cypressa, korzystamy z następującej komendy:

                                         ./node_modules/.bin/cypress open

 

Po tym kroku, ukaże się nam okno pozwalające również na ręczne uruchamianie testów. Naturalnie, istnieje również możliwość uruchomienia testów wprost z konsoli np. w Jenkinsie, czy podczas codziennej pracy, gdy nie chcemy korzystać z okienkowego sposobu uruchamiania testów.

cypress 6 - Cypress – dlaczego warto zainteresować się tym frameworkiem?cypress 7 - Cypress – dlaczego warto zainteresować się tym frameworkiem?

Pierwszy test

W tym miejscu zacznę od omówienia dosyć prostego przykładu, który znajduje się w pliku actions.spec.js. W tym pliku znajduje się test, który wypełnia formularz i go wysyła. Na końcu test sprawdza, czy komunikat, którego się spodziewaliśmy, pojawił się.

cypress 8 - Cypress – dlaczego warto zainteresować się tym frameworkiem?

Na potrzeby artykułu, usunąłem pozostałe przykłady z tego pliku, żeby móc na jednym zrzucie ekranu, zaprezentować cały działający test.

Plik zaczyna się od  /// <reference types=”cypress” /> – pozwala uzyskiwać podpowiedzi w kodzie w trakcie jego pisania.

Test w Cypressie zaczyna się od it(‘’) – jest to notacja, która wynika z tego, że Cypress pod spodem korzysta z test runnera – Mocha. Słowo “only” dodawane jest przez Visual Studio Code, by uruchamiać jeden test w danym momencie.

Cy.get(‘.action-form’) – umożliwia obsługę elementu na podstawie selectora, który przekazywany jest jako parametr w metodzie.

Submit() – pozwala wysłać określony formularz.

.find() – pozwala na wyszukanie konkretnego elementu z listy dostępnych elementów. Oprócz tego, jeżeli nasza strona korzysta z Shadom DOMa, to mamy możliwość wyszukania takich elementów.

.type() – pozwala wpisywać określony ciąg znaków w dany element.

.should() – służy w tym miejscu jako asercja do testu, która pozwala na sprawdzenie, czy tekst walidacji w tym miejscu zawiera oczekiwany tekst. Rzecz jasna, poza tego typu asercją występuje możliwość skorzystania z innych asercji. Cypress ma to dobrze opisane w swojej dokumentacji.

cypress 10 - Cypress – dlaczego warto zainteresować się tym frameworkiem?

Po uruchomieniu testu, w lewej części strony widzimy wszystkie akcje, które zostały wykonywane podczas testu. Jest to przydatna funkcjonalność, która pozwala sprawdzić, czy wszystko odbywało się tak jak oczekiwaliśmy. Jeżeli test zawiera jakąś asercje, to informacja wyświetla się na zielono. Gdy do testu wprowadziłem celowo błąd w asercji, to komunikat co poszło nie tak, wyświetla się na czerwono. Również w tym miejscu pokazany jest kod, w którym błąd wystąpił.

cypress 12 - Cypress – dlaczego warto zainteresować się tym frameworkiem?

Podsumowanie

W dzisiejszym artykule przedstawiłem, czym jest Cypress oraz jakie są jego zalety i wady. Zachęcam do sprawdzenia tego narzędzia osobiście. Jeżeli myślisz o użyciu Cypressa komercyjnie, zwróć uwagę na wady, którymi charakteryzuje się Cypress i jeżeli np. masz aplikacje, która korzysta w dużej ilości z kontrolek typu iframe, warto sprawdzić, czy Cypress poradzi sobie w tej sytuacji. Jeżeli uważasz, że nie masz potrzeby wprowadzenia nowego narzędzia do projektu, to zastanów się, czy nie warto pomyśleć o nauce tego narzędzia, w celu poszerzenia swoich umiejętności.

4.8 / 5
Tagi:
Kategorie: Testing
Michał Ślęzak
Autor: Michał Ślęzak
Test Development Engineer w Sii Polska. Automatyzacją testów zajmuje się od kilku lat. Prowadzi bloga: testingplus.me oraz jest jednym z liderów PTaQ.org i prowadzącym podcastu TestingParrot: jednego z pierwszych podcastów o testowaniu w Polsce. Pisał dla geek.justjoin.it / blog.testuj.pl / Programista Magazyn. Poza pracą lubi rozwój osobisty, czytać książki i oglądać seriale.

Imię i nazwisko (wymagane)

Adres email (wymagane)

Temat

Treść wiadomości

Zostaw komentarz