M

MLOG

Lietuvių

Išsamus vadovas apie „Cypress“ – galingą „end-to-end“ testavimo karkasą, apimantis diegimą, testų rašymą, derinimą, CI/CD integraciją ir geriausias praktikas.

Cypress: Išsamus „End-to-End“ testavimo vadovas žiniatinklio programoms

Šiuolaikiniame sparčiai besivystančiame žiniatinklio kūrimo pasaulyje, žiniatinklio programų kokybės ir patikimumo užtikrinimas yra svarbiausias prioritetas. „End-to-End“ (E2E) testavimas atlieka lemiamą vaidmenį tikrinant, ar visi programos komponentai sklandžiai veikia kartu iš vartotojo perspektyvos. „Cypress“ tapo pirmaujančiu E2E testavimo karkasu, siūlančiu kūrėjams draugišką patirtį, galingas funkcijas ir puikų našumą. Šis išsamus vadovas padės jums susipažinti su viskuo, ko reikia norint pradėti dirbti su „Cypress“ ir efektyviai testuoti savo žiniatinklio programas.

Kas yra „Cypress“?

„Cypress“ yra naujos kartos „front-end“ testavimo įrankis, sukurtas šiuolaikiniam žiniatinkliui. Skirtingai nuo tradicinių testavimo karkasų, kurie paleidžia testus naršyklėje, „Cypress“ veikia tiesiogiai naršyklėje, suteikdama jums neprilygstamą kontrolę ir matomumą jūsų programos elgsenoje. Jis sukurtas būti greitas, patikimas ir lengvai naudojamas, todėl yra populiarus pasirinkimas tarp kūrėjų ir kokybės užtikrinimo (QA) inžinierių visame pasaulyje. „Cypress“ parašytas JavaScript kalba ir vykdomas naršyklėje, todėl yra labai našus ir suteikia neprilygstamą prieigą prie programos vidinių mechanizmų.

Pagrindiniai „Cypress“ naudojimo privalumai

Diegimas ir sąranka

Pradėti dirbti su „Cypress“ yra paprasta. Štai kaip jį įdiegti:

  1. Būtinosios sąlygos: Įsitikinkite, kad jūsų sistemoje yra įdiegti Node.js ir npm (Node Package Manager). Juos galite atsisiųsti iš oficialios Node.js svetainės.
  2. Įdiekite „Cypress“: Atidarykite savo terminalą arba komandinę eilutę, pereikite į savo projekto katalogą ir paleiskite šią komandą:
    3. npm install cypress --save-dev
  3. Atidarykite „Cypress“: Kai diegimas bus baigtas, galite atidaryti „Cypress Test Runner“ paleisdami:
    4. npx cypress open

    Ši komanda paleis „Cypress Test Runner“, kuris suteikia grafinę sąsają jūsų testų paleidimui ir derinimui.

Pirmojo „Cypress“ testo rašymas

Sukurkime paprastą testą, kuris patikrins, ar svetainės pagrindinis puslapis įkeliamas teisingai. Sukurkite naują failą pavadinimu `example.cy.js` savo projekto `cypress/e2e` kataloge.


// cypress/e2e/example.cy.js

describe('Mano pirmasis testas', () => {
  it('Apsilanko „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')
  })
})

Panagrinėkime šį testą:

Paleiskite šį testą „Cypress Test Runner“ ir pamatysite jį veikiantį. Turėtumėte pamatyti, kaip naršyklė nueina į „Cypress Kitchen Sink“ svetainę, spusteli nuorodą „type“ ir patikrina URL.

„Cypress“ komandos

„Cypress“ siūlo platų komandų spektrą sąveikai su jūsų programa. Štai keletas dažniausiai naudojamų komandų:

Tai tik kelios iš daugybės „Cypress“ galimų komandų. Išsamų komandų ir jų parinkčių sąrašą rasite „Cypress“ dokumentacijoje.

Tvirtinimai (Assertions) „Cypress“

