Testy E2E – wprowadzenie do Cypress

Sebastian Szemer | Quality Assurance | 09.11.2022

Cypress

Przez lata to Selenium wyznaczało standardy w automatyzacji testów aplikacji przeglądarkowych. Jednak wielu testerów podkreśla, że to narzędzie nie zawsze radzi sobie w przypadku testów nowoczesnych aplikacji webowych. W ostatnim czasie spośród dostępnych frameworków popularność zaczął zyskiwać Cypress – narzędzie do testów end-to-end oferujące prostą składnię i niski próg wejścia. Czy jest dla każdego? Jakie są jego zalety, a w czym ustępuje Selenium? Sprawdź, w jakim projekcie warto postawić na to narzędzie.

Czym jest Cypress?

Cypress to framework open source do tworzenia testów end-to-end i testów komponentów aplikacji webowych. Stworzony przez frontend developerów dla frontend developerów, dzięki swojej prostocie i przyjaznemu debuggerowi stał się popularny także w świecie testerskim.

Jego główne zalety to czytelna składnia oraz łatwa instalacja, po której od razu możemy pisać pierwsze testy i tym samym łatwo zweryfikować działanie aplikacji. Cypress cechuje się szybkością pisania i wykonywania testów, zapewniając przy tym ich niezawodność dzięki automatycznemu czekaniu na elementy na stronie.

Wykorzystanie dodatkowych bibliotek 

Stos Cypressa korzysta z kilku dość popularnych bibliotek testowych do asercji czy generowania raportów. Są to:  

  • Mocha – pozwala zbudować raport JUnit lub TeamCity. Istnieje mnóstwo pluginów do biblioteki Mocha, dzięki czemu z pewnością wygenerujemy raport w formacie, jakiego potrzebujemy.
  • Chai – wbudowana biblioteka do asercji.
  • Sinon – framework, którego metody Cypress wykorzystuje w cy.spy, cy.stub, czyli w monitorowaniu wywołań funkcji.

Jest kilka pluginów, które nie są wbudowane, ale uważam, że warto je zainstalować. Mam na myśli m.in.:

  • Cypress-recurse – plugin ułatwiający pisanie funkcji rekurencyjnych.
  • Cypress-tab – plugin dodający możliwość wysyłania klawisza ‘TAB’ do przeglądarki.
  • Cypress-xpath – w Cypress szukamy elementów za pomocą selektorów CSS, ten plugin pozwoli korzystać z xpath.

Cypress vs Selenium

To nie jest tak, że jakieś rozwiązania są lepsze lub gorsze, ale wszyscy wiemy, że Selenium jest po prostu przestarzałe i nie radzi sobie najlepiej w przypadku witryn internetowych z nowoczesnym frontem, gdzie elementy w DOM są dynamicznie podmieniane zamiast ładowania całego DOM od nowa.

To największa wada Selenium i głównie w kontrze do niej powstał Cypress, stawiając na stabilność testów nowoczesnych aplikacji frontendowych. Początkowo miał być wsparciem dla frontend developerów piszących testy integracyjne, dziś skupia się na testach end-to-end i testach komponentów. Dzięki przejrzystej składni narzędzie szybko zdobyło zaufanie wielu testerów.

Testy E2E – wprowadzenie do Cypress - 2020.10.21 jpro cover pact contract testing 1

Piramida testów: dowiedz się, jak testować, żeby testy przynosiły zysk.

Przejdź do artykułu

Selenium ma sporą przewagę, jeśli chodzi o obsługiwane języki programowania. Jest ono dostępne dla Javy, Pythona, C#, JavaScript i Ruby. Cypress z założenia obsługuje tylko JavaScript (po konfiguracji także TypeScript), co może być problemem, gdy w zespole bądź firmie brakuje odpowiednich kompetencji.

Selenium jest na rynku od lat i choć ma wiele wad, to są one dobrze znane, a internet jest pełen poradników, jak sobie z nimi radzić. Selenium wyznaczyło pewien standard i przez lata wiodło prym w automatyzacji testów aplikacji przeglądarkowych, ale nowe czasy wymagają nowych rozwiązań, a Cypress z pewnością jest godny uwagi.

