M

MLOG

Hrvatski

Sveobuhvatan vodič za Cypress, moćan radni okvir za end-to-end testiranje, koji pokriva instalaciju, pisanje testova, ispravljanje pogrešaka, CI/CD integraciju i najbolje prakse.

Cypress: Vrhunski vodič za end-to-end testiranje web aplikacija

U današnjem svijetu web razvoja koji se brzo mijenja, osiguravanje kvalitete i pouzdanosti web aplikacija od presudne je važnosti. End-to-End (E2E) testiranje igra ključnu ulogu u provjeri da sve komponente aplikacije besprijekorno rade zajedno iz korisničke perspektive. Cypress se pojavio kao vodeći radni okvir za E2E testiranje, nudeći iskustvo prilagođeno developerima, moćne značajke i izvrsne performanse. Ovaj sveobuhvatni vodič provest će vas kroz sve što trebate znati kako biste započeli s Cypressom i učinkovito testirali svoje web aplikacije.

Što je Cypress?

Cypress je alat za testiranje front-enda nove generacije, izrađen za moderni web. Za razliku od tradicionalnih radnih okvira za testiranje koji pokreću testove u pregledniku, Cypress radi izravno u pregledniku, dajući vam neusporedivu kontrolu i vidljivost ponašanja vaše aplikacije. Dizajniran je da bude brz, pouzdan i jednostavan za korištenje, što ga čini popularnim izborom među developerima i QA inženjerima diljem svijeta. Cypress je napisan u JavaScriptu i izvršava se unutar preglednika, što ga čini vrlo učinkovitim i nudi neusporediv pristup unutarnjim dijelovima aplikacije.

Ključne prednosti korištenja Cypressa

Instalacija i postavljanje

Početak rada s Cypressom je jednostavan. Evo kako ga instalirati:

  1. Preduvjeti: Provjerite imate li Node.js i npm (Node Package Manager) instalirane na vašem sustavu. Možete ih preuzeti s službene web stranice Node.js.
  2. Instalirajte Cypress: Otvorite svoj terminal ili naredbeni redak, idite u direktorij vašeg projekta i pokrenite sljedeću naredbu:
    3. npm install cypress --save-dev
  3. Otvorite Cypress: Nakon što je instalacija dovršena, možete otvoriti Cypress Test Runner pokretanjem:
    4. npx cypress open

    Ova naredba će pokrenuti Cypress Test Runner, koji pruža grafičko sučelje za pokretanje i ispravljanje pogrešaka u vašim testovima.

Pisanje vašeg prvog Cypress testa

Kreirajmo jednostavan test kako bismo provjerili da se početna stranica web stranice ispravno učitava. Stvorite novu datoteku pod nazivom `example.cy.js` u `cypress/e2e` direktoriju vašeg projekta.


// cypress/e2e/example.cy.js

describe('Moj prvi test', () => {
  it('Posjećuje 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')
  })
})

Raščlanimo ovaj test:

Pokrenite ovaj test u Cypress Test Runneru da ga vidite na djelu. Trebali biste vidjeti kako preglednik odlazi na web stranicu Cypress Kitchen Sink, klika na poveznicu "type" i provjerava URL.

Cypress naredbe

Cypress pruža širok raspon naredbi za interakciju s vašom aplikacijom. Evo nekih od najčešće korištenih naredbi:

Ovo je samo nekoliko od mnogih naredbi dostupnih u Cypressu. Pogledajte Cypress dokumentaciju za potpuni popis naredbi i njihovih opcija.

Provjere (Assertions) u Cypressu

Provjere se koriste za potvrđivanje očekivanog ponašanja vaše aplikacije. Cypress pruža bogat skup ugrađenih provjera koje možete koristiti za provjeru stanja elemenata, URL-a, naslova i još mnogo toga. Provjere se nadovezuju na Cypress naredbe pomoću metode `.should()`.

Evo nekoliko uobičajenih primjera provjera:

Također možete stvoriti prilagođene provjere koje odgovaraju vašim specifičnim potrebama.

Najbolje prakse za pisanje Cypress testova

Slijeđenje najboljih praksi može vam pomoći da pišete Cypress testove koji su lakši za održavanje, pouzdaniji i učinkovitiji. Evo nekoliko preporuka:

Napredne Cypress tehnike

Stubbing i Mocking

Cypress vam omogućuje da "stubate" mrežne zahtjeve i odgovore, što vam omogućuje simulaciju različitih scenarija i testiranje rukovanja pogreškama u vašoj aplikaciji. Ovo je posebno korisno za testiranje značajki koje se oslanjaju na vanjske API-je ili usluge.

Da biste "stubali" mrežni zahtjev, možete koristiti naredbu `cy.intercept()`. Na primjer, kod ispod "stuba" GET zahtjev na `/api/users` i vraća lažni odgovor:


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

Zatim možete čekati presretnuti zahtjev pomoću `cy.wait('@getUsers')` i provjeriti da vaša aplikacija ispravno obrađuje lažni odgovor.

Rad s Local Storageom i kolačićima (Cookies)

Cypress pruža naredbe za interakciju s lokalnom pohranom i kolačićima. Možete koristiti ove naredbe za postavljanje, dohvaćanje i brisanje lokalne pohrane i kolačića u svojim testovima.

