Przejdź do:
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.
Przeczytaj również: Piramida testów: dowiedz się, jak testować, żeby testy przynosiły zysk.
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.
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
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
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
Inżynier QA, 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.