Razvoj sprednjega dela vključuje gradnjo vizualno privlačnih, funkcionalnih aplikacij, usmerjenih v odjemalce. Vendar obstaja ulov; te aplikacije morajo uporabnikom zagotavljati brezhibno izkušnjo.

Čeprav so testi enote in integracije bistveni za preverjanje funkcionalnosti aplikacije, morda ne bodo v celoti zajeli tipičnih uporabniških interakcij. Če želite resnično simulirati uporabnikovo pot, morate izvajati teste od konca do konca, ki posnemajo dejanske interakcije uporabnikov. Tako boste zagotovili, da bo vaša aplikacija od začetka do konca delovala tako, kot ste nameravali.

Začetek testiranja od konca do konca z uporabo Cypressa

Glavni cilj testiranja od konca do konca v sprednjih aplikacijah je preveriti rezultate in ne podrobnosti izvedbe poslovne logike.

Za primer vzemite obrazec za prijavo. V idealnem primeru bi preizkusili, ali se prijavni zaslon pojavi tako, kot bi se moral, in ali naredi to, kar je namenjen. V bistvu so osnovne tehnične podrobnosti nepomembne. Končni cilj je preprosto stopiti v uporabnikovo kožo in oceniti njegovo celotno izkušnjo.

Cipresa je odlično ogrodje za avtomatizirano testiranje, ki je združljivo z nekaterimi najbolj priljubljena ogrodja JavaScript. Njegova zmožnost izvajanja testov neposredno v brskalniku in obsežen nabor funkcij za testiranje omogočata brezhibno in učinkovito testiranje. Podpira tudi različne pristope testiranja, vključno z:

• Preizkusi enot
• Testi od konca do konca
• Integracijski testi

Če želite napisati teste od konca do konca za aplikacijo React, upoštevajte te zgodbe uporabnikov:

• Uporabnik lahko vidi vnosno polje z ustreznim gumbom za oddajo.
• Uporabnik lahko v polje za vnos vnese iskalno poizvedbo.
• Po kliku na gumb za pošiljanje bi moral uporabnik videti seznam elementov, prikazanih tik pod poljem za vnos.

Če sledite tem zgodbam uporabnikov, lahko zgradite preprosto aplikacijo React, ki uporabniku omogoča iskanje izdelkov. Aplikacija bo pridobila podatke o izdelkih iz API DummyJSON in ga upodobite na strani.

Kodo tega projekta najdete v GitHub repozitorij

Nastavite projekt React

Za začetek, ustvarite projekt React z uporabo Vite ali uporabite ukaz create-react-app za nastavitev osnovne aplikacije React. Ko je postopek namestitve končan, nadaljujte in namestite paket Cypress kot odvisnost razvijalca v vašem projektu:

npm install cypress --save-dev

Zdaj posodobite svoje package.json datoteko tako, da dodate ta skript:

"test": "npx cypress open"

Ustvarite funkcionalno komponento

V src ustvarite mapo in jo poimenujte komponente. Znotraj te mape dodajte novo izdelki.jsx datoteko in vključite spodnjo kodo.

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

Znotraj funkcionalne komponente opredelite a useEffect hook, ki izvaja asinhrono funkcijo, ki pridobi podatke o izdelku na podlagi podane iskalne poizvedbe.

 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]);

Posodobite datoteko App.jsx

Zdaj posodobite App.jsx datoteko z naslednjo kodo:

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

Nadaljujte in zaženite razvojni strežnik.

npm run dev

Super! Iz navideznega API-ja JSON bi morali imeti možnost pridobiti določene podatke o izdelku.

Nastavite preskusno okolje

Najprej zaženite ukaz testnega skripta na vašem terminalu:

npm run test

Ta ukaz bo sprožil in odprl odjemalca Cypress. Nadaljujte in kliknite E2E testiranje gumb.

Nato kliknite Nadaljuj da dodate konfiguracijske datoteke Cypress.

Ko je ta postopek končan, bi morali v svojem projektu videti nov imenik testov Cypress. Poleg tega Cypressov odjemalec samodejno doda datoteko cypress.config.js. To datoteko lahko posodobite, da dodatno prilagodite različne vidike vašega preskusnega okolja, obnašanja in nastavitev.

