Dezvoltarea front-end implică construirea de aplicații funcționale, atrăgătoare din punct de vedere vizual, orientate spre client. Dar există o captură; aceste aplicații trebuie să se asigure că utilizatorii au o experiență perfectă.

Deși testele unitare și de integrare sunt esențiale pentru a verifica funcționalitatea unei aplicații, este posibil să nu capteze în totalitate interacțiunile tipice ale utilizatorului. Pentru a simula cu adevărat călătoria unui utilizator, trebuie să rulați teste end-to-end care reproduc interacțiunile reale ale utilizatorului. Acest lucru vă va asigura că aplicația dumneavoastră funcționează așa cum doriți de la început până la sfârșit.

Noțiuni introductive cu testarea end-to-end folosind Cypress

Scopul principal al testării end-to-end în aplicațiile front-end este de a verifica rezultatele, mai degrabă decât detaliile de implementare a logicii de afaceri.

Luați un formular de conectare ca exemplu. În mod ideal, ați testa dacă ecranul de conectare apare așa cum trebuie și face ceea ce este menit să facă. În esență, detaliile tehnice subiacente nu sunt importante. Scopul final este pur și simplu să intri în pielea utilizatorului și să-i evalueze întreaga experiență.

Chiparos este un cadru excelent de testare a automatizării care este compatibil cu unele dintre ele cele mai populare cadre JavaScript. Capacitatea sa de a rula teste direct în browser și suita sa cuprinzătoare de funcții de testare fac testarea fără probleme și eficientă. De asemenea, acceptă diverse abordări de testare, inclusiv:

• Teste unitare
• Teste end-to-end
• Teste de integrare

Pentru a scrie teste end-to-end pentru o aplicație React, luați în considerare aceste povești de utilizatori:

• Un utilizator poate vedea un câmp de introducere cu un buton de trimitere corespunzător.
• Un utilizator poate introduce o interogare de căutare în câmpul de introducere.
• După ce face clic pe butonul de trimitere, un utilizator ar trebui să vadă o listă de articole afișată chiar sub câmpul de introducere.

Urmând aceste povești ale utilizatorilor, puteți construi o aplicație React simplă care permite utilizatorului să caute produse. Aplicația va prelua datele despre produse din DummyJSON API și redați-l pe pagină.

Puteți găsi codul acestui proiect în documentul său GitHub repertoriu

Configurați un proiect React

Pentru a incepe, creați un proiect React folosind Vite sau utilizați comandă create-react-app pentru a configura o aplicație React de bază. Odată ce procesul de instalare este finalizat, continuați și instalați pachetul Cypress ca dependență de dezvoltare în proiectul dvs.:

npm install cypress --save-dev

Acum, actualizează-ți pachet.json fișier prin adăugarea acestui script:

"test": "npx cypress open"

Creați o componentă funcțională

În src director, creați un folder și denumiți-l componente. În interiorul acestui folder, adăugați unul nou produse.jsx fișier și includeți codul de mai jos.

import React, { useState, useEffect } from'react';
import"./style.component.css"
exportdefaultfunctionProducts(prop) {
const [products, setProducts] = useState([]);
const [error, setError] = useState(null); 
const { searchInput } = prop;
return (
"product-catalogue">
 {error? (
Product not found</p>
 ): (

"product-list">
 {products.slice(0, 6).map((product) => (
"product" key={product.id}>
Title: {product.title}</h2>


Price: ${product.price}</p>
 </div>
 ))}
 </div>
 )}
 </div>
 );
}

În cadrul componentei funcționale, definiți a useEffect hook, care execută o funcție asincronă care preia datele despre produs pe baza interogării de căutare furnizate.

 useEffect(() => {
const fetchProducts = async () => {
if (searchInput) {
const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
thrownewError('Error fetching products');
 }
const json = await response.json();
 setProducts(json.products);
 setError(null); 
 } catch (error) {
 setError(error.message);
 }
 }
 };
 fetchProducts();
 }, [searchInput]);

Actualizați fișierul App.jsx

Acum, actualizați App.jsx fisier cu urmatorul cod:

import React, { useState, useRef } from'react'
import'./App.css'
import Products from'./components/Products'
functionApp() {
const [searchInput, setSearchInput] = useState('')
const searchInputRef = useRef('');
const handleSubmit = (e) => {
 setSearchInput(searchInputRef.current.value);
 }
return (



Cypress Testing Library tutorial</h1>
"input">Input</label>

 id="text"
 type="text"
 ref={searchInputRef}
 />


"btn" type="button" onClick={handleSubmit}>Submit</button>
"products-component" searchInput={searchInput} /> 
 </div>
 )
}
exportdefault App

Continuați și porniți serverul de dezvoltare.

npm run dev

Grozav! Ar trebui să puteți obține date specifice despre produse din API-ul JSON inactiv.

Configurați mediul de testare

Mai întâi, rulați comanda scriptului de testare pe terminalul dvs.:

npm run test

Această comandă va declanșa și deschide clientul Cypress. Continuați și faceți clic pe Testarea E2E buton.

Apoi, faceți clic Continua pentru a adăuga fișiere de configurare Cypress.

Odată ce acest proces este finalizat, ar trebui să vedeți un nou director de teste Cypress în proiectul dvs. În plus, clientul Cypress adaugă automat fișierul cypress.config.js. Puteți actualiza acest fișier pentru a personaliza în continuare diverse aspecte ale mediului de testare, comportamentului și configurației.

