M

MLOG

Latviešu

Visaptverošs ceļvedis Cypress, jaudīgajā pilna cikla testēšanas sistēmā, kas aptver instalēšanu, testu rakstīšanu, atkļudošanu, CI/CD integrāciju un labāko praksi.

Cypress: Galvenais ceļvedis pilna cikla (End-to-End) testēšanai tīmekļa lietojumprogrammām

Mūsdienu strauji mainīgajā tīmekļa izstrādes vidē ir ļoti svarīgi nodrošināt tīmekļa lietojumprogrammu kvalitāti un uzticamību. Pilna cikla (End-to-End - E2E) testēšana spēlē būtisku lomu, pārbaudot, vai visi lietojumprogrammas komponenti darbojas nevainojami no lietotāja perspektīvas. Cypress ir kļuvis par vadošo E2E testēšanas sistēmu, piedāvājot izstrādātājiem draudzīgu pieredzi, jaudīgas funkcijas un izcilu veiktspēju. Šis visaptverošais ceļvedis iepazīstinās jūs ar visu, kas jums jāzina, lai sāktu darbu ar Cypress un efektīvi testētu savas tīmekļa lietojumprogrammas.

Kas ir Cypress?

Cypress ir nākamās paaudzes front-end testēšanas rīks, kas izstrādāts modernam tīmeklim. Atšķirībā no tradicionālajām testēšanas sistēmām, kas izpilda testus pārlūkprogrammā, Cypress darbojas tieši pārlūkprogrammā, nodrošinot nepārspējamu kontroli un ieskatu jūsu lietojumprogrammas darbībā. Tas ir izstrādāts, lai būtu ātrs, uzticams un viegli lietojams, padarot to par populāru izvēli izstrādātāju un QA inženieru vidū visā pasaulē. Cypress ir rakstīts JavaScript un darbojas pārlūkprogrammā, padarot to ļoti efektīvu un nodrošinot nepārspējamu piekļuvi lietojumprogrammas iekšējiem procesiem.

Galvenās Cypress lietošanas priekšrocības

Instalēšana un iestatīšana

Sākt darbu ar Cypress ir vienkārši. Lūk, kā to instalēt:

  1. Priekšnosacījumi: Pārliecinieties, ka jūsu sistēmā ir instalēts Node.js un npm (Node Package Manager). Jūs varat tos lejupielādēt no oficiālās Node.js vietnes.
  2. Instalējiet Cypress: Atveriet savu termināli vai komandrindas logu, pārejiet uz savu projektu direktoriju un izpildiet šādu komandu:
    3. npm install cypress --save-dev
  3. Atveriet Cypress: Kad instalēšana ir pabeigta, varat atvērt Cypress Test Runner, izpildot:
    4. npx cypress open

    Šī komanda palaidīs Cypress Test Runner, kas nodrošina grafisko saskarni jūsu testu izpildei un atkļūdošanai.

Savu pirmo Cypress testu rakstīšana

Izveidosim vienkāršu testu, lai pārbaudītu, vai vietnes sākumlapa tiek pareizi ielādēta. Izveidojiet jaunu failu ar nosaukumu `example.cy.js` savā projektā esošajā `cypress/e2e` direktorijā.


// cypress/e2e/example.cy.js

describe('My First Test', () => {
  it('Visits the 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')
  })
})

Izskaidrosim šo testu:

Izpildiet šo testu Cypress Test Runner, lai redzētu to darbībā. Jums vajadzētu redzēt, kā pārlūks navigē uz Cypress Kitchen Sink vietni, noklikšķina uz saites "type" un pārbauda URL.

Cypress komandas

Cypress nodrošina plašu komandu klāstu mijiedarbībai ar jūsu lietojumprogrammu. Šeit ir dažas no visbiežāk izmantotajām komandām:

Šīs ir tikai dažas no daudzajām Cypress pieejamajām komandām. Apskatiet Cypress dokumentāciju, lai iegūtu pilnu komandu sarakstu un to opcijas.