Pišite teste od konca do konca z uporabo Cypressa

Če želite napisati svoj prvi test, morate izbrati brskalnik, v katerem se bo test izvajal. Izberite želeno možnost med razpoložljivimi v odjemalcu Cypress.

Cypress bo zagnal poenostavljeno različico brskalnika, ki ste ga izbrali, in ustvaril nadzorovano okolje za izvajanje testov.

Izberite Ustvari novo spec možnost za ustvarjanje testne datoteke.

Pojdite v urejevalnik kode, odprite cypress/e2e/App.spec.cy.js datoteko in posodobite vsebino te datoteke z naslednjo kodo.

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

Če se vrnemo k zgoraj izpostavljenim uporabniškim zgodbam, ta posebna zbirka testov preverja dva vidika:

• Da brskalnik na strani prikaže polje za vnos in gumb za oddajo.
• Da lahko uporaba vnese iskalno poizvedbo.

Tako kot druga orodja za testiranje JavaScript, kot sta Jest in Supertest, Cypress uporablja deklarativno sintakso in jezik za definiranje testnih primerov.

Če želite zagnati preizkus, se vrnite na poenostavljeno različico brskalnika, ki jo upravlja Cypress, in izberite specifično preskusno datoteko, ki jo želite zagnati.

Cypress bo izvedel teste in prikazal rezultate na levi strani testnega igrišča.

Simulacija aplikacijskih procesov

Če želite zagotoviti, da greste skozi in preizkusite celotno uporabniško pot – v tem specifičnem primeru uporabe – morate preveriti, da aplikacija lahko sprejme uporabniški vnos, pridobi zahtevane podatke in nazadnje prikaže podatke v brskalniku strani.

Zaradi jasnosti lahko ustvarite novo preskusno datoteko, da se prilagodite drugemu testnemu naboru znotraj e2e mapo. Lahko pa se odločite tudi za vključitev vseh preskusnih zbirk, ki raziskujejo določen testni primer, v eno testno datoteko.

Nadaljujte in ustvarite novo Products.spec.cy.js datoteka v e2e mapo. V to datoteko vključite naslednjo kodo.

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: $');
 });
 });

Ta testna zbirka preverja, ali aplikacija pridobi in prikaže podatke na strani brskalnika, ko uporabnik odda določen iskalni element.

To stori tako, da simulira postopek vnosa iskalnega vnosa, klika gumba za pošiljanje in čakanja na izdelke za nalaganje in nato preverjanje prisotnosti elementov izdelka, skupaj s podrobnostmi, kot sta naslov in cena. V bistvu zajame in preveri celotno izkušnjo z vidika uporabnika.

Simulacija napak in odzivov

Znotraj testov Cypress lahko tudi simulirate različne scenarije napak in odzive.

Ustvari novo Error.spec.cy.js datoteka v e2e imenik in vključite naslednjo kodo.

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

Ta zbirka testov preveri, ali se prikaže sporočilo o napaki, ko uporabnik vnese napačno iskalno poizvedbo.

Za uspešno preizkušanje uporablja Cypress' prestreči funkcijo za zatikanje omrežja in simulacijo napake omrežne zahteve. Nato preveri, ali je po vnosu napačne iskalne poizvedbe v vnosno polje in sprožitvi postopka pridobivanja na strani vidno prikazano sporočilo o napaki — Izdelka ni bilo mogoče najti.

Ta rezultat kaže, da mehanizem za obravnavanje napak deluje po pričakovanjih.

Uporaba Cypressa v razvoju, ki temelji na testiranju

Testiranje je temeljna razvojna zahteva, vendar je lahko tudi dolgotrajen proces. Vendar pa lahko vključitev Cypressa prinese čisto zadovoljstvo ob gledanju vaših testnih primerov, ki tečejo skupaj.

Cypress je odlično orodje za implementacijo testno vodenega razvoja v aplikacijah – ne samo, da zagotavlja obsežen nabor funkcij testiranja, ampak tudi podpira različne strategije testiranja. Če želite kar najbolje izkoristiti Cypress, pojdite naprej in raziščite njegovo uradno dokumentacijo, da odkrijete veliko več možnosti testiranja.