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

• Arendajasõbralik: Cypress pakub puhast ja intuitiivset API-t, mis muudab testide kirjutamise ja silumise lihtsaks.
• Ajas Rändamine: Cypress teeb hetkepilte teie rakenduse olekust iga testikäsu ajal, võimaldades teil ajas tagasi astuda ja näha täpselt, mis igal ajahetkel juhtus.
• Reaalajas Uuesti Laadimine: Cypress laadib automaatselt uuesti, kui teete oma testides muudatusi, pakkudes kohest tagasisidet.
• Automaatne Ootamine: Cypress ootab automaatselt, kuni elemendid muutuvad nähtavaks või interaktiivseks, enne kui tegevusi sooritab, kõrvaldades vajaduse selgesõnaliste ootamiste järele.
• Võrgu Kontroll: Cypress võimaldab teil võrgupäringuid ja -vastuseid järele aimata, võimaldades teil simuleerida erinevaid stsenaariume ja testida oma rakenduse veakäsitlust.
• Silutavus: Cypress pakub suurepäraseid silumistööriistu, sealhulgas võimast silurit ja üksikasjalikke veateateid.
• Ristbrauseri Testimine: Cypress toetab mitut brauserit, sealhulgas Chrome, Firefox, Edge ja Electron.
• Peata Testimine: Käivitage teste peata režiimis, et kiirendada täitmist CI/CD keskkondades.
• Sisseehitatud Väited: Cypress pakub rikkalikku komplekti sisseehitatud väiteid, et kontrollida oma rakenduse eeldatavat käitumist.

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:

            npm install cypress --save-dev
            

              
                Copy
              
            
          

3. Avage Cypress: Kui installimine on lõppenud, saate avada Cypressi Test Runneri, käivitades:

            npx cypress open
            

              
                Copy
              
            
          

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')
  })
})

            

              
                Copy
              
            
          

Võtame selle testi lahti:

• `describe()`: Määrab testikomplekti, mis on seotud testide kogum.
• `it()`: Määrab testikomplektis üksiku testijuhtumi.
• `cy.visit()`: Navigeerib määratud URL-ile.
• `cy.contains()`: Leiab elemendi, mis sisaldab määratud teksti.
• `.click()`: Klõpsab valitud elemendil.
• `cy.url()`: Hangib lehe praeguse URL-i.
• `.should()`: Esitab väite rakenduse oleku kohta.
• `cy.get()`: Valib elemendi CSS-selektori abil.
• `.type()`: Sisestab teksti valitud elementi.
• `.should('have.value', 'fake@email.com')`: Väidab, et elemendi väärtus on võrdne väärtusega 'fake@email.com'.

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:

• `cy.visit(url)`: Navigeerib määratud URL-ile.
• `cy.get(selector)`: Valib elemendi CSS-selektori abil.
• `cy.contains(content)`: Valib elemendi, mis sisaldab määratud teksti.
• `cy.click()`: Klõpsab valitud elemendil.
• `cy.type(text)`: Sisestab teksti valitud elementi.
• `cy.clear()`: Tühjendab sisend- või tekstiala elemendi sisu.
• `cy.submit()`: Esitab vormi.
• `cy.check()`: Märgistab märkeruudu või raadionupu.
• `cy.uncheck()`: Eemaldab märkeruudu märgistuse.
• `cy.select(value)`: Valib rippmenüüst valiku.
• `cy.scrollTo(position)`: Kerib lehte määratud positsioonile.
• `cy.trigger(event)`: Käivitab valitud elemendil DOM-i sündmuse.
• `cy.request(url, options)`: Teeb HTTP päringu määratud URL-ile.
• `cy.intercept(route, handler)`: Pealtkuulab HTTP päringuid, mis vastavad määratud marsruudile.
• `cy.wait(time)`: Ootab määratud aja.
• `cy.reload()`: Laadib praeguse lehe uuesti.
• `cy.go(direction)`: Navigeerib brauseri ajaloos eelmisele või järgmisele lehele.
• `cy.url()`: Hangib lehe praeguse URL-i.
• `cy.title()`: Hangib lehe pealkirja.
• `cy.window()`: Hangib akna objekti.
• `cy.document()`: Hangib dokumendi objekti.
• `cy.viewport(width, height)`: Määrab vaateala suuruse.

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:

• `.should('be.visible')`: Väidab, et element on nähtav.
• `.should('not.be.visible')`: Väidab, et element ei ole nähtav.
• `.should('be.enabled')`: Väidab, et element on lubatud.
• `.should('be.disabled')`: Väidab, et element on keelatud.
• `.should('have.text', 'eeldatav tekst')`: Väidab, et elemendil on määratud tekst.
• `.should('contain', 'eeldatav tekst')`: Väidab, et element sisaldab määratud teksti.
• `.should('have.value', 'eeldatav väärtus')`: Väidab, et elemendil on määratud väärtus.
• `.should('have.class', 'eeldatav klass')`: Väidab, et elemendil on määratud klass.
• `.should('have.attr', 'atribuudi nimi', 'eeldatav väärtus')`: Väidab, et elemendil on määratud atribuut ja väärtus.
• `.should('have.css', 'CSS omadus', 'eeldatav väärtus')`: Väidab, et elemendil on määratud CSS omadus ja väärtus.
• `.should('have.length', eeldatav pikkus)`: Väidab, et elemendil on määratud pikkus (nt elementide arv loendis).

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:

