Frontend-ontwikkeling omvat het bouwen van visueel aantrekkelijke, functionele klantgerichte apps. Maar er is een addertje onder het gras; deze toepassingen moeten ervoor zorgen dat gebruikers een naadloze ervaring hebben.

Hoewel unit- en integratietests essentieel zijn om de functionaliteit van een applicatie te verifiëren, kunnen ze de typische gebruikersinteracties mogelijk niet volledig vastleggen. Om de reis van een gebruiker echt te simuleren, moet u end-to-end tests uitvoeren die daadwerkelijke gebruikersinteracties repliceren. Dit zorgt ervoor dat uw toepassing van begin tot eind presteert zoals u dat wilt.

Aan de slag met end-to-end testen met Cypress

Het belangrijkste doel van end-to-end testen in front-endapplicaties is het verifiëren van de resultaten in plaats van de implementatiedetails van de bedrijfslogica.

Neem als voorbeeld een inlogformulier. Idealiter test je of het inlogscherm verschijnt zoals het hoort en doet waarvoor het bedoeld is. In wezen zijn de onderliggende technische details niet belangrijk. Het einddoel is eenvoudigweg in de schoenen van de gebruiker stappen en zijn hele ervaring evalueren.

Cipres is een geweldig raamwerk voor automatiseringstests dat compatibel is met sommige van de meest populaire JavaScript-frameworks. De mogelijkheid om tests rechtstreeks in de browser uit te voeren en het uitgebreide pakket aan testfuncties maken het testen naadloos en efficiënt. Het ondersteunt ook verschillende testbenaderingen, waaronder:

• Eenheidstests
• End-to-end-tests
• Integratietesten

Overweeg deze gebruikersverhalen om end-to-end-tests voor een React-applicatie te schrijven:

• Een gebruiker kan een invoerveld zien met een bijbehorende verzendknop.
• In het invoerveld kan een gebruiker een zoekopdracht invoeren.
• Nadat een gebruiker op de knop Verzenden heeft geklikt, ziet hij een lijst met items direct onder het invoerveld.

Door deze gebruikersverhalen te volgen, kunt u een eenvoudige React-applicatie bouwen waarmee een gebruiker naar producten kan zoeken. De app haalt productgegevens op uit de DummyJSON-API en geef het weer op de pagina.

U kunt de code van dit project vinden in zijn GitHub opslagplaats

Zet een React-project op

Starten, maak een React-project met Vite of gebruik de create-react-app-opdracht om een ​​standaard React-toepassing in te stellen. Zodra het installatieproces is voltooid, kunt u doorgaan en het Cypress-pakket installeren als een ontwikkelaarsafhankelijkheid in uw project:

npm install cypress --save-dev

Update nu uw pakket.json bestand door dit script toe te voegen:

"test": "npx cypress open"

Creëer een functionele component

In de src directory, maak een map en geef deze een naam componenten. Voeg in deze map een nieuw producten.jsx bestand en voeg de onderstaande code toe.

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

Definieer binnen de functionele component a gebruikEffect hook, die een asynchrone functie uitvoert die de productgegevens ophaalt op basis van de opgegeven zoekopdracht.

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

Werk het App.jsx-bestand bij

Update nu de App.jsx bestand met de volgende code:

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

Ga je gang en start de ontwikkelingsserver.

npm run dev

Geweldig! U zou specifieke productgegevens uit de dummy JSON API moeten kunnen ophalen.

Zet de testomgeving op

Voer eerst de opdracht testscript uit op uw terminal:

npm run test

Met deze opdracht wordt de Cypress-client geactiveerd en geopend. Ga je gang en klik op de E2E-testen knop.

Klik vervolgens Doorgaan om Cypress-configuratiebestanden toe te voegen.

Zodra dit proces is voltooid, zou u een nieuwe Cypress-testmap in uw project moeten zien. Bovendien voegt de Cypress-client automatisch het bestand cypress.config.js toe. U kunt dit bestand bijwerken om verschillende aspecten van uw testomgeving, het gedrag en de instellingen verder aan te passen.

Schrijf end-to-end-tests met Cypress