Testy w Cypress są wykonywane szybko i stabilnie, a ich pisanie to, moim zdaniem, wręcz przyjemność (w przeciwieństwie do Selenium, wystarczy stworzyć lokator i można na obiekcie wykonywać akcje – w Selenium trzeba mieć lokator i Factory, żeby to działało).

Obsługuje on wszystkie najważniejsze przeglądarki, takie jak Chrome, Edge, Firefox czy nawet Webkit. Co ciekawe, do wyboru mamy też Brave, a domyślną przeglądarką jest Electron. Przeglądarki te są zawarte w pakiecie, więc nie trzeba o nie dbać, jak w przypadku Selenium. Należy jednak pamiętać o aktualizacji Cypressa, jeśli chcemy mieć ich najnowsze wersje.

Testy E2E – wprowadzenie do CypressTesty E2E – wprowadzenie do Cypress

Nasz pierwszy test w Cypress

Aby zacząć pisać test w Cypress, możemy użyć aplikacji standalone (do pobrania na oficjalnej stronie Cypress.io) lub stworzyć projekt poprzez komendę npm (po uprzedniej instalacji):

mkdir cypress 
cd cypress 
npm init 
npm install cypress --save-dev 

Po pierwszym uruchomieniu utworzony zostaje folder /cypress – a w nim kolejne:

  • do przechowywania testów e2e,
  • fixtures dla wszelkich testaliów,
  • downloads, screenshots,
  • oraz support dla różnych helperów.

Otwieramy więc Test Runner, wybieramy typ testów e2e i wybieramy domyślną przeglądarkę.

npx cypress open 
Testy E2E – wprowadzenie do Cypress - screen1
Testy E2E – wprowadzenie do Cypress - screen2
Testy E2E – wprowadzenie do Cypress - screen3

Następnie stworzymy nowy plik firstSpec.cy.js w folderze e2e, a w jego treści umieszczamy poniższy kod, który otwiera stronę, wprowadza nazwę użytkownika i hasło, loguje do aplikacji, a następnie weryfikuje skuteczność zalogowania poprzez sprawdzenie widoczności elementu.

describe('My First Test', () => { 

  it('Does not do much!', () => { 

    cy.visit('http://zero.webappsecurity.com/login.html');  
    cy.get('#user_login').type('username');  
    cy.get('#user_password').type('password'); 
    cy.get('[name="submit"]').click(); //klikamy submit 
    cy.get('#account_summary_tab').should('be.visible'); 

  }) 

}); 

Test możemy uruchomić w konsoli przy pomocy komendy:

npx cypress run 

lub w debuggerze:

npx cypress open 
Testy E2E – wprowadzenie do Cypress - screen4

Zalety Cypressa

  • Prosta instalacja

Jeśli kiedykolwiek konfigurowaliście JBehave, to z pewnością docenicie prostotę instalacji Cypressa i to, jak szybko można po niej zacząć pisać wartościowe testy. Nie oferuje tego żaden inny, nawet najbardziej nowoczesny, framework do testów e2e w przeglądarce.

  • Niski próg wejścia

Mimo że Cypress działa tylko w połączeniu z JavaScript, wcale nie jest to dużą przeszkodą dla chcących z niego korzystać. Sam nie miałem z JavaScript wiele wspólnego, poznając Cypress. Jednak aby zacząć pisać testy, wystarczy poznać podstawowe komendy, których składnia jest bardzo prosta i naturalna. Możliwość łączenia komend pozwala na synchroniczne ich wykonanie, co sprawia, że testy są nadzwyczaj stabilne (dla przykładu, klikamy w dany input, czyścimy jego zawartość, wpisujemy text, po czym klikamy button i weryfikujemy, czy owy button zmienił swój text).

  • Sprawdzanie stanu elementów

Cypress domyślnie sprawdza, czy szukany element znajduje się w DOM, czy jest widoczny, zakończył animacje. Pozwala to usunąć z testu zbędny kod związany z czekaniem, a jeśli jakiś element ładuje się dłużej, to po prostu zwiększamy danej komendzie timeout. Dzięki temu testy są jednocześnie czytelne i stabilne.

  • Narzędzia

