Frontend-utvikling innebærer å bygge visuelt tiltalende, funksjonelle klientvendte apper. Men det er en hake; disse applikasjonene må sikre at brukerne får en sømløs opplevelse.

Selv om enhets- og integrasjonstester er avgjørende for å verifisere funksjonaliteten til en applikasjon, fanger de kanskje ikke helt opp typiske brukerinteraksjoner. For å virkelig simulere en brukers reise, må du kjøre ende-til-ende-tester som replikerer faktiske brukerinteraksjoner. Dette vil sikre at applikasjonen din fungerer som du har tenkt fra begynnelse til slutt.

Komme i gang med ende-til-ende-testing med Cypress

Hovedmålet med ende-til-ende-testing i front-end-applikasjoner er å verifisere resultater i stedet for implementeringsdetaljene til forretningslogikken.

Ta et påloggingsskjema som eksempel. Ideelt sett ville du teste om påloggingsskjermen dukker opp slik den skal og gjør det den er ment å gjøre. I hovedsak er de underliggende tekniske detaljene ikke viktige. Sluttmålet er ganske enkelt å tre inn i brukerens sko og evaluere hele opplevelsen.

Sypress er et flott rammeverk for automatiseringstesting som er kompatibelt med noen av de mest populære JavaScript-rammeverkene. Dens evne til å kjøre tester direkte i nettleseren og dens omfattende pakke med testfunksjoner gjør testingen sømløs og effektiv. Den støtter også ulike testmetoder, inkludert:

• Enhetstester
• Ende-til-ende-tester
• Integrasjonstester

For å skrive ende-til-ende-tester for en React-applikasjon, bør du vurdere disse brukerhistoriene:

• En bruker kan se et inndatafelt med en tilsvarende send-knapp.
• En bruker kan skrive inn et søk i inntastingsfeltet.
• Etter å ha klikket på send-knappen, skal en bruker se en liste over elementer som vises rett under inndatafeltet.

Ved å følge disse brukerhistoriene kan du bygge en enkel React-applikasjon som lar en bruker søke etter produkter. Appen vil hente produktdata fra DummyJSON API og gjengi det på siden.

Du kan finne dette prosjektets kode i sin GitHub oppbevaringssted

Sett opp et React-prosjekt

For å komme i gang, opprette et React-prosjekt ved hjelp av Vite eller bruk create-react-app kommando for å sette opp en grunnleggende React-applikasjon. Når installasjonsprosessen er fullført, fortsett og installer Cypress-pakken som en utviklingsavhengighet i prosjektet ditt:

npm install cypress --save-dev

Nå, oppdater din package.json fil ved å legge til dette skriptet:

"test": "npx cypress open"

Lag en funksjonell komponent

I src katalog, opprett en mappe og navngi den komponenter. Legg til en ny i denne mappen products.jsx fil, og ta med koden nedenfor.

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

Innenfor den funksjonelle komponenten, definer en useEffect hook, som utfører en asynkron funksjon som henter produktdata basert på det oppgitte søket.

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

Oppdater App.jsx-filen

Oppdater nå App.jsx fil med følgende kode:

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

Gå videre og start utviklingsserveren.

npm run dev

Flott! Du bør kunne hente spesifikke produktdata fra dummy JSON API.

Sett opp testmiljøet

Kjør først testskriptkommandoen på terminalen din:

npm run test

Denne kommandoen vil utløse og åpne Cypress-klienten. Gå videre og klikk på E2E-testing knapp.

Klikk deretter Fortsette for å legge til Cypress-konfigurasjonsfiler.

Når denne prosessen er fullført, bør du se en ny Cypress-testkatalog i prosjektet ditt. I tillegg legger Cypress klient automatisk til filen cypress.config.js. Du kan oppdatere denne filen for å tilpasse ulike aspekter av testmiljøet, oppførselen og oppsettet ytterligere.

Skriv ende-til-ende-tester med Cypress

For å skrive din første test, må du velge nettleseren som testen skal kjøres i. Velg ditt foretrukne alternativ fra de tilgjengelige i Cypress-klienten.

Cypress vil lansere en forenklet versjon av nettleseren du har valgt, og skaper et kontrollert miljø for å kjøre tester.

Velg Opprett ny spesifikasjon alternativet for å lage testfilen.

Gå over til kodeeditoren din, åpne cypress/e2e/App.spec.cy.js fil, og oppdater innholdet i den filen med følgende kode.

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

Går tilbake til brukerhistoriene som er fremhevet ovenfor, bekrefter denne spesifikke testpakken to aspekter:

• At nettleseren viser et inndatafelt og en send-knapp på siden.
• At bruken kan legge inn et søk.

Som andre JavaScript-testverktøy som Jest og Supertest, bruker Cypress en deklarativ syntaks og språk for å definere testtilfeller.

For å kjøre testen, gå tilbake til den forenklede nettleserversjonen administrert av Cypress og velg den spesifikke testfilen du ønsker å kjøre.

Cypress vil kjøre testene og vise resultatene i testlekeplassens venstre sidepanel.

Simulering av søknadsprosesser

For å sikre at du går gjennom og tester hele brukerreisen – i denne spesifikke brukssaken – må du bekrefte det applikasjonen kan ta brukerinndata, hente de nødvendige dataene og til slutt vise dataene i nettleseren side.

For klarhetens skyld kan du opprette en ny testfil for å romme en annen testsuite inne i e2e mappe. Alternativt kan du også velge å inkludere alle testpakkene som utforsker et bestemt testtilfelle i én testfil.

Gå videre og lag en ny Products.spec.cy.js fil i e2e mappe. Inne i denne filen, inkluderer følgende kode.

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

Denne testpakken sjekker at når en bruker har sendt inn et bestemt søkeelement, henter og viser appen dataene på nettlesersiden.

Det gjør det ved å simulere prosessen med å legge inn søkeinndata, klikke på send-knappen og vente på produkter som skal lastes, og deretter bekrefte tilstedeværelsen av produktvarer, sammen med detaljer som tittel og pris. I hovedsak fanger og verifiserer den hele opplevelsen fra et brukerperspektiv.

Simulering av feil og svar

Du kan også simulere ulike feilscenarier og svar i Cypress-testene dine.

Lage en ny Error.spec.cy.js fil i e2e katalog og inkludere følgende kode.

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

Denne testpakken sjekker at en feilmelding vises når en bruker skriver inn et feil søk.

For at testsaken skal bestå, bruker den Cypress' avskjære funksjon for å stoppe nettverket og simulere en nettverksforespørselsfeil. Den sjekker deretter at etter å ha skrevet inn et feil søk i inndatafeltet og startet henteprosessen, vises en feilmelding – Produktet ikke funnet – synlig på siden.

Dette resultatet indikerer at feilhåndteringsmekanismen fungerer som forventet.

Bruke Cypress i testdrevet utvikling

Testing er et grunnleggende utviklingskrav, men det kan også være en tidkrevende prosess. Å innlemme Cypress kan imidlertid gi den store tilfredsstillelsen ved å se testsakene dine kjøre sammen.

Cypress er et flott verktøy for å implementere testdrevet utvikling i applikasjoner – ikke bare gir det en omfattende pakke med testfunksjoner, men den støtter også ulike teststrategier. For å få mest mulig ut av Cypress, fortsett og utforske den offisielle dokumentasjonen for å oppdage mange flere testmuligheter.