Scrieți teste end-to-end folosind Cypress

Pentru a scrie primul test, trebuie să selectați browserul în care va rula testul. Selectați opțiunea preferată dintre cele disponibile în clientul Cypress.

Cypress va lansa o versiune simplificată a browserului pe care l-ați ales, creând un mediu controlat pentru a rula teste.

Selectează Creați specificații noi opțiunea de a crea fișierul de test.

Mergeți la editorul de cod, deschideți cypress/e2e/App.spec.cy.js fișier și actualizați conținutul acelui fișier cu următorul cod.

describe('App Tests', () => {
 beforeEach(() => {
 cy.visit('http://127.0.0.1:5173/'); 
 });
 it('Renders input field and submit button', () => { 
 cy.get('#text').should('exist').should('be.visible');
 cy.get('#btn').should('exist').should('be.visible').contains('Submit');
 });
 it('Enters a search query', () => {
const searchQuery = 'laptops';
 cy.get('#text').type(searchQuery);
 });
});

Revenind la poveștile utilizatorilor evidențiate mai sus, această suită de teste specifică verifică două aspecte:

• Că browserul afișează un câmp de introducere și un buton de trimitere pe pagină.
• Că utilizarea poate introduce o interogare de căutare.

Ca și alte instrumente de testare JavaScript, cum ar fi Jest și Supertest, Cypress utilizează o sintaxă declarativă și un limbaj pentru a defini cazurile de testare.

Pentru a rula testul, reveniți la versiunea simplificată de browser gestionată de Cypress și alegeți fișierul de test specific pe care doriți să îl rulați.

Cypress va rula testele și va afișa rezultatele în panoul din stânga locului de joacă.

Simularea proceselor de aplicare

Pentru a vă asigura că parcurgeți și testați întreaga călătorie a utilizatorului, în acest caz de utilizare specific, trebuie să verificați acest lucru aplicația poate prelua intrarea utilizatorului, poate prelua datele necesare și, în sfârșit, poate afișa datele în browser pagină.

Pentru claritate, puteți crea un fișier de testare nou pentru a găzdui o suită de testare diferită în interiorul e2e pliant. Alternativ, puteți opta și pentru a include toate suitele de testare care explorează un anumit caz de testare într-un singur fișier de testare.

Continuați și creați unul nou Produse.spec.cy.js dosar în e2e pliant. În interiorul acestui fișier, includeți următorul cod.

describe('Products Tests', () => {
 it(' fetches and displays the data', () => {
const searchQuery = 'laptops';
 cy.visit('http://127.0.0.1:5173'); 

 cy.get('#text').type(searchQuery);
 cy.get('#btn').contains('Submit').click();

 cy.get('.product').should('have.length.greaterThan', 0);

 cy.get('.product').first().should('contain', 'Title'); 
 cy.get('.product').first().should('contain', 'Price: $');
 });
 });

Această suită de teste verifică dacă, odată ce un utilizator trimite un anumit articol de căutare, aplicația preia și afișează datele pe pagina browserului.

Face acest lucru simulând procesul de introducere a intrării de căutare, făcând clic pe butonul de trimitere, așteptând produse de încărcat și apoi verificarea prezenței articolelor de produs, împreună cu detalii precum titlul și prețul. În esență, surprinde și verifică întreaga experiență din perspectiva utilizatorului.

Simularea erorilor și a răspunsurilor

De asemenea, puteți simula diverse scenarii de eroare și răspunsuri în cadrul testelor dumneavoastră Cypress.

Creaza un nou Error.spec.cy.js dosar în e2e director și includeți următorul cod.

describe('Error Handling Tests', () => {
 it('Displays error message for incorrect search query', () => {

 cy.intercept('GET', /https:\/\/dummyjson\.com\/products\/category\/.*/, {
 statusCode: 404, // Not Found
 body: 'Product not found'
 }).as('fetchProducts');
 cy.visit('http://127.0.0.1:5173');
const incorrectSearchQuery = 'rocket';
 cy.get('#text').type(incorrectSearchQuery);
 cy.get('#btn').click();
 cy.wait('@fetchProducts');
 cy.contains('Product not found').should('be.visible');
 });
 });

Această suită de teste verifică dacă se afișează un mesaj de eroare atunci când un utilizator introduce o interogare de căutare incorectă.

Pentru ca testul să treacă, folosește Cypress' intercepta funcția de blocare a rețelei și de a simula o eroare de solicitare a rețelei. Apoi verifică că, după introducerea unei interogări de căutare incorecte în câmpul de introducere și inițierea procesului de preluare, pe pagină este afișat vizibil un mesaj de eroare — Produsul nu a fost găsit.

Acest rezultat indică faptul că mecanismul de gestionare a erorilor funcționează conform așteptărilor.

Utilizarea Cypress în dezvoltarea testată

Testarea este o cerință fundamentală de dezvoltare, dar poate fi și un proces consumator de timp. Cu toate acestea, încorporarea Cypress poate aduce satisfacția absolută de a vă urmări cazurile de testare rulând împreună.

Cypress este un instrument excelent pentru implementarea dezvoltării bazate pe teste în aplicații - nu numai că oferă o suită cuprinzătoare de funcții de testare, dar și suportă diverse strategii de testare. Pentru a profita la maximum de Cypress, continuați și explorați documentația sa oficială pentru a descoperi mult mai multe capacități de testare.