M

MLOG

Eesti

Põhjalik juhend Cypressi kohta, mis on võimas otsast-lõpuni testimise raamistik, hõlmates paigaldamist, testide kirjutamist, silumist, CI/CD integreerimist ja parimaid praktikaid.

Cypress: Ülim Veebirakenduste Otsast-lõpuni Testimise Juhend

Tänapäeva kiiresti arenevas veebiarendusmaailmas on veebirakenduste kvaliteedi ja usaldusväärsuse tagamine ülimalt tähtis. Otsast-lõpuni (E2E) testimine mängib olulist rolli selle kontrollimisel, et kõik rakenduse komponendid töötavad kasutaja vaatenurgast sujuvalt koos. Cypress on kujunenud juhtivaks E2E testimise raamistikuks, pakkudes arendajasõbralikku kogemust, võimsaid funktsioone ja suurepärast jõudlust. See põhjalik juhend juhatab teid läbi kõige, mida peate teadma, et Cypressiga alustada ja oma veebirakendusi tõhusalt testida.

Mis on Cypress?

Cypress on järgmise põlvkonna esiotsa testimise tööriist, mis on loodud kaasaegse veebi jaoks. Erinevalt traditsioonilistest testimisraamistikest, mis käitavad teste brauseris, töötab Cypress otse brauseris, andes teile enneolematu kontrolli ja nähtavuse oma rakenduse käitumise üle. See on loodud olema kiire, usaldusväärne ja lihtne kasutada, muutes selle populaarseks valikuks arendajate ja QA inseneride seas üle maailma. Cypress on kirjutatud JavaScriptis ja käivitatakse brauseris, muutes selle väga jõudlaks ja pakkudes enneolematut juurdepääsu rakenduse sisemusele.

Cypressi Kasutamise Peamised Eelised

Paigaldamine ja Seadistamine

Cypressiga alustamine on lihtne. Siin on, kuidas seda installida:

  1. Eeltingimused: Veenduge, et teie süsteemi on installitud Node.js ja npm (Node Package Manager). Saate need alla laadida ametlikult Node.js veebisaidilt.
  2. Installige Cypress: Avage oma terminal või käsuviip, navigeerige oma projektikataloogi ja käivitage järgmine käsk:
    3. npm install cypress --save-dev
  3. Avage Cypress: Kui installimine on lõppenud, saate avada Cypressi Test Runneri, käivitades:
    4. npx cypress open

    See käsk käivitab Cypress Test Runneri, mis pakub graafilist liidest teie testide käivitamiseks ja silumiseks.

Oma Esimese Cypressi Testi Kirjutamine

Loome lihtsa testi, et kontrollida, kas veebisaidi avaleht laaditakse õigesti. Looge uus fail nimega `example.cy.js` oma projekti kataloogis `cypress/e2e`.


// cypress/e2e/example.cy.js

describe('Minu Esimene Test', () => {
  it('Külastab Köögivalamut', () => {
    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')
  })
})

Võtame selle testi lahti:

Käivitage see test Cypress Test Runneris, et seda tegevuses näha. Peaksite nägema, et brauser navigeerib Cypressi Köögivalamu veebisaidile, klõpsab lingil "type" ja kontrollib URL-i.

Cypressi Käsud

Cypress pakub laia valikut käske teie rakendusega suhtlemiseks. Siin on mõned kõige sagedamini kasutatavad käsud:

Need on vaid mõned paljudest Cypressis saadaolevatest käskudest. Täieliku käskude loendi ja nende valikute saamiseks vaadake Cypressi dokumentatsiooni.

Väited Cypressis

Väiteid kasutatakse teie rakenduse eeldatava käitumise kontrollimiseks. Cypress pakub rikkalikku komplekti sisseehitatud väiteid, mida saate kasutada elementide oleku, URL-i, pealkirja ja muu kontrollimiseks. Väited aheldatakse pärast Cypressi käske, kasutades meetodit `.should()`.

Siin on mõned levinud väidete näited:

Võite luua ka kohandatud väiteid, mis vastavad teie konkreetsetele vajadustele.

Parimad Praktikad Cypressi Testide Kirjutamiseks

Parimate praktikate järgimine aitab teil kirjutada paremini hooldatavaid, usaldusväärsemaid ja tõhusamaid Cypressi teste. Siin on mõned soovitused:

Täiustatud Cypressi Tehnikad

Järele Aimatamine ja Mockimine

Cypress võimaldab teil võrgupäringuid ja -vastuseid järele aimata, võimaldades teil simuleerida erinevaid stsenaariume ja testida oma rakenduse veakäsitlust. See on eriti kasulik funktsioonide testimiseks, mis tuginevad välistele API-dele või teenustele.

Võrgupäringu järele aimamiseks saate kasutada käsku `cy.intercept()`. Näiteks allolev kood järele aimab GET päringut aadressile `/api/users` ja tagastab mock vastuse:


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

Seejärel saate oodata pealtkuulatud päringut, kasutades `cy.wait('@getUsers')` ja kontrollida, kas teie rakendus käsitleb mock vastust õigesti.

Kohaliku Salvestusruumi ja Küpsiste Kasutamine

Cypress pakub käske kohaliku salvestusruumi ja küpsistega suhtlemiseks. Saate neid käske kasutada kohaliku salvestusruumi ja küpsiste määramiseks, hankimiseks ja tühjendamiseks oma testides.

