M

MLOG

Slovenščina

Celovit vodnik za Cypress, zmogljivo ogrodje za testiranje od konca do konca, ki pokriva namestitev, pisanje testov, odpravljanje napak, integracijo CI/CD in najboljše prakse.

Cypress: Najboljši vodnik za testiranje od konca do konca za spletne aplikacije

V današnjem hitro razvijajočem se okolju spletnega razvoja je zagotavljanje kakovosti in zanesljivosti spletnih aplikacij najpomembnejše. Testiranje od konca do konca (E2E) ima ključno vlogo pri preverjanju, ali vse komponente aplikacije nemoteno delujejo skupaj z uporabniškega vidika. Cypress se je pojavil kot vodilno ogrodje za testiranje E2E, ki ponuja razvijalcem prijazno izkušnjo, zmogljive funkcije in odlično učinkovitost. Ta celovit vodnik vas bo vodil skozi vse, kar morate vedeti, da začnete s Cypressom in učinkovito testirate svoje spletne aplikacije.

Kaj je Cypress?

Cypress je orodje za testiranje sprednjega dela naslednje generacije, zasnovano za sodobno splet. Za razliko od tradicionalnih ogrodij za testiranje, ki izvajajo teste v brskalniku, Cypress deluje neposredno v brskalniku, kar vam daje neprimerljiv nadzor in vpogled v obnašanje vaše aplikacije. Zasnovan je tako, da je hiter, zanesljiv in enostaven za uporabo, zaradi česar je priljubljena izbira med razvijalci in inženirji QA po vsem svetu. Cypress je napisan v JavaScriptu in se izvaja v brskalniku, zaradi česar je zelo zmogljiv in ponuja neprimerljiv dostop do notranjih delov aplikacije.

Ključne prednosti uporabe Cypressa

Namestitev in nastavitev

Začetek s Cypressom je preprost. Tukaj je, kako ga namestiti:

  1. Predpogoji: Prepričajte se, da imate v sistemu nameščena Node.js in npm (Node Package Manager). Prenesete jih lahko s spletnega mesta Node.js.
  2. Namestite Cypress: Odprite terminal ali ukazni poziv, pojdite v imenik svojega projekta in zaženite naslednji ukaz:
    3. npm install cypress --save-dev
  3. Odprite Cypress: Ko je namestitev končana, lahko odprete Cypress Test Runner z zagonom:
    4. npx cypress open

    Ta ukaz bo zagnal Cypress Test Runner, ki ponuja grafični vmesnik za izvajanje in odpravljanje napak v vaših testih.

Pisanje vašega prvega Cypress testa

Ustvarimo preprost test za preverjanje, ali se domača stran spletnega mesta pravilno naloži. Ustvarite novo datoteko z imenom `example.cy.js` v imeniku `cypress/e2e` vašega projekta.


// cypress/e2e/example.cy.js

describe('Moj prvi test', () => {
  it('Obišče Kuhinjsko korito', () => {
    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')
  })
})

Razčlenimo ta test:

Zaženite ta test v Cypress Test Runnerju, da ga vidite v akciji. Videti bi morali, da se brskalnik pomakne na spletno mesto Cypress Kitchen Sink, klikne na povezavo »type« in preveri URL.

Cypress Ukazi

Cypress ponuja široko paleto ukazov za interakcijo z vašo aplikacijo. Tukaj je nekaj najpogosteje uporabljenih ukazov:

To je le nekaj od mnogih ukazov, ki so na voljo v Cypressu. Za popoln seznam ukazov in njihovih možnosti glejte dokumentacijo Cypress.

Trditve v Cypressu

Trditve se uporabljajo za preverjanje pričakovanega obnašanja vaše aplikacije. Cypress ponuja bogat nabor vgrajenih trditev, ki jih lahko uporabite za preverjanje stanja elementov, URL-ja, naslova in še več. Trditve so verižno povezane za ukazi Cypress z uporabo metode `.should()`.

Tukaj je nekaj pogostih primerov trditev:

Ustvarite lahko tudi trditve po meri, ki ustrezajo vašim posebnim potrebam.

Najboljše prakse za pisanje Cypress testov

Upoštevanje najboljših praks vam lahko pomaga pisati bolj vzdržljive, zanesljive in učinkovite Cypress teste. Tukaj je nekaj priporočil:

Napredne tehnike Cypress

Nadomeščanje in posnemanje

Cypress vam omogoča, da ustvarite nadomestne zahteve in odzive omrežja, kar vam omogoča, da simulirate različne scenarije in preizkusite obravnavo napak v vaši aplikaciji. To je še posebej uporabno za testiranje funkcij, ki so odvisne od zunanjih API-jev ali storitev.

Če želite ustvariti nadomestno zahtevo omrežja, lahko uporabite ukaz `cy.intercept()`. Na primer, spodnja koda ustvari nadomestek za GET zahtevo na `/api/users` in vrne posnet odziv:


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

Nato lahko počakate na prestreženo zahtevo z uporabo `cy.wait('@getUsers')` in preverite, ali vaša aplikacija pravilno obravnava posnet odziv.

Delo z lokalnim pomnilnikom in piškotki

Cypress ponuja ukaze za interakcijo z lokalnim pomnilnikom in piškotki. Te ukaze lahko uporabite za nastavitev, pridobivanje in brisanje lokalnega pomnilnika in piškotkov v svojih testih.