Tvirtinimai naudojami norint patikrinti numatomą jūsų programos elgesį. „Cypress“ siūlo gausų integruotų tvirtinimų rinkinį, kurį galite naudoti tikrindami elementų būseną, URL, pavadinimą ir kt. Tvirtinimai grandinami po „Cypress“ komandų naudojant `.should()` metodą.

Štai keletas įprastų tvirtinimų pavyzdžių:

Taip pat galite kurti pasirinktinius tvirtinimus, atitinkančius jūsų specifinius poreikius.

Geriausios praktikos rašant „Cypress“ testus

Geriausių praktikų laikymasis gali padėti jums rašyti lengviau prižiūrimus, patikimesnius ir efektyvesnius „Cypress“ testus. Štai keletas rekomendacijų:

Pažangios „Cypress“ technikos

Stubbing (impersonavimas) ir Mocking (imitavimas)

„Cypress“ leidžia imituoti tinklo užklausas ir atsakymus, suteikdama galimybę simuliuoti skirtingus scenarijus ir testuoti jūsų programos klaidų tvarkymą. Tai ypač naudinga testuojant funkcijas, kurios priklauso nuo išorinių API ar paslaugų.

Norėdami imituoti tinklo užklausą, galite naudoti `cy.intercept()` komandą. Pavyzdžiui, žemiau esantis kodas imituoja GET užklausą į `/api/users` ir grąžina imituotą atsakymą:


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'Jonas Jonaitis' },
    { id: 2, name: 'Jana Janaitė' }
  ]
}).as('getUsers')

Tada galite laukti perimtos užklausos naudodami `cy.wait('@getUsers')` ir patikrinti, ar jūsų programa teisingai apdoroja imituotą atsakymą.

Darbas su vietine saugykla (Local Storage) ir slapukais (Cookies)

„Cypress“ siūlo komandas sąveikai su vietine saugykla ir slapukais. Galite naudoti šias komandas, norėdami nustatyti, gauti ir išvalyti vietinę saugyklą bei slapukus savo testuose.

Norėdami nustatyti vietinės saugyklos elementą, galite naudoti `cy.window()` komandą, kad pasiektumėte lango objektą, o tada naudoti `localStorage.setItem()` metodą. Pavyzdžiui:


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

Norėdami gauti vietinės saugyklos elementą, galite naudoti `cy.window()` komandą, o tada `localStorage.getItem()` metodą. Pavyzdžiui:


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

Norėdami nustatyti slapuką, galite naudoti `cy.setCookie()` komandą. Pavyzdžiui:


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

Norėdami gauti slapuką, galite naudoti `cy.getCookie()` komandą. Pavyzdžiui:


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

Failų įkėlimo valdymas

„Cypress“ siūlo įskiepį pavadinimu `cypress-file-upload`, kuris supaprastina failų įkėlimą jūsų testuose. Norėdami įdiegti įskiepį, paleiskite šią komandą:

npm install -D cypress-file-upload

Tada pridėkite šią eilutę į savo `cypress/support/commands.js` failą:


import 'cypress-file-upload';

Tada galite naudoti `cy.uploadFile()` komandą failui įkelti. Pavyzdžiui:


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

Darbas su IFrame'ais

Testuoti IFrame'us gali būti sudėtinga, bet „Cypress“ suteikia būdą su jais sąveikauti. Galite naudoti `cy.frameLoaded()` komandą, kad palauktumėte, kol IFrame'as bus įkeltas, o tada naudoti `cy.iframe()` komandą, kad gautumėte IFrame'o dokumento objektą.


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

„Cypress“ ir nuolatinė integracija / nuolatinis diegimas (CI/CD)

