W ramach akcji #code16challenge przygotowałem materiał o tworzeniu testów end-to-end z użyciem narzędzia Cypress. Testy e2e mają za zadanie maksymalnie odwzorować interakcję prawdziwego użytkownika z naszym systemem. Nie testujemy więc kodu lub wyizolowanych komponentów aplikacji, ale cały proces w oknie przeglądarki.

W przeszłości korzystałem z Selenium i nigdy nie byłem zadowolony z tego narzędzia. Cypress umożliwia szybkie i przyjemne automatyczne testowanie dowolnych aplikacji webowych. Testujemy bezpośrednio interfejs użytkownika (z użyciem selektorów), a więc nie ma znaczenia czy testowana aplikacja jest napisana w React, Angular czy jeszcze innym frameworku.

W poniższym wideo pokazuję na przykładzie platformy siepomaga jak fajnie się pisze test dodawania datków do koszyka.

Cypress szczególnie przypadł mi do gustu, ponieważ w momencie, gdy coś jest nie tak z testem, to mam dostęp do aktualnego stanu aplikacji z poziomu Cypress i mogę bezproblemowo zdebugować aplikację w Dev Toolsach. Druga rzecz, która bardzo mi się podoba to łatwość w pisaniu testów. Cypress domyślnie „czeka” na wykonanie różnych operacji. Jest to szczególnie przydatne, gdy web aplikacja wykonuje różne zapytania asynchroniczne.

Cypress jest narzędziem open-source i bezproblemu możesz użyć go na dowolonym CI.