A frontend fejlesztése vizuálisan tetszetős, funkcionális, ügyféloldali alkalmazások létrehozását foglalja magában. De van egy fogás; ezeknek az alkalmazásoknak biztosítaniuk kell a felhasználók zökkenőmentes élményét.

Noha az egység- és integrációs tesztek elengedhetetlenek az alkalmazások működőképességének ellenőrzéséhez, előfordulhat, hogy nem rögzítik teljesen a tipikus felhasználói interakciókat. A felhasználó utazásának valódi szimulálásához végpontok közötti teszteket kell futtatnia, amelyek megismétlik a tényleges felhasználói interakciókat. Ez biztosítja, hogy az alkalmazás az elejétől a végéig a kívánt módon működjön.

A Cypress használatával végzett teljes körű tesztelés első lépései

A front-end alkalmazásokban végzett teljes körű tesztelés fő célja az eredmények ellenőrzése, nem pedig az üzleti logika megvalósítási részletei.

Vegyünk példának egy bejelentkezési űrlapot. Ideális esetben azt tesztelné, hogy a bejelentkezési képernyő úgy jelenik-e meg, ahogy kellene, és azt csinálja-e, amit kell. Lényegében a mögöttes technikai részletek nem fontosak. A végcél egyszerűen a felhasználó helyébe lépés, és a teljes élmény értékelése.

Ciprus egy nagyszerű automatizálási tesztelési keretrendszer, amely kompatibilis a következőkkel a legnépszerűbb JavaScript-keretrendszerek. A tesztek közvetlenül a böngészőben történő futtatásának képessége és a tesztelési funkciók átfogó készlete zökkenőmentessé és hatékonysá teszi a tesztelést. Különféle tesztelési megközelítéseket is támogat, többek között:

• Egységtesztek
• Végpontok közötti tesztek
• Integrációs tesztek

Ha teljes körű teszteket szeretne írni egy React alkalmazáshoz, vegye figyelembe az alábbi felhasználói történeteket:

• A felhasználó láthat egy beviteli mezőt a megfelelő küldés gombbal.
• A felhasználó beírhat egy keresési lekérdezést a beviteli mezőbe.
• A küldés gombra kattintás után a felhasználónak látnia kell az elemek listáját közvetlenül a beviteli mező alatt.

Ezeket a felhasználói történeteket követve létrehozhat egy egyszerű React alkalmazást, amely lehetővé teszi a felhasználók számára, hogy keressenek termékeket. Az alkalmazás lekéri a termékadatokat a DummyJSON API és jelenítse meg az oldalon.

A projekt kódja megtalálható benne GitHub adattár

React projekt létrehozása

A kezdéshez Hozzon létre egy React projektet a Vite segítségével vagy használja a Create-react-app paranccsal beállíthat egy alapvető React alkalmazást. Miután a telepítési folyamat befejeződött, folytassa és telepítse a Cypress csomagot fejlesztői függőségként a projektben:

npm install cypress --save-dev

Most frissítse package.json fájlt a következő szkript hozzáadásával:

"test": "npx cypress open"

Funkcionális komponens létrehozása

Ban,-ben src könyvtárba, hozzon létre egy mappát, és nevezze el alkatrészek. Adjon hozzá egy újat ebben a mappában products.jsx fájlt, és mellékelje az alábbi kódot.

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

A funkcionális komponensen belül határozza meg a useEffect hook, amely egy aszinkron funkciót hajt végre, amely lekéri a termékadatokat a megadott keresési lekérdezés alapján.

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

Frissítse az App.jsx fájlt

Most frissítse a App.jsx fájl a következő kóddal:

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

Indítsa el a fejlesztői szervert.

npm run dev

Nagy! Lehetősége van konkrét termékadatok lekérésére a hamis JSON API-ból.

Állítsa be a tesztelési környezetet

Először futtassa a tesztszkript parancsot a terminálon:

npm run test

Ez a parancs elindítja és megnyitja a Cypress klienst. Menjen tovább, és kattintson a gombra E2E tesztelés gomb.

Ezután kattintson Folytatni Cypress konfigurációs fájlok hozzáadásához.

Ha ez a folyamat befejeződött, egy új Cypress tesztkönyvtárat kell látnia a projektben. Ezenkívül a Cypress kliense automatikusan hozzáadja a cypress.config.js fájlt. Ezt a fájlt frissítheti a tesztkörnyezet, a viselkedés és a beállítás különböző szempontjainak további testreszabásához.