„Cypress“ integravimas į jūsų CI/CD procesą yra būtinas norint užtikrinti jūsų programos kokybę. Galite paleisti „Cypress“ testus „headless“ režimu savo CI/CD aplinkoje. Štai kaip tai padaryti:

  1. Įdiekite „Cypress“: Įsitikinkite, kad „Cypress“ yra įdiegtas kaip priklausomybė jūsų projekte.
  2. Konfigūruokite CI/CD: Konfigūruokite savo CI/CD procesą, kad po kiekvieno kūrimo (build) būtų paleidžiami „Cypress“ testai.
  3. Paleiskite „Cypress“ „headless“ režimu: Naudokite `cypress run` komandą, kad paleistumėte „Cypress“ testus „headless“ režimu.

CI/CD konfigūracijos pavyzdys (naudojant 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'

Ši konfigūracija paleis „Cypress“ testus, kai kodas bus įkeltas į `main` šaką arba kai bus sukurta „pull request“ į `main` šaką. `cypress-io/github-action` veiksmas supaprastina „Cypress“ testų paleidimo procesą GitHub Actions.

„Cypress“ testų derinimas

„Cypress“ siūlo puikius derinimo įrankius, padedančius nustatyti ir ištaisyti problemas jūsų testuose. Štai keletas patarimų, kaip derinti „Cypress“ testus:

„Cypress“ palyginimas su kitais testavimo karkasais

Nors „Cypress“ yra galingas „end-to-end“ testavimo karkasas, svarbu suprasti, kaip jis lyginasi su kitomis populiariomis alternatyvomis. Štai trumpa apžvalga:

Karkaso pasirinkimas priklauso nuo jūsų projekto specifinių poreikių ir reikalavimų. „Cypress“ yra puikus pasirinkimas šiuolaikinėms žiniatinklio programoms, kurioms reikalingas greitas, patikimas ir kūrėjams draugiškas „end-to-end“ testavimas.

Realaus pasaulio „Cypress“ taikymo pavyzdžiai

Panagrinėkime keletą realaus pasaulio pavyzdžių, kaip „Cypress“ gali būti naudojamas testuoti skirtingų tipų žiniatinklio programas:

Elektroninės prekybos programos testavimas

Galite naudoti „Cypress“ testuoti įvairius vartotojų srautus elektroninės prekybos programoje, tokius kaip:

Štai „Cypress“ testo pavyzdys, kuris patikrina, ar vartotojas gali sėkmingai įdėti produktą į savo krepšelį:


it('Įdeda produktą į krepšelį', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Socialinės medijos programos testavimas

Galite naudoti „Cypress“ testuoti vartotojų sąveikas socialinės medijos programoje, tokias kaip:

Štai „Cypress“ testo pavyzdys, kuris patikrina, ar vartotojas gali sėkmingai sukurti naują įrašą:


it('Sukuriamas naujas įrašas', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Sveikas, pasauli!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Sveikas, pasauli!')
})

Bankininkystės programos testavimas

Bankininkystės programoms „Cypress“ gali būti naudojamas testuoti kritines funkcijas, tokias kaip:

Testas, skirtas patikrinti lėšų pervedimą, galėtų atrodyti taip (su atitinkamu imitavimu saugumo sumetimais):


it('Sėkmingai perveda lėšas', () => {
  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')
})

Išvados

„Cypress“ yra galingas ir universalus „end-to-end“ testavimo karkasas, kuris gali padėti užtikrinti jūsų žiniatinklio programų kokybę ir patikimumą. Jo kūrėjams draugiška API, galingos funkcijos ir puikus našumas daro jį populiariu pasirinkimu tarp kūrėjų ir QA inžinierių visame pasaulyje. Laikydamiesi šiame vadove aprašytų geriausių praktikų, galėsite rašyti efektyvius „Cypress“ testus, kurie padės anksti aptikti klaidas kūrimo procese ir pateikti aukštos kokybės programinę įrangą savo vartotojams.

Kadangi žiniatinklio programos ir toliau vystosi, „end-to-end“ testavimo svarba tik didės. Prisijaukinę „Cypress“ ir integruodami jį į savo kūrimo procesą, galėsite kurti tvirtesnes, patikimesnes ir vartotojui draugiškesnes žiniatinklio patirtis.