Strenge tests møder den virkelige verden med simulerede end-to-end brugertests.

Frontend-udvikling involverer at bygge visuelt tiltalende, funktionelle klientvendte apps. Men der er en fangst; disse applikationer skal sikre, at brugerne får en problemfri oplevelse.

Selvom enheds- og integrationstest er afgørende for at verificere en applikations funktionalitet, fanger de muligvis ikke helt typiske brugerinteraktioner. For virkelig at simulere en brugers rejse skal du køre ende-til-ende-tests, som replikerer faktiske brugerinteraktioner. Dette sikrer, at din applikation fungerer, som du har tænkt dig, fra start til slut.

Kom godt i gang med ende-til-ende-test ved hjælp af cypres

Hovedformålet med end-to-end-test i front-end-applikationer er at verificere resultater snarere end implementeringsdetaljerne i forretningslogikken.

Tag en login-formular som eksempel. Ideelt set ville du teste, om login-skærmen dukker op, som den skal, og gør, hvad den er beregnet til. Grundlæggende er de underliggende tekniske detaljer ikke vigtige. Slutmålet er simpelthen at træde ind i brugerens sko og evaluere hele deres oplevelse.

instagram viewer

Cypres er en fantastisk automatiseringstestramme, der er kompatibel med nogle af de mest populære JavaScript-rammer. Dens evne til at køre test direkte i browseren og dens omfattende suite af testfunktioner gør testning problemfri og effektiv. Det understøtter også forskellige testmetoder, herunder:

  • Enhedstests
  • End-to-end tests
  • Integrationstest

For at skrive ende-til-ende-test til en React-applikation skal du overveje disse brugerhistorier:

  • En bruger kan se et inputfelt med en tilsvarende indsend-knap.
  • En bruger kan indtaste en søgeforespørgsel i inputfeltet.
  • Efter at have klikket på indsend-knappen, skal en bruger se en liste over elementer, der vises lige under indtastningsfeltet.

Ved at følge disse brugerhistorier kan du bygge en simpel React-applikation, der lader en bruger søge efter produkter. Appen henter produktdata fra DummyJSON API og gengive det på siden.

Du kan finde dette projekts kode i dens GitHub depot

Opsæt et React-projekt

For at komme i gang, oprette et React-projekt ved hjælp af Vite eller brug create-react-app kommando for at konfigurere en grundlæggende React-applikation. Når installationsprocessen er færdig, skal du gå videre og installere Cypress-pakken som en dev-afhængighed i dit projekt:

npm install cypress --save-dev

Opdater nu din package.json fil ved at tilføje dette script:

"test": "npx cypress open"

Opret en funktionel komponent

I den src mappe, opret en mappe og navngiv den komponenter. Tilføj en ny i denne mappe products.jsx fil, og medtag 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>
 );
}

Inden for den funktionelle komponent skal du definere en useEffect hook, som udfører en asynkron funktion, der henter produktdata baseret på den angivne søgeforespørgsel.

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

Opdater App.jsx-filen

Opdater nu 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>






exportdefault App

Gå videre og start udviklingsserveren.

npm run dev

Store! Du bør være i stand til at hente specifikke produktdata fra dummy JSON API.

Konfigurer testmiljøet

Kør først testscript-kommandoen på din terminal:

npm run test

Denne kommando vil udløse og åbne Cypress-klienten. Gå videre og klik på E2E test knap.

Klik derefter Blive ved for at tilføje Cypress-konfigurationsfiler.

Når denne proces er fuldført, bør du se en ny Cypress-testmappe i dit projekt. Derudover tilføjer Cypress' klient automatisk filen cypress.config.js. Du kan opdatere denne fil for yderligere at tilpasse forskellige aspekter af dit testmiljø, adfærd og opsætning.

Skriv ende-til-ende-test ved hjælp af cypres

For at skrive din første test skal du vælge den browser, som testen skal køre i. Vælg din foretrukne mulighed blandt de tilgængelige i Cypress-klienten.

Cypress vil lancere en forenklet version af den browser, du har valgt, og skabe et kontrolleret miljø til at køre test.

Vælg Opret ny spec mulighed for at oprette din testfil.

Gå over til din kodeeditor, åbn cypress/e2e/App.spec.cy.js fil, og opdater indholdet af denne fil 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 vi tilbage til brugerhistorierne fremhævet ovenfor, verificerer denne specifikke testsuite to aspekter:

  • At browseren viser et inputfelt og en send-knap på siden.
  • At brugen kan indtaste en søgeforespørgsel.

Som andre JavaScript-testværktøjer såsom Jest og Supertest, anvender Cypress en deklarativ syntaks og sprog til at definere testcases.

For at køre testen skal du vende tilbage til den forenklede browserversion, der administreres af Cypress, og vælge den specifikke testfil, du ønsker at køre.

Cypress vil køre testene og vise resultaterne i testlegepladsens venstre sidepanel.

Simulering af ansøgningsprocesser

For at sikre, at du gennemgår og tester hele brugerrejsen – i dette specifikke brugstilfælde – skal du bekræfte det applikationen kan tage brugerens input, hente de nødvendige data og til sidst vise dataene i browseren side.

For klarhedens skyld kan du oprette en ny testfil for at rumme en anden testsuite inde i e2e folder. Alternativt kan du også vælge at inkludere alle de testpakker, der udforsker en bestemt testcase, i én testfil.

Gå videre og opret en ny Products.spec.cy.js fil i e2e folder. Inkluder følgende kode i denne fil.

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 testsuite kontrollerer, at når en bruger indsender et bestemt søgeelement, henter og viser appen dataene på browsersiden.

Det gør det ved at simulere processen med at indtaste søgeinputtet, klikke på send-knappen og vente på produkter, der skal indlæses, og derefter verificere tilstedeværelsen af ​​produktvarer sammen med detaljer såsom titel og pris. I bund og grund fanger og verificerer den hele oplevelsen fra et brugerperspektiv.

Simulering af fejl og svar

Du kan også simulere forskellige fejlscenarier og svar i dine Cypress-tests.

Opret en ny Error.spec.cy.js fil i e2e bibliotek 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 testpakke kontrollerer, at der vises en fejlmeddelelse, når en bruger indtaster en forkert søgeforespørgsel.

For at testsagen skal bestå, bruger den Cypress' opsnappe funktion til at stoppe netværket og simulere en netværksanmodningsfejl. Den kontrollerer derefter, at efter at have indtastet en forkert søgeforespørgsel i indtastningsfeltet og startet hentningsprocessen, vises en fejlmeddelelse – Produkt ikke fundet – synligt på siden.

Dette resultat indikerer, at fejlhåndteringsmekanismen fungerer som forventet.

Brug af Cypres i testdrevet udvikling

Test er et grundlæggende udviklingskrav, men det kan også være en tidskrævende proces. Men at inkorporere Cypress kan give den store tilfredshed ved at se dine testsager køre sammen.

Cypress er et fantastisk værktøj til at implementere testdrevet udvikling i applikationer - ikke kun giver det en omfattende suite af testfunktioner, men det understøtter også forskellige teststrategier. For at få mest muligt ud af Cypress, gå videre og udforsk dens officielle dokumentation for at opdage mange flere testmuligheder.