M

MLOG

Čeština

Komplexní průvodce pro Cypress, výkonný framework pro end-to-end testování, pokrývající instalaci, psaní testů, ladění, CI/CD integraci a osvědčené postupy.

Cypress: Nejlepší průvodce pro end-to-end testování webových aplikací

V dnešním rychle se vyvíjejícím prostředí webového vývoje je zajištění kvality a spolehlivosti webových aplikací nanejvýš důležité. End-to-End (E2E) testování hraje klíčovou roli při ověřování, že všechny komponenty aplikace bezproblémově spolupracují z pohledu uživatele. Cypress se ukázal jako přední E2E testovací framework, který nabízí vývojářsky přívětivé prostředí, výkonné funkce a vynikající výkon. Tento komplexní průvodce vás provede vším, co potřebujete vědět, abyste mohli začít s Cypress a efektivně testovat své webové aplikace.

Co je Cypress?

Cypress je testovací nástroj front-endu nové generace, vytvořený pro moderní web. Na rozdíl od tradičních testovacích frameworků, které spouštějí testy v prohlížeči, Cypress pracuje přímo v prohlížeči, což vám dává bezkonkurenční kontrolu a viditelnost nad chováním vaší aplikace. Je navržen tak, aby byl rychlý, spolehlivý a snadno použitelný, což z něj činí oblíbenou volbu mezi vývojáři a QA inženýry po celém světě. Cypress je napsán v JavaScriptu a spouští se v prohlížeči, díky čemuž je velmi výkonný a nabízí bezkonkurenční přístup k interním mechanismům aplikace.

Klíčové výhody používání Cypress

Instalace a nastavení

Začít s Cypress je jednoduché. Zde je postup instalace:

  1. Předpoklady: Ujistěte se, že máte na svém systému nainstalované Node.js a npm (Node Package Manager). Můžete si je stáhnout z oficiálních webových stránek Node.js.
  2. Instalace Cypress: Otevřete terminál nebo příkazový řádek, přejděte do adresáře projektu a spusťte následující příkaz:
    3. npm install cypress --save-dev
  3. Otevření Cypress: Po dokončení instalace můžete otevřít Cypress Test Runner spuštěním:
    4. npx cypress open

    Tento příkaz spustí Cypress Test Runner, který poskytuje grafické rozhraní pro spouštění a ladění testů.

Psaní vašeho prvního Cypress testu

Pojďme vytvořit jednoduchý test pro ověření, zda se domovská stránka webu načítá správně. Vytvořte nový soubor s názvem `example.cy.js` v adresáři `cypress/e2e` vašeho projektu.


// cypress/e2e/example.cy.js