Če želite nastaviti element lokalnega pomnilnika, lahko uporabite ukaz `cy.window()` za dostop do objekta okna in nato uporabite metodo `localStorage.setItem()`. Na primer:


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

Če želite pridobiti element lokalnega pomnilnika, lahko uporabite ukaz `cy.window()` in nato uporabite metodo `localStorage.getItem()`. Na primer:


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

Če želite nastaviti piškotek, lahko uporabite ukaz `cy.setCookie()`. Na primer:


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

Če želite pridobiti piškotek, lahko uporabite ukaz `cy.getCookie()`. Na primer:


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

Obravnavanje nalaganja datotek

Cypress ponuja vtičnik, imenovan `cypress-file-upload`, ki poenostavlja nalaganje datotek v vaših testih. Če želite namestiti vtičnik, zaženite naslednji ukaz:

npm install -D cypress-file-upload

Nato dodajte naslednjo vrstico v svojo datoteko `cypress/support/commands.js`:


import 'cypress-file-upload';

Nato lahko uporabite ukaz `cy.uploadFile()` za nalaganje datoteke. Na primer:


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

Delo z IFrami

Testiranje IFramov je lahko zapleteno, vendar Cypress ponuja način za interakcijo z njimi. Uporabite lahko ukaz `cy.frameLoaded()` za čakanje, da se IFrame naloži, nato pa uporabite ukaz `cy.iframe()` za pridobitev objekta dokumenta IFrame.


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

Cypress in neprekinjena integracija/neprekinjeno uvajanje (CI/CD)

Integracija Cypressa v vaš CI/CD cevovod je bistvena za zagotavljanje kakovosti vaše aplikacije. Cypress teste lahko izvajate v načinu brez glave v vašem okolju CI/CD. Tukaj je, kako:

  1. Namestite Cypress: Prepričajte se, da je Cypress nameščen kot odvisnost v vašem projektu.
  2. Konfigurirajte CI/CD: Konfigurirajte svoj CI/CD cevovod za izvajanje Cypress testov po vsaki gradnji.
  3. Zaženite Cypress brez glave: Uporabite ukaz `cypress run` za izvajanje Cypress testov v načinu brez glave.

Primer konfiguracije CI/CD (z uporabo 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'

Ta konfiguracija bo zagnala Cypress teste, kadar koli se koda potisne v vejo `main` ali se ustvari zahteva za vlečenje proti veji `main`. Dejanje `cypress-io/github-action` poenostavlja postopek izvajanja Cypress testov v GitHub Actions.

Odpravljanje napak v Cypress testih

Cypress ponuja odlična orodja za odpravljanje napak, ki vam pomagajo prepoznati in odpraviti težave v vaših testih. Tukaj je nekaj nasvetov za odpravljanje napak v Cypress testih:

Cypress v primerjavi z drugimi ogrodji za testiranje

Čeprav je Cypress zmogljivo ogrodje za testiranje od konca do konca, je bistveno razumeti, kako se primerja z drugimi priljubljenimi možnostmi. Tukaj je kratek pregled:

Izbira ogrodja je odvisna od specifičnih potreb in zahtev vašega projekta. Cypress je odlična izbira za sodobne spletne aplikacije, ki zahtevajo hitro, zanesljivo in razvijalcem prijazno testiranje od konca do konca.

Primeri Cypressa v praksi iz resničnega sveta

Raziščimo nekaj primerov iz resničnega sveta, kako se lahko Cypress uporablja za testiranje različnih vrst spletnih aplikacij:

Testiranje aplikacije za e-trgovino

Cypress lahko uporabite za testiranje različnih uporabniških tokov v aplikaciji za e-trgovino, kot so:

Tukaj je primer Cypress testa, ki preveri, ali lahko uporabnik uspešno doda izdelek v svojo košarico:


it('Doda izdelek v košarico', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Testiranje aplikacije za družbene medije

Cypress lahko uporabite za testiranje uporabniških interakcij v aplikaciji za družbene medije, kot so:

Tukaj je primer Cypress testa, ki preveri, ali lahko uporabnik uspešno ustvari novo objavo:


it('Ustvari novo objavo', () => {
  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!')
})

Testiranje bančne aplikacije

Za bančne aplikacije se lahko Cypress uporablja za testiranje kritičnih funkcij, kot so:

Test za preverjanje uspešnega prenosa sredstev bi lahko izgledal takole (z ustreznim nadomeščanjem za varnost):


it('Uspešno prenese sredstva', () => {
  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')
})

Zaključek

Cypress je zmogljivo in vsestransko ogrodje za testiranje od konca do konca, ki vam lahko pomaga zagotoviti kakovost in zanesljivost vaših spletnih aplikacij. Zaradi razvijalcem prijaznega API-ja, zmogljivih funkcij in odlične učinkovitosti je priljubljena izbira med razvijalci in inženirji QA po vsem svetu. Z upoštevanjem najboljših praks, opisanih v tem vodniku, lahko pišete učinkovite Cypress teste, ki vam bodo pomagali ujeti napake zgodaj v procesu razvoja in dostaviti visokokakovostno programsko opremo svojim uporabnikom.

Ker se spletne aplikacije še naprej razvijajo, se bo pomembnost testiranja od konca do konca samo še povečala. Sprejetje Cypressa in integracija v vaš razvojni potek dela vam bosta omogočila, da ustvarite robustnejše, zanesljivejše in uporabnikom prijaznejše spletne izkušnje.