Kohaliku salvestusruumi üksuse määramiseks saate kasutada käsku `cy.window()`, et pääseda juurde akna objektile, ja seejärel kasutada meetodit `localStorage.setItem()`. Näiteks:


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

Kohaliku salvestusruumi üksuse hankimiseks saate kasutada käsku `cy.window()` ja seejärel kasutada meetodit `localStorage.getItem()`. Näiteks:


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

Küpsise määramiseks saate kasutada käsku `cy.setCookie()`. Näiteks:


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

Küpsise hankimiseks saate kasutada käsku `cy.getCookie()`. Näiteks:


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

Failide Üleslaadimise Käsitsemine

Cypress pakub pluginat nimega `cypress-file-upload`, mis lihtsustab failide üleslaadimist teie testides. Plugina installimiseks käivitage järgmine käsk:

npm install -D cypress-file-upload

Seejärel lisage järgmine rida oma faili `cypress/support/commands.js`:


import 'cypress-file-upload';

Seejärel saate kasutada käsku `cy.uploadFile()`, et fail üles laadida. Näiteks:


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

IFrame'ide Kasutamine

IFrame'ide testimine võib olla keeruline, kuid Cypress pakub viisi nendega suhtlemiseks. Saate kasutada käsku `cy.frameLoaded()`, et oodata IFrame'i laadimist, ja seejärel kasutada käsku `cy.iframe()`, et hankida IFrame'i dokumendi objekt.


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

Cypress ja Pidevintegratsioon/Pidevjuurutus (CI/CD)

Cypressi integreerimine oma CI/CD torujuhtmesse on oluline teie rakenduse kvaliteedi tagamiseks. Saate Cypressi teste käitada peata režiimis oma CI/CD keskkonnas. Siin on, kuidas:

  1. Installige Cypress: Veenduge, et Cypress on installitud teie projekti sõltuvusena.
  2. Konfigureerige CI/CD: Konfigureerige oma CI/CD torujuhe Cypressi testide käivitamiseks pärast iga buildi.
  3. Käivitage Cypress Peata Režiimis: Kasutage käsku `cypress run`, et käivitada Cypressi teste peata režiimis.

Näide CI/CD konfiguratsioonist (kasutades GitHub Actionseid):


name: Cypressi Testid

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: Installi sõltuvused
        run: npm install
      - name: Cypressi käivitamine
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

See konfiguratsioon käivitab Cypressi testid alati, kui kood lükatakse `main` harusse või kui `main` haru vastu luuakse pull taotlus. Action `cypress-io/github-action` lihtsustab Cypressi testide käivitamise protsessi GitHub Actionseides.

Cypressi Testide Silumine

Cypress pakub suurepäraseid silumistööriistu, mis aitavad teil oma testides probleeme tuvastada ja parandada. Siin on mõned näpunäited Cypressi testide silumiseks:

Cypress vs. Muud Testimisraamistikud

Kuigi Cypress on võimas otsast-lõpuni testimise raamistik, on oluline mõista, kuidas see võrdleb teiste populaarsete valikutega. Siin on lühike ülevaade:

Raamistiku valik sõltub teie projekti konkreetsetest vajadustest ja nõuetest. Cypress on suurepärane valik kaasaegsete veebirakenduste jaoks, mis nõuavad kiiret, usaldusväärset ja arendajasõbralikku otsast-lõpuni testimist.

Reaalse Maailma Näited Cypressi Kasutamisest

Uurime mõnda reaalse maailma näidet selle kohta, kuidas Cypressi saab kasutada erinevat tüüpi veebirakenduste testimiseks:

E-kaubanduse Rakenduse Testimine

Saate Cypressi kasutada e-kaubanduse rakenduse erinevate kasutajavoogude testimiseks, näiteks:

Siin on näide Cypressi testist, mis kontrollib, kas kasutaja saab edukalt toote oma ostukorvi lisada:


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

Sotsiaalmeedia Rakenduse Testimine

Saate Cypressi kasutada sotsiaalmeedia rakenduse kasutajate interaktsioonide testimiseks, näiteks:

Siin on näide Cypressi testist, mis kontrollib, kas kasutaja saab edukalt uue postituse luua:


it('Loob uue postituse', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Tere, maailm!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Tere, maailm!')
})

Pangandusrakenduse testimine

Pangandusrakenduste puhul saab Cypressi kasutada kriitiliste funktsioonide testimiseks, näiteks:

Test fondiülekande kontrollimiseks võib välja näha selline (koos asjakohase turvalisuse tagamiseks):


it('Kannab raha edukalt üle', () => {
  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')
})

Järeldus

Cypress on võimas ja mitmekülgne otsast-lõpuni testimise raamistik, mis aitab teil tagada oma veebirakenduste kvaliteeti ja usaldusväärsust. Selle arendajasõbralik API, võimsad funktsioonid ja suurepärane jõudlus muudavad selle populaarseks valikuks arendajate ja QA inseneride seas üle maailma. Järgides selles juhendis toodud parimaid praktikaid, saate kirjutada tõhusaid Cypressi teste, mis aitavad teil vead arendusprotsessi varases etapis kinni püüda ja tarnida oma kasutajatele kvaliteetset tarkvara.

Kuna veebirakendused arenevad pidevalt, suureneb ka otsast-lõpuni testimise tähtsus. Cypressi omaksvõtmine ja selle integreerimine oma arendustöövoogu võimaldab teil luua tugevamaid, usaldusväärsemaid ja kasutajasõbralikumaid veebikogemusi.