Da biste postavili stavku u lokalnoj pohrani, možete koristiti naredbu `cy.window()` za pristup window objektu, a zatim koristiti metodu `localStorage.setItem()`. Na primjer:


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

Da biste dohvatili stavku iz lokalne pohrane, možete koristiti naredbu `cy.window()`, a zatim koristiti metodu `localStorage.getItem()`. Na primjer:


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

Da biste postavili kolačić, možete koristiti naredbu `cy.setCookie()`. Na primjer:


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

Da biste dohvatili kolačić, možete koristiti naredbu `cy.getCookie()`. Na primjer:


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

Rukovanje prijenosom datoteka

Cypress pruža dodatak pod nazivom `cypress-file-upload` koji pojednostavljuje prijenos datoteka u vašim testovima. Da biste instalirali dodatak, pokrenite sljedeću naredbu:

npm install -D cypress-file-upload

Zatim dodajte sljedeći redak u svoju `cypress/support/commands.js` datoteku:


import 'cypress-file-upload';

Zatim možete koristiti naredbu `cy.uploadFile()` za prijenos datoteke. Na primjer:


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

Rad s IFrameovima

Testiranje IFrameova može biti komplicirano, ali Cypress pruža način za interakciju s njima. Možete koristiti naredbu `cy.frameLoaded()` da pričekate da se IFrame učita, a zatim koristiti naredbu `cy.iframe()` da biste dobili document objekt IFramea.


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

Cypress i kontinuirana integracija/kontinuirana isporuka (CI/CD)

Integracija Cypressa u vaš CI/CD proces ključna je za osiguravanje kvalitete vaše aplikacije. Cypress testove možete pokrenuti u "headless" načinu rada u vašem CI/CD okruženju. Evo kako:

  1. Instalirajte Cypress: Osigurajte da je Cypress instaliran kao ovisnost u vašem projektu.
  2. Konfigurirajte CI/CD: Konfigurirajte svoj CI/CD proces za pokretanje Cypress testova nakon svakog builda.
  3. Pokrenite Cypress u "headless" načinu: Koristite naredbu `cypress run` za pokretanje Cypress testova u "headless" načinu.

Primjer CI/CD konfiguracije (koristeći GitHub Actions):


name: Cypress Testovi

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: Instaliraj ovisnosti
        run: npm install
      - name: Pokreni Cypress
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Ova konfiguracija će pokrenuti Cypress testove svaki put kada se kod pošalje na `main` granu ili se stvori pull request prema `main` grani. Akcija `cypress-io/github-action` pojednostavljuje proces pokretanja Cypress testova u GitHub Actions.

Ispravljanje pogrešaka (Debugging) u Cypress testovima

Cypress pruža izvrsne alate za ispravljanje pogrešaka koji vam pomažu identificirati i popraviti probleme u vašim testovima. Evo nekoliko savjeta za ispravljanje pogrešaka u Cypress testovima:

Cypress u usporedbi s drugim radnim okvirima za testiranje

Iako je Cypress moćan radni okvir za end-to-end testiranje, važno je razumjeti kako se uspoređuje s drugim popularnim opcijama. Evo kratkog pregleda:

Izbor radnog okvira ovisi o specifičnim potrebama i zahtjevima vašeg projekta. Cypress je izvrstan izbor za moderne web aplikacije koje zahtijevaju brzo, pouzdano i developerima prilagođeno end-to-end testiranje.

Primjeri iz stvarnog svijeta korištenja Cypressa

Istražimo nekoliko primjera iz stvarnog svijeta o tome kako se Cypress može koristiti za testiranje različitih vrsta web aplikacija:

Testiranje e-commerce aplikacije

Možete koristiti Cypress za testiranje različitih korisničkih tokova u e-commerce aplikaciji, kao što su:

Evo primjera Cypress testa koji provjerava može li korisnik uspješno dodati proizvod u svoju košaricu:


it('Dodaje proizvod u košaricu', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Testiranje aplikacije za društvene mreže

Možete koristiti Cypress za testiranje interakcija korisnika u aplikaciji za društvene mreže, kao što su:

Evo primjera Cypress testa koji provjerava može li korisnik uspješno stvoriti novu objavu:


it('Stvara novu objavu', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Pozdrav, svijete!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Pozdrav, svijete!')
})

Testiranje bankarske aplikacije

Za bankarske aplikacije, Cypress se može koristiti za testiranje ključnih funkcionalnosti kao što su:

Test za provjeru prijenosa sredstava mogao bi izgledati ovako (s odgovarajućim "stubbingom" radi sigurnosti):


it('Uspješno prenosi 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čak

Cypress je moćan i svestran radni okvir za end-to-end testiranje koji vam može pomoći osigurati kvalitetu i pouzdanost vaših web aplikacija. Njegov developerima prilagođen API, moćne značajke i izvrsne performanse čine ga popularnim izborom među developerima i QA inženjerima diljem svijeta. Slijedeći najbolje prakse navedene u ovom vodiču, možete pisati učinkovite Cypress testove koji će vam pomoći da rano otkrijete pogreške u razvojnom procesu i isporučite visokokvalitetni softver svojim korisnicima.

Kako se web aplikacije nastavljaju razvijati, važnost end-to-end testiranja samo će rasti. Prihvaćanje Cypressa i njegova integracija u vaš razvojni tijek rada osnažit će vas da gradite robusnija, pouzdanija i korisnicima prilagođena web iskustva.