M

MLOG

Română

Un ghid complet despre Cypress, puternicul framework de testare end-to-end, care acoperă instalarea, scrierea testelor, depanarea, integrarea CI/CD și cele mai bune practici.

Cypress: Ghidul Complet de Testare End-to-End pentru Aplicații Web

În peisajul actual al dezvoltării web, aflat în evoluție rapidă, asigurarea calității și fiabilității aplicațiilor web este primordială. Testarea End-to-End (E2E) joacă un rol crucial în verificarea faptului că toate componentele unei aplicații funcționează perfect împreună din perspectiva utilizatorului. Cypress s-a impus ca un framework de testare E2E de top, oferind o experiență prietenoasă pentru dezvoltatori, funcționalități puternice și performanțe excelente. Acest ghid complet vă va prezenta tot ce trebuie să știți pentru a începe cu Cypress și pentru a testa eficient aplicațiile dvs. web.

Ce este Cypress?

Cypress este un instrument de testare front-end de ultimă generație, construit pentru web-ul modern. Spre deosebire de framework-urile de testare tradiționale care rulează teste într-un browser, Cypress operează direct în browser, oferindu-vă control și vizibilitate fără precedent asupra comportamentului aplicației dvs. Este conceput pentru a fi rapid, fiabil și ușor de utilizat, ceea ce îl face o alegere populară în rândul dezvoltatorilor și inginerilor QA din întreaga lume. Cypress este scris în JavaScript și se execută în interiorul browserului, ceea ce îl face foarte performant și oferă acces de neegalat la elementele interne ale aplicației.

Beneficiile Cheie ale Utilizării Cypress

Instalare și Configurare

Este simplu să începeți cu Cypress. Iată cum să îl instalați:

  1. Cerințe Preliminare: Asigurați-vă că aveți Node.js și npm (Node Package Manager) instalate pe sistemul dvs. Le puteți descărca de pe site-ul oficial Node.js.
  2. Instalați Cypress: Deschideți terminalul sau linia de comandă, navigați la directorul proiectului dvs. și rulați următoarea comandă:
    3. npm install cypress --save-dev
  3. Deschideți Cypress: Odată ce instalarea este finalizată, puteți deschide Cypress Test Runner rulând:
    4. npx cypress open

    Această comandă va lansa Cypress Test Runner, care oferă o interfață grafică pentru rularea și depanarea testelor dvs.

Scrierea Primului Test Cypress

Să creăm un test simplu pentru a verifica dacă pagina principală a unui site web se încarcă corect. Creați un fișier nou numit `example.cy.js` în directorul `cypress/e2e` al proiectului dvs.


// cypress/e2e/example.cy.js

describe('Primul Meu Test', () => {
  it('Vizitează 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')
  })
})

Să analizăm acest test:

Rulați acest test în Cypress Test Runner pentru a-l vedea în acțiune. Ar trebui să vedeți browserul navigând la site-ul Cypress Kitchen Sink, dând clic pe linkul "type" și verificând URL-ul.

Comenzi Cypress

Cypress oferă o gamă largă de comenzi pentru a interacționa cu aplicația dvs. Iată câteva dintre cele mai utilizate comenzi:

Acestea sunt doar câteva dintre multele comenzi disponibile în Cypress. Consultați documentația Cypress pentru o listă completă de comenzi și opțiunile acestora.

Aserțiuni în Cypress

Aserțiunile sunt folosite pentru a verifica comportamentul așteptat al aplicației dvs. Cypress oferă un set bogat de aserțiuni integrate pe care le puteți utiliza pentru a verifica starea elementelor, URL-ul, titlul și multe altele. Aserțiunile sunt înlănțuite după comenzile Cypress folosind metoda `.should()`.

Iată câteva exemple comune de aserțiuni:

Puteți, de asemenea, să creați aserțiuni personalizate pentru a se potrivi nevoilor dvs. specifice.

Cele Mai Bune Practici pentru Scrierea Testelor Cypress

Urmarea celor mai bune practici vă poate ajuta să scrieți teste Cypress mai ușor de întreținut, mai fiabile și mai eficiente. Iată câteva recomandări:

Tehnici Avansate Cypress

Stubbing și Mocking

Cypress vă permite să simulați cererile și răspunsurile de rețea, permițându-vă să simulați diferite scenarii și să testați gestionarea erorilor aplicației. Acest lucru este deosebit de util pentru testarea funcționalităților care se bazează pe API-uri sau servicii externe.

Pentru a simula o cerere de rețea, puteți utiliza comanda `cy.intercept()`. De exemplu, codul de mai jos simulează o cerere GET către `/api/users` și returnează un răspuns mock:


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

Puteți apoi aștepta cererea interceptată folosind `cy.wait('@getUsers')` și verifica dacă aplicația dvs. gestionează corect răspunsul mock.

Lucrul cu Local Storage și Cookies

Cypress oferă comenzi pentru a interacționa cu local storage și cookie-uri. Puteți utiliza aceste comenzi pentru a seta, obține și șterge local storage și cookie-uri în testele dvs.