• Kirjutage Selgeid ja Lühikesi Teste: Iga test peaks keskenduma konkreetsele funktsionaalsusele või stsenaariumile. Vältige liiga keeruliste testide kirjutamist, mida on raske mõista ja hooldada.
• Kasutage Sisukaid Testinimed: Andke oma testidele kirjeldavad nimed, mis selgelt näitavad, mida nad testivad.
• Vältige Väärtuste Koodi Sissekirjutamist: Kasutage muutujaid või konfiguratsioonifaile, et salvestada väärtusi, mis võivad aja jooksul muutuda.
• Kasutage Kohandatud Käske: Looge kohandatud käske, et kapseldada korduvkasutatavat loogikat ja muuta oma testid loetavamaks.
• Isoleerige Testid: Iga test peaks olema teistest testidest sõltumatu. Vältige rakenduse olekule tuginemist eelmistest testidest.
• Puhastage Pärast Teste: Pärast iga testi lähtestage rakenduse olek, et tagada järgnevate testide algamine puhtalt lehelt.
• Kasutage Andmeatribuute: Kasutage andmeatribuute (nt `data-testid`), et valida oma testides elemente. Andmeatribuudid muutuvad vähem tõenäoliselt kui CSS klassid või ID-d, muutes teie testid UI muudatustele vastupidavamaks.
• Vältige Selgesõnalisi Ootamisi: Cypress ootab automaatselt, kuni elemendid muutuvad nähtavaks või interaktiivseks. Vältige selgesõnaliste ootamiste (nt `cy.wait()`) kasutamist, välja arvatud juhul, kui see on absoluutselt vajalik.
• Testige Kasutajavoogusid: Keskenduge kasutajavoogude testimisele, mitte üksikute komponentide testimisele. See aitab teil tagada, et teie rakendus töötab kasutaja vaatenurgast õigesti.
• Käivitage Teste Regulaarselt: Integreerige Cypressi testid oma CI/CD torujuhtmesse ja käivitage neid regulaarselt, et püüda vead arendusprotsessi varases etapis kinni.

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')

            

              
                Copy
              
            
          

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')
})

            

              
                Copy
              
            
          

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')
})

            

              
                Copy
              
            
          

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

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

            

              
                Copy
              
            
          

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

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

            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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

            
import 'cypress-file-upload';

            

              
                Copy
              
            
          

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

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

            

              
                Copy
              
            
          

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()

            

              
                Copy
              
            
          

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'

            

              
                Copy
              
            
          

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:

• Kasutage Cypressi Test Runnerit: Cypressi Test Runner pakub visuaalset liidest teie testide käivitamiseks ja silumiseks. Saate oma testides käsu kaupa edasi liikuda, kontrollida rakenduse olekut ja vaadata üksikasjalikke veateateid.
• Kasutage Käsku `cy.pause()`: Käsk `cy.pause()` peatab teie testi täitmise ja võimaldab teil brauseri arendajatööriistades rakenduse olekut kontrollida.
• Kasutage Käsku `cy.debug()`: Käsk `cy.debug()` prindib valitud elemendi konsooli, võimaldades teil selle omadusi ja atribuute kontrollida.
• Kasutage Brauseri Arendajatööriistu: Brauseri arendajatööriistad pakuvad hulgaliselt teavet teie rakenduse kohta, sealhulgas DOM, võrgupäringud ja konsooli logid.
• Lugege Veateateid Hoolikalt: Cypress pakub üksikasjalikke veateateid, mis aitavad teil vea põhjust tuvastada. Pöörake tähelepanu veateatele ja stack tracile.

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:

• Selenium: Selenium on laialdaselt kasutatav automatiseeritud testimise raamistik. Kuigi see on paindlik ja toetab mitut keelt, võib selle seadistamine ja hooldamine olla keeruline. Cypress pakub lihtsamat ja arendajasõbralikumat kogemust, eriti JavaScripti-põhiste rakenduste jaoks.
• Puppeteer: Puppeteer on Node'i teek, mis pakub kõrgetasemelist API-t peata Chrome'i või Chromiumi juhtimiseks. See sobib suurepäraselt brauseri ülesannete kraapimiseks ja automatiseerimiseks, kuid võib nõuda rohkem käsitsi konfiguratsiooni võrreldes Cypressiga otsast-lõpuni testimiseks.
• Playwright: Playwright on veel üks Microsofti välja töötatud brauseritevaheline automatiseeritud testimise raamistik. Sellel on sarnasusi Puppeteeriga, kuid see pakub laiemat brauseri tuge. Cypressil on ainulaadne ajas rändamise silur ja integreeritum testimiskogemus.

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:

• Toodete otsimine
• Toodete lisamine ostukorvi
• Tellimuse vormistamine ja esitamine
• Konto sätete haldamine

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')
})

            

              
                Copy
              
            
          

Sotsiaalmeedia Rakenduse Testimine

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

• Uue postituse loomine
• Postituse meeldimine
• Postituse kommenteerimine
• Teiste kasutajate jälgimine

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!')
})

            

              
                Copy
              
            
          

Pangandusrakenduse testimine

• Turvaline sisselogimine
• Kontojääkide kontrollimine
• Raha ülekandmine
• Saajate haldamine

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')
})

            

              
                Copy
              
            
          

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.