Hoe je end-to-end tests schrijft met Cypress in React-toepassingen
Frontend-ontwikkeling omvat het bouwen van visueel aantrekkelijke, functionele apps voor de klant. Maar er zit een addertje onder het gras: deze applicaties moeten ervoor zorgen dat gebruikers een naadloze ervaring hebben.
Om de werking van een applicatie volledig te valideren, is het noodzakelijk om zowel unit- als integratietests uit te voeren, die dienen om de functionaliteiten te bevestigen. Deze soorten testen omvatten echter niet alle aspecten van typische gebruikerservaringen. Om de reis van een gebruiker nauwkeurig na te bootsen, is het noodzakelijk om end-to-end tests uit te voeren die hun daadwerkelijke interacties met het systeem getrouw nabootsen. Op die manier kan men vertrouwen op de prestaties van de applicatie in elke fase van het proces.
Aan de slag met end-to-end testen met Cypress
Een van de primaire doelstellingen van end-to-end testen binnen front-end applicaties is ervoor te zorgen dat de gewenste resultaten worden behaald, in plaats van de specifieke werking van de onderliggende bedrijfslogica onder de loep te nemen.
Neem als voorbeeld een inlogformulier. Optimaal zou zijn om te beoordelen of het inlogscherm correct verschijnt en de beoogde functie uitvoert zonder rekening te houden met de ingewikkelde technologische specificaties. Uiteindelijk ligt het doel in het aannemen van het perspectief van de gebruiker en het onderzoeken van hun complete ervaring.
Cypress is een geweldig framework voor automatiseringstesten dat compatibel is met enkele van de populairste JavaScript frameworks. De mogelijkheid om tests direct in de browser uit te voeren en de uitgebreide testfuncties maken het testen naadloos en efficiënt. Het ondersteunt ook verschillende testbenaderingen, waaronder:
⭐Unit Tests
⭐End-to-End Tests
⭐Integratietests
Om uitgebreide testgevallen te ontwikkelen die alle aspecten van de functionaliteit van een React-applicatie omvatten, is het essentieel om het gedrag ervan vanuit het perspectief van de eindgebruiker te evalueren door de volgende verhaallijnen in overweging te nemen:
Een individu is in staat om een tekstinvoerveld waar te nemen, vergezeld van een knop voor verzending.
Een individu is in staat om een vraag of zin te typen in een lege ruimte die voor dit doel is aangewezen, bekend als het “invoerveld.
Wanneer op de knop “Verzenden” wordt geklikt, wordt verwacht dat er een lijst met items verschijnt direct onder het corresponderende invoerveld.
Door deze gebruikersverhalen te volgen, kun je een eenvoudige React-applicatie bouwen waarmee een gebruiker producten kan zoeken. De app haalt productgegevens op uit de DummyJSON API en geeft deze weer op de pagina.
De broncode voor dit project wordt gehost op het GitHub-account van de ontwikkelaar, dat toegankelijk is door de bijbehorende repository te bezoeken.
Een React-project opzetten
Om het proces te starten, kunt u een React-project opzetten met Vite of het commando “create-react-app” gebruiken om een fundamentele React-applicatie op te zetten. Na voltooiing van de installatiefase kunt u de Cypress-bibliotheek downloaden als een ontwikkelingsafhankelijke bron binnen het framework van uw project.
npm install cypress --save-dev
Het is inderdaad essentieel om het package.json bestand te herzien door het bovengenoemde script erin op te nemen.
"test": "npx cypress open"
Een functioneel component maken
Maak in de brondirectory een submap en wijs deze het label “components” toe. Start in dit gecompartimenteerde gebied het proces voor het maken van een nieuw tekstdocument met de naam “products.jsx” en neem de meegeleverde code op in de inhoud.
import React, { useState, useEffect } from 'react';
import "./style.component.css"
export default function Products(prop) {
const [products, setProducts] = useState([]);
const [error, setError] = useState(null);
const { searchInput } = prop;
return (
<div className="product-catalogue">
{error ? (
<p>Product not found</p>
) : (
<div className="product-list">
{products.slice(0, 6).map((product) => (
<div className="product" key={product.id}>
<h2>Title: {product.title}</h2>
<p>Price: ${product.price}</p>
</div>
))}
</div>
)}
</div>
);
}
Binnen het gegeven scenario is het essentieel om een useEffect hook te implementeren binnen de functionele component. Deze hook is verantwoordelijk voor het uitvoeren van een asynchrone bewerking die de productgegevens ophaalt als antwoord op de zoekopdracht van de gebruiker.
useEffect(() => {
const fetchProducts = async () => {
if (searchInput) {
const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error('Error fetching products');
}
const json = await response.json();
setProducts(json.products);
setError(null);
} catch (error) {
setError(error.message);
}
}
};
fetchProducts();
}, [searchInput]);
Werk het bestand App.jsx bij
Werk het bestand App.js bij door het onderstaande codefragment op te nemen:javascriptimport React from ‘react’;import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;import LoginPage from ‘. /LoginPage/LoginPage’; // importeer hier uw loginpagina componentimport HomePage from ‘./HomePage/HomePage’; // importeer hier uw homepage componentimport ServiceListPage from ‘. /ServiceListPage/ServiceListPage’; // importeer hier de component voor uw servicelijstpaginaimport CreateAccountForm from ‘./CreateAccountForm/CreateAccountForm’; // importeer hier de component voor uw aanmaakaccountformulierimport { useHistory } from ‘react-router-dom’;function App() {const history = useHistory();return (
import React, { useState,useRef } from 'react'
import './App.css'
import Products from './components/Products'
function App() {
const [searchInput, setSearchInput] = useState('')
const searchInputRef = useRef('');
const handleSubmit = (e) => {
setSearchInput(searchInputRef.current.value);
}
return (
<div>
<h1>Cypress Testing Library tutorial</h1>
<label htmlFor="input">Input</label>
<input
id="text"
type="text"
ref={searchInputRef}
/>
<button id="btn" type="button" onClick={handleSubmit}>Submit</button>
<Products data-testid="products-component" searchInput={searchInput} />
</div>
)
}
export default App
Ga je gang en start de ontwikkelserver.
npm run dev
Je zou nu inderdaad in staat moeten zijn om met gemak bepaalde informatie op te halen uit de mock JSON API.
De testomgeving instellen
Voer het testscript in eerste instantie uit met een terminalopdracht:
npm run test
Voer de gespecificeerde actie uit, die het Cypress-testkader zal starten. Gelieve verder te gaan door op de knop “E2E Testing” hieronder te klikken.
Klik op “Continue” om de Cypress-configuratiebestanden op te nemen.
Na voltooiing van deze procedure zou men moeten zien dat er een nieuwe Cypress-testmap verschijnt binnen hun onderneming. Verder voegt de client van Cypress autonoom het document cypress.config.js toe. Gebruikers hebben het voorrecht om dit record te wijzigen voor het aanpassen van een reeks nuances met betrekking tot het testmilieu, het gedrag en de configuratie.
End-to-end tests schrijven met Cypress
Om je eerste test uit te voeren, moet je de webbrowser kiezen die het onderzoek zal hosten. Kies uit de vele opties in de Cypress interface een versie die bij uw voorkeuren past.
Cypress start een gestroomlijnde iteratie van de geselecteerde webbrowser, waardoor een georkestreerde testomgeving voor evaluatiedoeleinden ontstaat.
Om een nieuw testbestand te genereren, selecteert u de optie “Nieuwe spec aanmaken” uit de beschikbare keuzes.
Navigeer naar de code-editor van uw voorkeur, ga naar het bestand “cypress/e2e/App.spec.cy.js” en breng de nodige wijzigingen aan in de inhoud door de meegeleverde code op te nemen.
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);
});
});
Het huidige testraamwerk valideert meerdere facetten van de bovengenoemde gebruikersverhalen door ervoor te zorgen dat het systeem zich in verschillende scenario’s gedraagt zoals bedoeld, terwijl het de invoercriteria bevat die in elke individuele verhaallijn worden beschreven.
De gebruikersinterface van de webapplicatie moet een invoerveld en een verzendknop bevatten, die door de browser op de webpagina worden weergegeven.
De gebruiker heeft de mogelijkheid om een zoekopdracht in te voeren via het daarvoor bestemde tekstvak of via spraakopdrachten, zodat hij de gewenste informatie gemakkelijk en efficiënt kan vinden.
Cypress is vergelijkbaar met andere populaire JavaScript-testframeworks zoals Jest en Supertest, omdat het gebruikmaakt van een declaratieve aanpak en een specifieke taal voor het maken van testscenario’s.
Om de test uit te voeren, navigeer je terug naar de gestroomlijnde browseromgeving waarop Cypress toezicht houdt en selecteer je het specifieke testscript dat je wilt uitvoeren.
Cypress is ontworpen om tests uit te voeren en de resultaten te presenteren in het linkerpaneel van de interface van de testomgeving, zodat gebruikers de voortgang van de tests gemakkelijk kunnen volgen.
Simuleren van applicatieprocessen
Om de volledige gebruikerservaring in dit specifieke scenario te valideren, is het cruciaal om te bevestigen dat de applicatie in staat is om gebruikersinvoer te accepteren, de benodigde informatie op te halen en deze informatie uiteindelijk weer te geven in de browserinterface.
Om transparantie te garanderen is het mogelijk om een apart testbestand aan te maken dat een alternatieve testsuite bevat binnen de end-to-end directory. Daarnaast bestaat er een andere optie waarbij meerdere testgevallen die een specifiek scenario onderzoeken worden geconsolideerd in een enkel testbestand.
Maak een nieuw Products.spec.cy.js bestand aan in de map e2e met behulp van het bijgeleverde codefragment.
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 verzameling tests valideert dat, wanneer een gebruiker een specifieke query invoert, de applicatie de relevante informatie ophaalt en weergeeft in de webbrowserinterface.
De tool simuleert het proces van het zoeken naar producten op een e-commerce website door de zoekopdracht in te voeren en te controleren of de resulterende pagina relevante informatie bevat, zoals titels en prijzen van artikelen. Dit maakt het mogelijk om de browse-ervaring van de gebruiker in zijn geheel te evalueren vanuit zijn oogpunt.
Fouten en reacties simuleren
U hebt de mogelijkheid om een reeks foutsituaties en bijbehorende reacties na te bootsen in uw Cypress testcases, waardoor u meer flexibiliteit krijgt bij het testen op potentiële problemen.
Maak een nieuw JavaScript-bestand met de naam “Error.spec.cy.js” in de map “e2e” en voeg het volgende codefragment 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');
});
});
De huidige implementatie van deze testsuite is erop gericht om ervoor te zorgen dat er een waarneembare foutmelding wordt gegenereerd wanneer een gebruiker een ongeldige zoekopdracht invoert, zodat ze direct op de hoogte zijn van het probleem en de juiste corrigerende maatregelen kunnen nemen.
Om het testgeval als succesvol te beschouwen, maakt het gebruik van de interceptiefunctionaliteit van Cypress om netwerkfouten na te bootsen door een defecte netwerkverbinding te simuleren. Wanneer vervolgens een ongeldige zoekopdracht wordt ingevoerd in het daarvoor bestemde invoerveld en het proces voor het ophalen van gegevens wordt gestart, controleert de test of er een zichtbare foutmelding “Product niet gevonden” verschijnt op de webpagina.
Dit resultaat suggereert dat het foutenbeheersysteem werkt in overeenstemming met het bedoelde ontwerp.
Cypress gebruiken in testgestuurde ontwikkeling
Testen is een essentieel aspect van softwareontwikkeling dat veel aandacht vereist om de kwaliteit en betrouwbaarheid van het product te garanderen. Hoewel testen veel tijd en middelen kan kosten, kan het gebruik van tools zoals Cypress een gevoel van voldoening geven door het testproces te stroomlijnen en een efficiënte uitvoering van testgevallen mogelijk te maken.
Cypress biedt een indrukwekkende reeks tools voor het faciliteren van testgestuurde ontwikkeling binnen applicaties, die zowel een breed scala aan testfunctionaliteiten als ondersteuning voor diverse testmethodologieën omvat. Om volledig te kunnen genieten van alles wat Cypress te bieden heeft, kun je je verdiepen in de gezaghebbende documentatie waar je talloze aanvullende testmogelijkheden zult ontdekken.