Jedną z moich ulubionych cech Cypressa jest to, że dostarcza sporo narzędzi przydatnych w testach, jak cy.fixture czy cy.intercept. Pierwsze pozwala na zarządzanie danymi testowymi czy to PDF, który chcemy wgrać do aplikacji, czy to plik JSON z payloadem do API bądź danymi testowymi w podejściu DDD. Drugie zaś pozwala na przechwytywanie ruchu sieciowego, a nawet mockowanie odpowiedzi z backendu. Jest to wielce przydatne, gdy czekamy na odpowiedź z API, która ma zasilić danymi front, lub gdy dostawca zewnętrzny nie odpowiada i chcemy jego odpowiedzi zmockować.

  • Debugger GUI

Po tym narzędziu widać, że Cypress został napisany przez frontend developerów. Ma świetny interfejs użytkownika (UI) łączący ze sobą możliwość uruchamiania i debugowania testów. Tworzenie snapshotów stanu aplikacji po każdej akcji daje nam możliwość odbycia „podróży w czasie” po różnych etapach trwania naszego testu. Dostęp do narzędzi developerskich pozwala podejrzeć np. ruch sieciowy. Wszystko to daje nam komplet narzędzi niezbędnych do szukania błędów.

Wady Cypressa

Mimo wielu plusów Cypress ma też swoje wady i nie można obok nich przejść obojętnie, jeśli jesteśmy na etapie wybierania najlepszego rozwiązania dla projektu.

  • Testowe post mortem

Chyba każdy doświadczył tego, jak uciążliwe może być debugowanie testu nieprzechodzącego w środowisku CI/CD. Pod tym względem Cypress oferuje nam nagranie video, zrzut ekranu, a w logach – error message. O ile w wielu przypadkach okazuje się to wystarczające, to bywa uciążliwe, kiedy chcemy prześledzić chociażby ruch sieciowy. W Selenium wcale nie było pod tym względem lepiej – moim osobistym faworytem jest Playwright ze swoimi trace’ami. Cypress to domyślnie narzędzie z GUI i to na nim najłatwiej debugować testy.

  • Wielowątkowość

Cypress chwali się wsparciem dla równoległego wykonywania testów. Nie jest ono jednak włączone domyślnie i wymaga nieprostej konfiguracji w CI/CD. W ten sposób możemy tworzyć wiele kontenerów, z których każdy wykona jeden wątek testów (podobnie do Selenium Grid). W porównaniu z Playwright, gdzie testy domyślnie uruchamiają się w wielu wątkach, albo nUnit, gdzie taka konfiguracja to jedna linijka kodu, to dość rażące niedociągnięcie.

  • Wątpliwe wsparcie dla BDD

Sam w sobie Cypress nie wspiera BDD, za to polega na zewnętrznych pluginach bazujących na cucumber-js. Oficjalnie wspierany cypress-cucumber-preprocessor przestał być rozwijany i musimy się posilać różnymi klonami precyzyjnie wybranymi dla naszej konkretnej wersji Cypressa.

Podsumowanie: czy Cypress jest frameworkiem dla każdego?

Cypress skraca czas pisania testów e2e dzięki swojej składni i narzędziom, jakie oferuje. Pisanie testów w Cypress to sama przyjemność i nie powinno sprawić problemów nawet początkującym użytkownikom. Debugowanie błędów lub bardziej zawiłe konfiguracje mogą się jednak okazać trudniejsze, niżbyśmy chcieli.

Jeśli potrzebujemy więc w krótkim czasie napisać testy na potrzeby danego projektu i nie jest ich dużo, to śmiało możemy użyć Cypressa. Jego bezproblemowa konfiguracja i prosta składnia wybaczą niedobory wiedzy o JavaSripcie. Proste rzeczy w Cypressie są… naprawdę proste. Jeśli jednak projekt jest bardziej wymagający, to i bardziej wymagająca będzie konfiguracja Cypressa, środowiska uruchomieniowego czy licznych pluginów, niekoniecznie zgodnych z najnowszymi wydaniami Cypressa. Jeśli JavaScript nie jest wam jednak obcy, to Cypress może się okazać nowym rozwiązaniem dla waszego projektu.

Przykładowy kod możecie znaleźć na moim Githubie:
https://github.com/sszemer/cypress.io

Autorem wpisu jest:

Inżynier QA w JCommerce, który stale podnosi swoje kompetencje w języku Java. Absolwent Polsko-Japońskiej Akademii Technik Komputerowych. Prywatnie interesuje się samochodami, grami planszowymi i komputerowymi, a także sprzętem komputerowym.

Dodaj komentarz: