M

MLOG

Slovenčina

Komplexný sprievodca Cypressom, výkonným frameworkom pre end-to-end testovanie, pokrývajúci inštaláciu, písanie testov, ladenie, integráciu CI/CD a osvedčené postupy.

Cypress: Kompletný sprievodca End-to-End testovaním pre webové aplikácie

V dnešnom rýchlo sa vyvíjajúcom prostredí webového vývoja je zabezpečenie kvality a spoľahlivosti webových aplikácií prvoradé. End-to-End (E2E) testovanie hrá kľúčovú úlohu pri overovaní, či všetky komponenty aplikácie bezproblémovo spolupracujú z pohľadu používateľa. Cypress sa stal vedúcim E2E testovacím frameworkom, ktorý ponúka vývojársky prívetivé prostredie, výkonné funkcie a vynikajúci výkon. Tento komplexný sprievodca vás prevedie všetkým, čo potrebujete vedieť, aby ste mohli začať s Cypressom a efektívne testovať vaše webové aplikácie.

Čo je Cypress?

Cypress je nástroj na testovanie front-endu novej generácie, vytvorený pre moderný web. Na rozdiel od tradičných testovacích frameworkov, ktoré spúšťajú testy v prehliadači, Cypress pracuje priamo v prehliadači, čo vám dáva bezkonkurenčnú kontrolu a prehľad o správaní vašej aplikácie. Je navrhnutý tak, aby bol rýchly, spoľahlivý a ľahko použiteľný, čo z neho robí obľúbenú voľbu medzi vývojármi a QA inžiniermi po celom svete. Cypress je napísaný v JavaScripte a vykonáva sa v rámci prehliadača, čo ho robí veľmi výkonným a ponúka bezkonkurenčný prístup k interným častiam aplikácie.

Kľúčové výhody používania Cypressu

Inštalácia a nastavenie

Začať s Cypressom je jednoduché. Takto ho nainštalujete:

  1. Predpoklady: Uistite sa, že máte vo svojom systéme nainštalovaný Node.js a npm (Node Package Manager). Môžete si ich stiahnuť z oficiálnej webovej stránky Node.js.
  2. Inštalácia Cypressu: Otvorte terminál alebo príkazový riadok, prejdite do adresára vášho projektu a spustite nasledujúci príkaz:
    3. npm install cypress --save-dev
  3. Otvorenie Cypressu: Po dokončení inštalácie môžete otvoriť Cypress Test Runner spustením:
    4. npx cypress open

    Tento príkaz spustí Cypress Test Runner, ktorý poskytuje grafické rozhranie na spúšťanie a ladenie vašich testov.

Písanie vášho prvého testu v Cypresse

Vytvorme jednoduchý test na overenie, či sa domovská stránka webu načíta správne. Vytvorte nový súbor s názvom `example.cy.js` v adresári `cypress/e2e` vášho projektu.


// cypress/e2e/example.cy.js

describe('Môj prvý test', () => {
  it('Navštívi 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')
  })
})

Rozoberme si tento test:

Spustite tento test v Cypress Test Runneri, aby ste ho videli v akcii. Mali by ste vidieť, ako prehliadač prejde na webovú stránku Cypress Kitchen Sink, klikne na odkaz „type“ a overí URL.

Príkazy v Cypresse

Cypress poskytuje širokú škálu príkazov na interakciu s vašou aplikáciou. Tu sú niektoré z najčastejšie používaných príkazov:

Toto je len niekoľko z mnohých príkazov dostupných v Cypresse. Pre kompletný zoznam príkazov a ich možností si pozrite dokumentáciu Cypressu.

Kontrolné tvrdenia (Assertions) v Cypresse

Kontrolné tvrdenia (assertions) sa používajú na overenie očakávaného správania vašej aplikácie. Cypress poskytuje bohatú sadu vstavaných tvrdení, ktoré môžete použiť na kontrolu stavu prvkov, URL, titulku a ďalších. Tvrdenia sa reťazia za príkazy Cypressu pomocou metódy `.should()`.

Tu sú niektoré bežné príklady tvrdení:

Môžete si tiež vytvoriť vlastné tvrdenia, aby vyhovovali vašim špecifickým potrebám.

Osvedčené postupy pre písanie testov v Cypresse

Dodržiavanie osvedčených postupov vám môže pomôcť písať udržiavateľnejšie, spoľahlivejšie a efektívnejšie testy v Cypresse. Tu sú niektoré odporúčania:

Pokročilé techniky v Cypresse

Stubovanie a mockovanie

Cypress vám umožňuje nahradiť (stub) sieťové požiadavky a odpovede, čo vám umožňuje simulovať rôzne scenáre a testovať spracovanie chýb vašej aplikácie. To je obzvlášť užitočné pri testovaní funkcií, ktoré sa spoliehajú na externé API alebo služby.

Na nahradenie sieťovej požiadavky môžete použiť príkaz `cy.intercept()`. Napríklad, kód nižšie nahradí GET požiadavku na `/api/users` a vráti falošnú (mock) odpoveď:


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

Potom môžete počkať na zachytenú požiadavku pomocou `cy.wait('@getUsers')` a overiť, či vaša aplikácia správne spracuje falošnú odpoveď.

Práca s Local Storage a cookies

Cypress poskytuje príkazy na interakciu s local storage a cookies. Tieto príkazy môžete použiť na nastavenie, získanie a vymazanie local storage a cookies vo vašich testoch.