Apgalvojumi (Assertions) Cypress

Apgalvojumi tiek izmantoti, lai pārbaudītu jūsu lietojumprogrammas paredzēto darbību. Cypress nodrošina bagātīgu iebūvētu apgalvojumu kopumu, ko varat izmantot, lai pārbaudītu elementu stāvokli, URL, virsrakstu un daudz ko citu. Apgalvojumi tiek ķēdēti pēc Cypress komandām, izmantojot metodi `.should()`.

Šeit ir daži izplatīti apgalvojumu piemēri:

Jūs varat arī izveidot pielāgotus apgalvojumus, lai tie atbilstu jūsu specifiskajām vajadzībām.

Labākā prakse Cypress testu rakstīšanai

Labākās prakses ievērošana var palīdzēt jums rakstīt vairāk uzturējamus, uzticamus un efektīvus Cypress testus. Šeit ir daži ieteikumi:

Papildu Cypress tehnikas

Imitācija (Stubbing) un izspiegošana (Mocking)

Cypress ļauj jums imitēt tīkla pieprasījumus un atbildes, ļaujot simulēt dažādus scenārijus un testēt jūsu lietojumprogrammas kļūdu apstrādi. Tas ir īpaši noderīgi, lai testētu funkcijas, kas paļaujas uz ārējiem API vai pakalpojumiem.

Lai imitētu tīkla pieprasījumu, varat izmantot komandu `cy.intercept()`. Piemēram, zemāk esošais kods imitē GET pieprasījumu uz `/api/users` un atgriež izspoguļotu (mock) atbildi:


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

Pēc tam jūs varat gaidīt pārtverto pieprasījumu, izmantojot `cy.wait('@getUsers')`, un pārbaudīt, vai jūsu lietojumprogramma pareizi apstrādā izspoguļoto atbildi.

Darbs ar lokālo krātuvi (Local Storage) un sīkdatnēm (Cookies)

Cypress nodrošina komandas mijiedarbībai ar lokālo krātuvi un sīkdatnēm. Jūs varat izmantot šīs komandas, lai iestatītu, iegūtu un notīrītu lokālo krātuvi un sīkdatnes savos testos.

Lai iestatītu lokālās krātuves elementu, varat izmantot komandu `cy.window()`, lai piekļūtu loga objektam un pēc tam izmantotu metodi `localStorage.setItem()`. Piemēram:


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

Lai iegūtu lokālās krātuves elementu, varat izmantot komandu `cy.window()` un pēc tam metodi `localStorage.getItem()`. Piemēram:


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

Lai iestatītu sīkdatni, varat izmantot komandu `cy.setCookie()`. Piemēram:


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

Lai iegūtu sīkdatni, varat izmantot komandu `cy.getCookie()`. Piemēram:


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

Failu augšupielādes apstrāde

Cypress nodrošina spraudni ar nosaukumu `cypress-file-upload`, kas vienkāršo failu augšupielādi jūsu testos. Lai instalētu spraudni, izpildiet šādu komandu:

npm install -D cypress-file-upload

Pēc tam pievienojiet šādu rindu savam `cypress/support/commands.js` failam:


import 'cypress-file-upload';

Pēc tam varat izmantot komandu `cy.uploadFile()`, lai augšupielādētu failu. Piemēram:


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

Darbs ar IFrames

IFrames testēšana var būt sarežģīta, taču Cypress nodrošina veidu, kā ar tiem mijiedarboties. Jūs varat izmantot komandu `cy.frameLoaded()`, lai gaidītu IFrame ielādi, un pēc tam izmantot komandu `cy.iframe()`, lai iegūtu IFrame dokumenta objektu.


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

Cypress un nepārtraukta integrācija/nepārtraukta izvietošana (CI/CD)