describe('Můj první test', () => {
  it('Navštíví Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

Pojďme si tento test rozebrat:

Spusťte tento test v Cypress Test Runner, abyste ho viděli v akci. Měli byste vidět, jak prohlížeč přejde na web Cypress Kitchen Sink, klikne na odkaz „type“ a ověří adresu URL.

Příkazy Cypress

Cypress poskytuje širokou škálu příkazů pro interakci s vaší aplikací. Zde jsou některé z nejčastěji používaných příkazů:

Toto je jen několik z mnoha příkazů dostupných v Cypress. Úplný seznam příkazů a jejich možností naleznete v dokumentaci Cypress.

Aserce v Cypress

Aserce se používají k ověření očekávaného chování vaší aplikace. Cypress poskytuje bohatou sadu vestavěných asercí, které můžete použít ke kontrole stavu prvků, adresy URL, názvu a dalších. Aserce se řetězí za příkazy Cypress pomocí metody `.should()`.

Zde jsou některé běžné příklady asercí:

Můžete také vytvářet vlastní aserce, které vyhovují vašim specifickým potřebám.

Osvědčené postupy pro psaní Cypress testů

Dodržování osvědčených postupů vám může pomoci psát lépe udržovatelné, spolehlivé a efektivní Cypress testy. Zde je několik doporučení:

Pokročilé techniky Cypress

Stubbing a Mocking

Cypress vám umožňuje stubovat síťové požadavky a odpovědi, což vám umožní simulovat různé scénáře a testovat zpracování chyb ve vaší aplikaci. To je zvláště užitečné pro testování funkcí, které se spoléhají na externí rozhraní API nebo služby.

Chcete-li stubovat síťový požadavek, můžete použít příkaz `cy.intercept()`. Například následující kód stubuje požadavek GET na `/api/users` a vrací falešnou odpověď:


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

Poté můžete počkat na zachycený požadavek pomocí `cy.wait('@getUsers')` a ověřit, že vaše aplikace zpracovává falešnou odpověď správně.

Práce s lokálním úložištěm a soubory cookie

Cypress poskytuje příkazy pro interakci s lokálním úložištěm a soubory cookie. Tyto příkazy můžete použít k nastavení, získání a vymazání lokálního úložiště a souborů cookie ve vašich testech.

Chcete-li nastavit položku lokálního úložiště, můžete použít příkaz `cy.window()` pro přístup k objektu okna a poté použít metodu `localStorage.setItem()`. Například:


cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

Chcete-li získat položku lokálního úložiště, můžete použít příkaz `cy.window()` a poté použít metodu `localStorage.getItem()`. Například:


cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Chcete-li nastavit soubor cookie, můžete použít příkaz `cy.setCookie()`. Například:


cy.setCookie('myCookie', 'myCookieValue')

Chcete-li získat soubor cookie, můžete použít příkaz `cy.getCookie()`. Například:


cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

Zpracování nahrávání souborů

Cypress poskytuje plugin s názvem `cypress-file-upload`, který zjednodušuje nahrávání souborů ve vašich testech. Chcete-li nainstalovat plugin, spusťte následující příkaz:

npm install -D cypress-file-upload

Poté přidejte následující řádek do souboru `cypress/support/commands.js`:


import 'cypress-file-upload';

Poté můžete použít příkaz `cy.uploadFile()` k nahrání souboru. Například:


cy.get('input[type="file"]').attachFile('example.txt')

Práce s IFrames

Testování IFrame může být složité, ale Cypress poskytuje způsob, jak s nimi pracovat. Můžete použít příkaz `cy.frameLoaded()` k čekání na načtení IFrame a poté použít příkaz `cy.iframe()` k získání objektu dokumentu IFrame.


cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress a Continuous Integration/Continuous Deployment (CI/CD)

Integrace Cypress do vašeho CI/CD kanálu je nezbytná pro zajištění kvality vaší aplikace. Cypress testy můžete spouštět v bezhlavém režimu ve vašem CI/CD prostředí. Zde je postup:

  1. Instalace Cypress: Ujistěte se, že je Cypress nainstalován jako závislost ve vašem projektu.
  2. Konfigurace CI/CD: Nakonfigurujte svůj CI/CD kanál tak, aby spouštěl Cypress testy po každém sestavení.
  3. Spouštění Cypress bezhlavě: Použijte příkaz `cypress run` ke spuštění Cypress testů v bezhlavém režimu.
Příklad konfigurace CI/CD (pomocí GitHub Actions):


name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Tato konfigurace spustí Cypress testy, kdykoli je kód odeslán do větve `main` nebo je vytvořena žádost o přijetí změn proti větvi `main`. Akce `cypress-io/github-action` zjednodušuje proces spouštění Cypress testů v GitHub Actions.

Ladění Cypress testů

Cypress poskytuje vynikající nástroje pro ladění, které vám pomohou identifikovat a opravit problémy ve vašich testech. Zde je několik tipů pro ladění Cypress testů:

Cypress vs. jiné testovací frameworky

Zatímco Cypress je výkonný end-to-end testovací framework, je důležité pochopit, jak se srovnává s jinými oblíbenými možnostmi. Zde je stručný přehled:

Volba frameworku závisí na specifických potřebách a požadavcích vašeho projektu. Cypress je vynikající volbou pro moderní webové aplikace, které vyžadují rychlé, spolehlivé a vývojářsky přívětivé end-to-end testování.

Příklady použití Cypress v reálném světě

Pojďme prozkoumat několik příkladů z reálného světa, jak lze Cypress použít k testování různých typů webových aplikací:

Testování aplikace pro elektronické obchodování

Cypress můžete použít k testování různých uživatelských toků v aplikaci pro elektronické obchodování, jako jsou:

Zde je příklad Cypress testu, který ověřuje, že uživatel může úspěšně přidat produkt do košíku:


it('Přidá produkt do košíku', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Testování aplikace sociálních médií

Cypress můžete použít k testování interakcí uživatelů v aplikaci sociálních médií, jako jsou:

Zde je příklad Cypress testu, který ověřuje, že uživatel může úspěšně vytvořit nový příspěvek:


it('Vytvoří nový příspěvek', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

Testování bankovní aplikace

Pro bankovní aplikace lze Cypress použít k testování kritických funkcí, jako jsou:

Test pro ověření převodu finančních prostředků by mohl vypadat takto (s příslušným stubbingem pro zabezpečení):


it('Úspěšně převede prostředky', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

Závěr

Cypress je výkonný a všestranný end-to-end testovací framework, který vám může pomoci zajistit kvalitu a spolehlivost vašich webových aplikací. Jeho vývojářsky přívětivé API, výkonné funkce a vynikající výkon z něj činí oblíbenou volbu mezi vývojáři a QA inženýry po celém světě. Dodržováním osvědčených postupů uvedených v této příručce můžete psát efektivní Cypress testy, které vám pomohou zachytit chyby v rané fázi vývoje a dodávat uživatelům vysoce kvalitní software.

S tím, jak se webové aplikace neustále vyvíjejí, bude význam end-to-end testování jen narůstat. Přijetí Cypress a jeho integrace do vašeho vývojového pracovního postupu vám umožní vytvářet robustnější, spolehlivější a uživatelsky přívětivější webové zážitky.

Cypress: Nejlepší průvodce pro end-to-end testování webových aplikací | MLOG