Definicja #
Cypress to nowoczesne narzędzie do automatyzacji testów typu end-to-end (E2E) dla aplikacji internetowych, wydane w 2018 roku. W odróżnieniu od Selenium działa bezpośrednio w przeglądarce (w tym samym procesie co aplikacja), co pozwala na szybkie i stabilne testowanie interfejsów napisanych w JavaScript i TypeScript.
Kluczowe cechy Cypress:
- Działanie w przeglądarce — Cypress uruchamia się wewnątrz przeglądarki, ma bezpośredni dostęp do DOM, sieci i stanu aplikacji
- Auto-waits — automatyczne czekanie na elementy, animacje i requesty sieciowe bez potrzeby ręcznego sleep/wait
- Time travel debugging — zrzuty ekranu po każdym kroku testu, podgląd stanu aplikacji w dowolnym momencie
- Network stubbing — przechwytywanie i mockowanie żądań HTTP (cy.intercept)
- Component Testing — testowanie komponentów React, Vue, Angular w izolacji (od Cypress 10)
- Cypress Cloud — platforma do równoległego uruchamiania testów i analizy wyników
Cypress obsługuje przeglądarki Chromium (Chrome, Edge), Firefox i WebKit (beta). Testy pisane są w JavaScript lub TypeScript z API opartym na chainingu (Fluent Interface).
Zastosowania #
Cypress stosuje się do:
- Automatyzacji testów E2E aplikacji webowych — weryfikacja pełnych ścieżek użytkownika w przeglądarce
- Testów regresyjnych frontend React, Vue, Angular — szybkie wykrywanie błędów po zmianach UI
- Component testing komponentów UI w izolacji (Cypress Component Testing)
- Mockowania API i testowania scenariuszy offline lub błędów sieciowych (cy.intercept)
- Integracji z CI/CD — równoległe uruchamianie testów w GitHub Actions, GitLab CI, CircleCI
Ścieżka nauki #
Przed nauką Cypress niezbędna jest znajomość JavaScript lub TypeScript i podstaw HTML/CSS. Warto rozumieć jak działają aplikacje webowe i REST API.
Zacznij od:
- Instalacja Cypress (
npm install cypress) i uruchomienie Test Runner - Podstawowe polecenia:
cy.visit(),cy.get(),cy.click(),cy.type(),cy.contains() - Asercje:
should('be.visible'),should('have.text'),expect() - Selekcja elementów —
data-cyatrybuty zamiast CSS class (best practice)
Następnie poznaj:
- cy.intercept() — przechwytywanie i stubowanie żądań HTTP
- Custom commands (
Cypress.Commands.add()) i fixtures (dane testowe) - Page Object Model (POM) w Cypress
- Porównaj z Playwright — nowszą alternatywą wspierającą więcej przeglądarek
FAQ #
- Czym różni się Cypress od Selenium?
- Selenium steruje przeglądarką przez WebDriver (protokół), co bywa niestabilne i wymaga ręcznych waitów. Cypress działa bezpośrednio w przeglądarce — jest szybszy, bardziej stabilny i ma wbudowane auto-waits. Selenium obsługuje więcej języków i przeglądarek (Safari); Cypress skupia się na JavaScript/TypeScript.
- Czy Cypress obsługuje wiele przeglądarek?
- Cypress obsługuje Chrome, Chromium, Edge, Firefox i eksperymentalnie WebKit (Safari). Nie obsługuje natywnego Safari. Jeśli multi-browser coverage jest krytyczny, Playwright jest lepszą opcją.
- Ile zarabia tester automatyczny ze znajomością Cypress?
- QA Automation Engineer ze znajomością Cypress (i JavaScript) zarabia w Polsce od 8 000 do 16 000 zł brutto. Senior z architekturą frameworków testowych i CI/CD może zarabiać powyżej 18 000 zł.
- Czy Cypress nadaje się do testów API?
- Cypress ma podstawowe wsparcie dla testów HTTP przez cy.request(), ale nie jest dedykowanym narzędziem do testów API. Do zaawansowanych testów API lepiej użyć Postman, RestAssured lub k6.