Cypress integrēšana jūsu CI/CD cauruļvadā ir būtiska, lai nodrošinātu jūsu lietojumprogrammas kvalitāti. Jūs varat palaist Cypress testus headless režīmā savā CI/CD vidē. Lūk, kā:

  1. Instalējiet Cypress: Pārliecinieties, ka Cypress ir instalēts kā jūsu projekta atkarība.
  2. Konfigurējiet CI/CD: Konfigurējiet savu CI/CD cauruļvadu, lai pēc katras būves (build) palaistu Cypress testus.
  3. Palaist Cypress Headless režīmā: Izmantojiet komandu `cypress run`, lai palaistu Cypress testus headless režīmā.

Piemērs CI/CD konfigurācijai (izmantojot 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'

Šī konfigurācija palaidīs Cypress testus, ikreiz kad kods tiks nospiedts uz `main` zaru vai tiks izveidots pull pieprasījums pret `main` zaru. `cypress-io/github-action` darbība vienkāršo Cypress testu izpildes procesu GitHub Actions.

Cypress testu atkļūdošana

Cypress nodrošina izcilus atkļūdošanas rīkus, lai palīdzētu jums identificēt un novērst problēmas savos testos. Šeit ir daži padomi Cypress testu atkļūdošanai:

Cypress pret citām testēšanas sistēmām

Lai gan Cypress ir jaudīga pilna cikla testēšanas sistēma, ir svarīgi saprast, kā tā salīdzinās ar citām populārām iespējām. Šeit ir īss pārskats:

Sistēmas izvēle ir atkarīga no jūsu projekta specifiskajām vajadzībām un prasībām. Cypress ir lieliska izvēle modernām tīmekļa lietojumprogrammām, kurām nepieciešama ātra, uzticama un izstrādātājiem draudzīga pilna cikla testēšana.

Reāli Cypress piemēri darbībā

Apskatīsim dažus reālus piemērus tam, kā Cypress var tikt izmantots dažāda veida tīmekļa lietojumprogrammu testēšanai:

E-komercijas lietojumprogrammas testēšana

Jūs varat izmantot Cypress, lai testētu dažādas lietotāju plūsmas e-komercijas lietojumprogrammā, piemēram:

Šeit ir piemērs Cypress testam, kas pārbauda, vai lietotājs var veiksmīgi pievienot preci savam grozam:


it('Adds a product to the cart', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Sociālo mediju lietojumprogrammas testēšana

Jūs varat izmantot Cypress, lai testētu lietotāju mijiedarbību sociālo mediju lietojumprogrammā, piemēram:

Šeit ir piemērs Cypress testam, kas pārbauda, vai lietotājs var veiksmīgi izveidot jaunu ierakstu:


it('Creates a new post', () => {
  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!')
})

Banku lietojumprogrammas testēšana

Banku lietojumprogrammām Cypress var tikt izmantots, lai testētu kritiski svarīgas funkcijas, piemēram:

Tests, lai pārbaudītu līdzekļu pārskaitījumu, varētu izskatīties šādi (ar atbilstošu imitāciju drošības nolūkos):


it('Transfers funds successfully', () => {
  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')
})

Noslēgums

Cypress ir jaudīga un daudzpusīga pilna cikla testēšanas sistēma, kas var palīdzēt nodrošināt jūsu tīmekļa lietojumprogrammu kvalitāti un uzticamību. Tā izstrādātājiem draudzīgā API, jaudīgās funkcijas un izcilā veiktspēja padara to par populāru izvēli izstrādātāju un QA inženieru vidū visā pasaulē. Ievērojot šajā ceļvedī izklāstītos labākos principus, jūs varat rakstīt efektīvus Cypress testus, kas palīdzēs jums atklāt kļūdas agrīnā izstrādes procesā un piegādāt augstas kvalitātes programmatūru saviem lietotājiem.

Tā kā tīmekļa lietojumprogrammas turpina attīstīties, pilna cikla testēšanas nozīme tikai pieaugs. Cypress pieņemšana un integrēšana jūsu izstrādes darbplūsmā ļaus jums izveidot robustākas, uzticamākas un lietotājam draudzīgākas tīmekļa pieredzes.