Cypress

1. Co je Cypress?

Cypress je moderní nástroj pro automatizované testování webových aplikací, který se zaměřuje na end-to-end testování (E2E). Poskytuje silné funkce pro testování uživatelského rozhraní, zajišťuje vysokou rychlost testů a jednoduché nastavení.

Klíčové vlastnosti Cypressu:

• Testování v reálném čase: Cypress běží přímo v prohlížeči, což znamená, že můžete vidět, co se děje při vykonávání testů v reálném čase.
• Snadná konfigurace: Není potřeba složitá konfigurace nebo nastavení – Cypress funguje ihned po instalaci.
• Automatické čekání: Cypress automaticky čeká na dokončení asynchronních operací (například čekání na načtení elementů), což zjednodušuje testy.
• Snadné debugování: Cypress poskytuje podrobné logy, snímky obrazovky a videozáznamy, což umožňuje snadné sledování kroků testu a diagnostiku problémů.

2. Instalace Cypressu

Chcete-li začít používat Cypress, stačí provést několik jednoduchých kroků:

npm install cypress --save-dev
    

Tímto příkazem nainstalujete Cypress jako vývojovou závislost ve vašem projektu. Poté ho můžete spustit pomocí následujícího příkazu:

npx cypress open
    

Tím se otevře Cypress Test Runner, kde můžete spustit testy a prohlížet výsledky.

3. Struktura testů v Cypressu

Testy v Cypressu jsou napsány v JavaScriptu a struktura souborů je organizována tak, že každý test je umístěn ve složce cypress/integration.

Ukázkový test v Cypressu:

describe('Test prohlížeče', function() {
    it('Otevře webovou stránku a zkontroluje nadpis', function() {
        cy.visit('https://example.com');
        cy.get('h1').should('contain', 'Example Domain');
    });
});
    

Tento test provádí následující kroky:

• cy.visit(): Navštíví zadanou URL.
• cy.get(): Vyhledá element (v tomto případě h1) na stránce.
• should(): Ověří, zda text v elementu odpovídá očekávanému výstupu ("Example Domain").

4. Služby a metody Cypressu

Cypress nabízí širokou škálu metod a služeb pro testování. Některé z nejčastěji používaných metod zahrnují:

Cyklus života testu

• before(): Spustí se před všemi testy ve spec souboru.
• beforeEach(): Spustí se před každým jednotlivým testem.
• after(): Spustí se po všech testech ve spec souboru.
• afterEach(): Spustí se po každém testu.

Cyklus interakce s DOM

• cy.get(): Vyhledá element na stránce (pomocí CSS selektoru).
• cy.click(): Simuluje kliknutí na vybraný element.
• cy.type(): Simuluje napsání textu do formulářového pole.
• cy.wait(): Pozastaví test na určitý čas (například pro čekání na načtení dat).

5. Debugování testů v Cypressu

Cypress poskytuje různé nástroje pro debugování, které usnadňují identifikaci problémů při testování:

Logy a snímky obrazovky

Každý test je automaticky zaznamenáván, a Cypress poskytuje podrobné logy všech interakcí s DOM. Navíc, pokud test selže, Cypress pořídí snímky obrazovky a videozáznamy, které vám umožní snadno zjistit, co se stalo.

Test Runner

Test Runner je vizuální nástroj, který vám umožňuje sledovat každý krok testu v reálném čase. Můžete si prohlédnout aktuální stav testu, procházet jednotlivé kroky a prozkoumat výsledky.

6. Integrace Cypressu s CI/CD

Cypress lze snadno integrovat s nástroji pro kontinuální integraci a kontinuální nasazení (CI/CD), jako je Jenkins, GitHub Actions nebo CircleCI. Můžete nakonfigurovat, aby testy běžely automaticky při každém pushnutí změn do repozitáře, což zajišťuje, že vaše aplikace je vždy testována a připravena k nasazení.

Ukázka integrace s GitHub Actions:

name: Cypress Test

on:
  push:
    branches:
      - main

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Run Cypress tests
        run: npx cypress run
    

7. Závěr

Cypress je výkonný a snadno použitelný nástroj pro automatizované testování webových aplikací. S jeho pomocí můžete efektivně provádět end-to-end testování, ladit problémy v reálném čase a integrovat testy do vašeho CI/CD procesu. Je ideální pro testování moderních webových aplikací a výrazně zjednodušuje a urychluje proces testování.