Na nastavenie položky v local storage môžete použiť príkaz `cy.window()` na prístup k objektu okna a potom použiť metódu `localStorage.setItem()`. Napríklad:


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

Na získanie položky z local storage môžete použiť príkaz `cy.window()` a potom použiť metódu `localStorage.getItem()`. Napríklad:


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

Na nastavenie cookie môžete použiť príkaz `cy.setCookie()`. Napríklad:


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

Na získanie cookie môžete použiť príkaz `cy.getCookie()`. Napríklad:


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

Spracovanie nahrávania súborov

Cypress poskytuje plugin s názvom `cypress-file-upload`, ktorý zjednodušuje nahrávanie súborov vo vašich testoch. Pre inštaláciu pluginu spustite nasledujúci príkaz:

npm install -D cypress-file-upload

Potom pridajte nasledujúci riadok do vášho súboru `cypress/support/commands.js`:


import 'cypress-file-upload';

Potom môžete použiť príkaz `cy.uploadFile()` na nahratie súboru. Napríklad:


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

Práca s IFrame

Testovanie IFrame môže byť zložité, ale Cypress poskytuje spôsob, ako s nimi interagovať. Môžete použiť príkaz `cy.frameLoaded()` na čakanie, kým sa IFrame načíta, a potom použiť príkaz `cy.iframe()` na získanie objektu dokumentu IFrame.


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

Cypress a kontinuálna integrácia/kontinuálne nasadenie (CI/CD)

Integrácia Cypressu do vášho CI/CD pipeline je nevyhnutná na zabezpečenie kvality vašej aplikácie. Testy Cypressu môžete spúšťať v headless režime vo vašom CI/CD prostredí. Takto na to:

  1. Inštalácia Cypressu: Uistite sa, že Cypress je nainštalovaný ako závislosť vo vašom projekte.
  2. Konfigurácia CI/CD: Nakonfigurujte váš CI/CD pipeline tak, aby spúšťal testy Cypressu po každom builde.
  3. Spustenie Cypressu v headless režime: Použite príkaz `cypress run` na spustenie testov Cypressu v headless režime.

Príklad konfigurácie CI/CD (pomocou 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'

Táto konfigurácia spustí testy Cypressu vždy, keď je kód posunutý do `main` vetvy alebo je vytvorený pull request proti `main` vetve. Akcia `cypress-io/github-action` zjednodušuje proces spúšťania testov Cypressu v GitHub Actions.

Ladenie testov v Cypresse

Cypress poskytuje vynikajúce nástroje na ladenie, ktoré vám pomôžu identifikovať a opraviť problémy vo vašich testoch. Tu sú niektoré tipy na ladenie testov v Cypresse:

Cypress vs. iné testovacie frameworky

Hoci je Cypress výkonný end-to-end testovací framework, je dôležité pochopiť, ako sa porovnáva s inými populárnymi možnosťami. Tu je stručný prehľad:

Voľba frameworku závisí od špecifických potrieb a požiadaviek vášho projektu. Cypress je vynikajúcou voľbou pre moderné webové aplikácie, ktoré vyžadujú rýchle, spoľahlivé a vývojársky prívetivé end-to-end testovanie.

Príklady z reálneho sveta použitia Cypressu

Pozrime sa na niekoľko príkladov z reálneho sveta, ako sa dá Cypress použiť na testovanie rôznych typov webových aplikácií:

Testovanie e-commerce aplikácie

Môžete použiť Cypress na testovanie rôznych používateľských tokov v e-commerce aplikácii, ako napríklad:

Tu je príklad testu v Cypresse, ktorý overuje, či si používateľ môže úspešne pridať produkt do košíka:


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

Testovanie aplikácie sociálnych médií

Môžete použiť Cypress na testovanie interakcií používateľov v aplikácii sociálnych médií, ako napríklad:

Tu je príklad testu v Cypresse, ktorý overuje, či používateľ môže úspešne vytvoriť nový príspevok:


it('Vytvorí nový príspevok', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Ahoj, svet!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Ahoj, svet!')
})

Testovanie bankovej aplikácie

Pre bankové aplikácie sa Cypress môže použiť na testovanie kritických funkcionalít, ako napríklad:

Test na overenie prevodu finančných prostriedkov by mohol vyzerať takto (s vhodným stubovaním pre bezpečnosť):


it('Úspešne prevedie finančné prostriedky', () => {
  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áver

Cypress je výkonný a všestranný end-to-end testovací framework, ktorý vám môže pomôcť zabezpečiť kvalitu a spoľahlivosť vašich webových aplikácií. Jeho vývojársky prívetivé API, výkonné funkcie a vynikajúci výkon z neho robia obľúbenú voľbu medzi vývojármi a QA inžiniermi po celom svete. Dodržiavaním osvedčených postupov uvedených v tejto príručke môžete písať efektívne testy v Cypresse, ktoré vám pomôžu odhaliť chyby včas v procese vývoja a dodávať používateľom vysokokvalitný softvér.

Ako sa webové aplikácie naďalej vyvíjajú, dôležitosť end-to-end testovania bude len narastať. Osvojenie si Cypressu a jeho integrácia do vášho vývojového pracovného postupu vám umožní vytvárať robustnejšie, spoľahlivejšie a používateľsky prívetivejšie webové zážitky.

Cypress: Kompletný sprievodca End-to-End testovaním pre webové aplikácie | MLOG