Írjon végponttól végpontig teszteket a Cypress segítségével

Az első teszt megírásához ki kell választania azt a böngészőt, amelyben a teszt futni fog. Válassza ki a kívánt opciót a Cypress kliensben elérhető lehetőségek közül.

A Cypress elindítja a választott böngésző egyszerűsített verzióját, ellenőrzött környezetet hozva létre a tesztek futtatásához.

Válaszd ki a Hozzon létre új specifikációt lehetőséget a tesztfájl létrehozására.

Nyissa meg a kódszerkesztőt, és nyissa meg a cypress/e2e/App.spec.cy.js fájlt, és frissítse a fájl tartalmát a következő kóddal.

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

Visszatérve a fent kiemelt felhasználói történetekre, ez a konkrét tesztcsomag két szempontot igazol:

• Hogy a böngésző megjelenítsen egy beviteli mezőt és egy küldés gombot az oldalon.
• Hogy a felhasználó beírhat egy keresési lekérdezést.

Más JavaScript-tesztelőeszközökhöz hasonlóan, mint például a Jest és a Supertest, a Cypress deklaratív szintaxist és nyelvet alkalmaz a tesztesetek meghatározásához.

A teszt futtatásához térjen vissza a Cypress által kezelt egyszerűsített böngészőverzióhoz, és válassza ki a futtatni kívánt tesztfájlt.

A Cypress futtatja a teszteket, és megjeleníti az eredményeket a tesztjátszótér bal oldali paneljén.

Pályázati folyamatok szimulálása

Annak biztosítása érdekében, hogy végigjárja és tesztelje a teljes felhasználói utat – ebben a konkrét használati esetben – ezt ellenőriznie kell az alkalmazás képes fogadni a felhasználói bevitelt, lekérni a szükséges adatokat, és végül megjeleníteni az adatokat a böngészőben oldalon.

Az egyértelműség kedvéért létrehozhat egy új tesztfájlt, amely egy másik tesztcsomaghoz illeszkedik e2e mappát. Alternatív megoldásként azt is megadhatja, hogy egy tesztfájlba belefoglalja az összes tesztcsomagot, amely egy adott tesztesetet vizsgál.

Menj előre, és hozz létre egy újat Products.spec.cy.js fájl a e2e mappát. Ebben a fájlban adja meg a következő kódot.

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

Ez a tesztcsomag ellenőrzi, hogy amint a felhasználó elküld egy adott keresési elemet, az alkalmazás lekéri és megjeleníti az adatokat a böngésző oldalon.

Ezt úgy teszi, hogy szimulálja a keresési beviteli folyamatot, kattintson a küldés gombra, és várja meg a a betöltendő termékeket, majd ellenőrizze a termékelemek meglétét, valamint olyan részleteket, mint a cím és az ár. Lényegében a teljes élményt rögzíti és ellenőrzi a felhasználói szemszögből.

Hibák és válaszok szimulálása

Különféle hibaforgatókönyveket és -válaszokat is szimulálhat a Cypress tesztjein belül.

Újat csinálni Error.spec.cy.js fájl a e2e könyvtárat, és tartalmazza a következő kódot.

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

Ez a tesztcsomag ellenőrzi, hogy hibaüzenet jelenik-e meg, ha a felhasználó helytelen keresési lekérdezést ad meg.

Ahhoz, hogy a teszteset sikeres legyen, a Cypress-t használja elfogni funkciót a hálózat megszakításához és a hálózati kérés hibájának szimulálásához. Ezután ellenőrzi, hogy miután hibás keresési lekérdezést írt be a beviteli mezőbe, és elindította a lekérési folyamatot, egy hibaüzenet – A termék nem található – láthatóan megjelenik-e az oldalon.

Ez az eredmény azt jelzi, hogy a hibakezelő mechanizmus a várt módon működik.

A Cypress használata tesztvezérelt fejlesztésben

A tesztelés alapvető fejlesztési követelmény, de időigényes folyamat is lehet. A Cypress beépítése azonban óriási megelégedéssel töltheti el a tesztesetek együttfutását.

A Cypress nagyszerű eszköz a tesztvezérelt fejlesztés alkalmazásokban való megvalósításához – nemcsak a tesztelési funkciók átfogó készletét kínálja, hanem különféle tesztelési stratégiákat is támogat. Ahhoz, hogy a legtöbbet hozhassa ki a Cypress szolgáltatásból, folytassa, és fedezze fel a hivatalos dokumentációját, hogy még több tesztelési lehetőséget fedezzen fel.