Om uw eerste test te schrijven, moet u de browser selecteren waarin de test zal worden uitgevoerd. Selecteer de optie van uw voorkeur uit de beschikbare opties in de Cypress-client.

Cypress zal een vereenvoudigde versie van de door u gekozen browser starten, waardoor een gecontroleerde omgeving ontstaat om tests uit te voeren.

Selecteer de Maak nieuwe spec optie om uw testbestand te maken.

Ga naar je code-editor, open het cypress/e2e/App.spec.cy.js bestand en werk de inhoud van dat bestand bij met de volgende code.

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

Terugkomend op de hierboven gemarkeerde gebruikersverhalen, verifieert deze specifieke testsuite twee aspecten:

• Dat de browser een invoerveld en een verzendknop op de pagina weergeeft.
• Dat het gebruik een zoekopdracht kan invoeren.

Net als andere JavaScript-testtools zoals Jest en Supertest, gebruikt Cypress een declaratieve syntaxis en taal om testgevallen te definiëren.

Om de test uit te voeren, keert u terug naar de vereenvoudigde browserversie die wordt beheerd door Cypress en kiest u het specifieke testbestand dat u wilt uitvoeren.

Cypress voert de tests uit en geeft de resultaten weer in het linkerpaneel van de testspeelplaats.

Applicatieprocessen simuleren

Om er zeker van te zijn dat u de hele gebruikersreis doorloopt en test, in dit specifieke gebruiksscenario, moet u dat verifiëren de applicatie kan de gebruikersinvoer verwerken, de vereiste gegevens ophalen en ten slotte de gegevens in de browser weergeven bladzijde.

Voor de duidelijkheid: u kunt een nieuw testbestand maken om plaats te bieden aan een andere testsuite in het e2e map. Als alternatief kunt u er ook voor kiezen om alle testsuites die een bepaalde testcase verkennen, in één testbestand op te nemen.

Ga je gang en maak een nieuwe Producten.spec.cy.js bestand in de e2e map. Voeg in dit bestand de volgende code toe.

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

Deze testsuite controleert of, zodra een gebruiker een bepaald zoekitem invoert, de app de gegevens ophaalt en weergeeft op de browserpagina.

Dit gebeurt door het proces te simuleren van het invoeren van de zoekinvoer, het klikken op de knop Verzenden en het wachten op de producten die moeten worden geladen en vervolgens de aanwezigheid van productitems verifiëren, samen met details zoals titel en prijs. In essentie legt het de hele ervaring vast en verifieert het vanuit het perspectief van de gebruiker.

Fouten en reacties simuleren

Binnen uw Cypress-tests kunt u ook verschillende foutscenario's en reacties simuleren.

Maak een nieuwe Fout.spec.cy.js bestand in de e2e directory en voeg de volgende code toe.

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

Deze testsuite controleert of er een foutmelding verschijnt wanneer een gebruiker een onjuiste zoekopdracht invoert.

Om de testcase te laten slagen, wordt gebruik gemaakt van Cypress' onderscheppen functie om het netwerk te stubben en een netwerkverzoekfout te simuleren. Vervolgens wordt gecontroleerd of na het invoeren van een onjuiste zoekopdracht in het invoerveld en het starten van het ophaalproces, er een foutmelding (Product niet gevonden) zichtbaar op de pagina wordt weergegeven.

Deze uitkomst geeft aan dat het foutafhandelingsmechanisme functioneert zoals verwacht.

Cypress gebruiken in testgestuurde ontwikkeling

Testen is een fundamentele ontwikkelingsvereiste, maar kan ook een tijdrovend proces zijn. Het integreren van Cypress kan echter de pure voldoening geven om uw testcases samen te zien verlopen.

Cypress is een geweldig hulpmiddel voor het implementeren van testgestuurde ontwikkeling in applicaties. Het biedt niet alleen een uitgebreide reeks testfuncties, maar ondersteunt ook verschillende teststrategieën. Om het meeste uit Cypress te halen, kun je de officiële documentatie verkennen om nog veel meer testmogelijkheden te ontdekken.