Wyślij zapytanie Dołącz do Sii

Cypress jest narzędziem wykorzystywanym do automatyzacji testów. 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 więcej zespołów i firm nie tylko przygląda się temu narzędziu, ale także korzysta z niego na co dzień, dzięki czemu jego popularność 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 jego wypróbowania.

Jak działa Cypress?

Twórcy narzędzia wyszli z założenia, że Cypress ma być frameworkiem zawierającym 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.

Rosnąca popularność i rozwój narzędzia

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 wymaga weryfikacji. Im więcej podmiotów korzysta z danego narzędzia, tym jego rozwój okazuje się bardziej stabilny.

Lista firm, które korzystają z Cypressa w sposób komercyjny, stale powiększa się. Na poniższej grafice znajduje się kilka z nich. 

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

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% i obejmuje również Electrona, Brave’a.

Zalety Cypressa

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 liczba 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 kilku 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.

Raporty z testów Cypress
Ryc. 4 Raporty z testów Cypress

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. Problem nie jest oficjalnie rozwiązany, a w tym wątku wiele osób dzieli się swoimi sposobami na poradzenie sobie z tą kontrolką.

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 z powodu znajomości właśnie JS lub 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ę:

Ryc. 5 3 1024x122 - 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.

Możliwości korzystania z Cypressa
Ryc. 6 Możliwości korzystania z Cypressa

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.

Uruchamianie Cypressa
Ryc. 7 Uruchamianie Cypressa
Cypress first demo
Ryc. 8 Cypress first demo

Pierwszy test

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

fragment kodu

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.
Przykład testu w Cypress
Ryc. 9 Przykład testu w Cypress

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ąś asercję, 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ł.

Akcje wykonane podczas testów w Cypressie
Ryc. 10 Akcje wykonane podczas testów w Cypressie

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, charakterystyczne dla frameworku, szczególnie jeżeli 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 natomiast 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.

***

Jeśli chcesz wiedzieć, dlaczego rozwój i nauka nowych języków oprogramowania przydają się na stanowisku Test Architecta oraz co Michał ceni w pracy, obejrzyj koniecznie jego nagranie:

4.5/5 ( głosy: 19)
Ocena:
4.5/5 ( głosy: 19)
Autor
Avatar
Michał Ślęzak

Test Architect 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, czytanie książek i oglądanie seriali.

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Może Cię również zainteresować

Pokaż więcej artykułów

Bądź na bieżąco

Zasubskrybuj naszego bloga i otrzymuj informacje o najnowszych wpisach.

Otrzymaj ofertę

Jeśli chcesz dowiedzieć się więcej na temat oferty Sii, skontaktuj się z nami.

Wyślij zapytanie Wyślij zapytanie

Natalia Competency Center Director

Get an offer

Dołącz do Sii

Znajdź idealną pracę – zapoznaj się z naszą ofertą rekrutacyjną i aplikuj.

Aplikuj Aplikuj

Paweł Process Owner

Join Sii

ZATWIERDŹ

This content is available only in one language version.
You will be redirected to home page.

Are you sure you want to leave this page?