Pentru a seta un element în local storage, puteți utiliza comanda `cy.window()` pentru a accesa obiectul window și apoi utilizați metoda `localStorage.setItem()`. De exemplu:


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

Pentru a obține un element din local storage, puteți utiliza comanda `cy.window()` și apoi utilizați metoda `localStorage.getItem()`. De exemplu:


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

Pentru a seta un cookie, puteți utiliza comanda `cy.setCookie()`. De exemplu:


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

Pentru a obține un cookie, puteți utiliza comanda `cy.getCookie()`. De exemplu:


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

Gestionarea Încărcărilor de Fișiere

Cypress oferă un plugin numit `cypress-file-upload` care simplifică încărcarea fișierelor în testele dvs. Pentru a instala pluginul, rulați următoarea comandă:

npm install -D cypress-file-upload

Apoi, adăugați următoarea linie la fișierul dvs. `cypress/support/commands.js`:


import 'cypress-file-upload';

Puteți apoi utiliza comanda `cy.attachFile()` pentru a încărca un fișier. De exemplu:


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

Lucrul cu IFrames

Testarea IFrames poate fi dificilă, dar Cypress oferă o modalitate de a interacționa cu ele. Puteți utiliza comanda `cy.frameLoaded()` pentru a aștepta încărcarea unui IFrame și apoi utiliza comanda `cy.iframe()` pentru a obține obiectul document al IFrame-ului.


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

Cypress și Integrare Continuă/Livrare Continuă (CI/CD)

Integrarea Cypress în pipeline-ul CI/CD este esențială pentru asigurarea calității aplicației dvs. Puteți rula teste Cypress în modul headless în mediul CI/CD. Iată cum:

  1. Instalați Cypress: Asigurați-vă că Cypress este instalat ca dependență în proiectul dvs.
  2. Configurați CI/CD: Configurați pipeline-ul CI/CD pentru a rula testele Cypress după fiecare build.
  3. Rulați Cypress Headlessly: Utilizați comanda `cypress run` pentru a rula testele Cypress în modul headless.

Exemplu de configurare CI/CD (folosind 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'

Această configurație va rula testele Cypress ori de câte ori codul este împins în ramura `main` sau se creează un pull request către ramura `main`. Acțiunea `cypress-io/github-action` simplifică procesul de rulare a testelor Cypress în GitHub Actions.

Depanarea Testelor Cypress

Cypress oferă instrumente excelente de depanare pentru a vă ajuta să identificați și să remediați problemele din testele dvs. Iată câteva sfaturi pentru depanarea testelor Cypress:

Cypress vs. Alte Framework-uri de Testare

Deși Cypress este un puternic framework de testare end-to-end, este esențial să înțelegeți cum se compară cu alte opțiuni populare. Iată o scurtă prezentare generală:

Alegerea framework-ului depinde de nevoile și cerințele specifice ale proiectului dvs. Cypress este o alegere excelentă pentru aplicațiile web moderne care necesită testare end-to-end rapidă, fiabilă și prietenoasă pentru dezvoltatori.

Exemple Reale de Cypress în Acțiune

Să explorăm câteva exemple din lumea reală despre cum poate fi utilizat Cypress pentru a testa diferite tipuri de aplicații web:

Testarea unei Aplicații de E-commerce

Puteți utiliza Cypress pentru a testa diverse fluxuri de utilizatori într-o aplicație de e-commerce, cum ar fi:

Iată un exemplu de test Cypress care verifică dacă un utilizator poate adăuga cu succes un produs în coș:


it('Adaugă un produs în coș', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Testarea unei Aplicații de Social Media

Puteți utiliza Cypress pentru a testa interacțiunile utilizatorilor într-o aplicație de social media, cum ar fi:

Iată un exemplu de test Cypress care verifică dacă un utilizator poate crea cu succes o postare nouă:


it('Creează o postare nouă', () => {
  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!')
})

Testarea unei Aplicații Bancare

Pentru aplicațiile bancare, Cypress poate fi utilizat pentru a testa funcționalități critice, cum ar fi:

Un test pentru a verifica un transfer de fonduri ar putea arăta astfel (cu stubbing corespunzător pentru securitate):


it('Transferă fonduri cu succes', () => {
  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')
})

Concluzie

Cypress este un framework de testare end-to-end puternic și versatil, care vă poate ajuta să asigurați calitatea și fiabilitatea aplicațiilor dvs. web. API-ul său prietenos pentru dezvoltatori, funcționalitățile puternice și performanța excelentă îl fac o alegere populară în rândul dezvoltatorilor și inginerilor QA din întreaga lume. Urmând cele mai bune practici prezentate în acest ghid, puteți scrie teste Cypress eficiente care vă vor ajuta să depistați erorile devreme în procesul de dezvoltare și să livrați software de înaltă calitate utilizatorilor dvs.

Pe măsură ce aplicațiile web continuă să evolueze, importanța testării end-to-end va crește. Adoptarea Cypress și integrarea acestuia în fluxul de lucru de dezvoltare vă vor permite să construiți experiențe web mai robuste, fiabile și prietenoase cu utilizatorul.