Utveckling av frontend innebär att man bygger visuellt tilltalande, funktionella klientinriktade appar. Men det finns en hake; dessa applikationer måste säkerställa att användarna får en sömlös upplevelse.

Även om enhets- och integrationstester är viktiga för att verifiera en applikations funktionalitet, kanske de inte helt fångar typiska användarinteraktioner. För att verkligen simulera en användares resa måste du köra end-to-end-tester som replikerar faktiska användarinteraktioner. Detta kommer att säkerställa att din applikation fungerar som du har tänkt från början till slut.

Komma igång med end-to-end-testning med Cypress

Huvudsyftet med end-to-end-testning i front-end-applikationer är att verifiera resultat snarare än implementeringsdetaljerna i affärslogiken.

Ta ett inloggningsformulär som exempel. Helst skulle du testa om inloggningsskärmen dyker upp som den ska och gör vad den är tänkt att göra. I huvudsak är de underliggande tekniska detaljerna oviktiga. Slutmålet är helt enkelt att kliva in i användarens skor och utvärdera hela deras upplevelse.

Cypress är ett utmärkt ramverk för automationstestning som är kompatibelt med några av de mest populära JavaScript-ramverken. Dess förmåga att köra tester direkt i webbläsaren och dess omfattande svit av testfunktioner gör testningen sömlös och effektiv. Det stöder också olika testmetoder inklusive:

• Enhetstest
• End-to-end-test
• Integrationstest

För att skriva end-to-end-tester för en React-applikation, överväg dessa användarberättelser:

• En användare kan se ett inmatningsfält med en motsvarande skicka-knapp.
• En användare kan ange en sökfråga i inmatningsfältet.
• Efter att ha klickat på knappen Skicka bör en användare se en lista med objekt som visas precis under inmatningsfältet.

Genom att följa dessa användarberättelser kan du bygga en enkel React-applikation som låter en användare söka efter produkter. Appen hämtar produktdata från DummyJSON API och återge det på sidan.

Du kan hitta detta projekts kod i dess GitHub förvaret

Skapa ett React-projekt

För att starta, skapa ett React-projekt med Vite eller använd create-react-app kommando för att ställa in en grundläggande React-applikation. När installationsprocessen är klar, fortsätt och installera Cypress-paketet som ett dev-beroende i ditt projekt:

npm install cypress --save-dev

Uppdatera nu din package.json fil genom att lägga till detta skript:

"test": "npx cypress open"

Skapa en funktionell komponent

I den src katalog, skapa en mapp och namnge den komponenter. Lägg till en ny i den här mappen products.jsx fil och inkludera koden nedan.

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

Inom den funktionella komponenten, definiera a useEffect hook, som kör en asynkron funktion som hämtar produktdata baserat på den angivna sökfrågan.

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

Uppdatera filen App.jsx

Uppdatera nu App.jsx fil med följande kod:

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å vidare och starta utvecklingsservern.

npm run dev

Bra! Du bör kunna hämta specifik produktdata från dummy JSON API.

Ställ in testmiljön

Kör först kommandot testskript på din terminal:

npm run test

Detta kommando kommer att utlösa och öppna Cypress-klienten. Gå vidare och klicka på E2E-testning knapp.

Klicka sedan Fortsätta för att lägga till Cypress-konfigurationsfiler.

När denna process är klar bör du se en ny Cypress testkatalog i ditt projekt. Dessutom lägger Cypress klient automatiskt till filen cypress.config.js. Du kan uppdatera den här filen för att ytterligare anpassa olika aspekter av din testmiljö, beteende och inställningar.

Skriv end-to-end-test med Cypress

För att skriva ditt första test måste du välja webbläsaren där testet ska köras. Välj ditt föredragna alternativ bland de tillgängliga i Cypress-klienten.

Cypress kommer att lansera en förenklad version av webbläsaren du har valt, vilket skapar en kontrollerad miljö för att köra tester.

Välj Skapa ny spec alternativet för att skapa din testfil.

Gå över till din kodredigerare, öppna cypress/e2e/App.spec.cy.js fil och uppdatera innehållet i den filen med följande kod.

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

Om vi ​​går tillbaka till användarberättelserna ovan, verifierar denna specifika testsvit två aspekter:

• Att webbläsaren visar ett inmatningsfält och en skicka-knapp på sidan.
• Att användningen kan ange en sökfråga.

Liksom andra JavaScript-testverktyg som Jest och Supertest, använder Cypress en deklarativ syntax och språk för att definiera testfall.

För att köra testet, gå tillbaka till den förenklade webbläsarversionen som hanteras av Cypress och välj den specifika testfil du vill köra.

Cypress kommer att köra testerna och visa resultaten i testlekplatsens vänstra panel.

Simulering av ansökningsprocesser

För att säkerställa att du går igenom och testar hela användarresan – i det här specifika användningsfallet – måste du verifiera det applikationen kan ta användarens input, hämta den nödvändiga informationen och slutligen visa informationen i webbläsaren sida.

För tydlighetens skull kan du skapa en ny testfil för att rymma en annan testsvit inuti e2e mapp. Alternativt kan du också välja att inkludera alla testsviter som utforskar ett visst testfall i en testfil.

Gå vidare och skapa en ny Products.spec.cy.js fil i e2e mapp. Inkludera följande kod i den här filen.

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

Denna testsvit kontrollerar att, när en användare skickar in ett visst sökobjekt, hämtar och visar appen data på webbläsarsidan.

Det gör det genom att simulera processen att gå in i sökinmatningen, klicka på knappen Skicka och vänta på produkter som ska laddas och sedan verifiera förekomsten av produktartiklar, tillsammans med detaljer som titel och pris. I huvudsak fångar och verifierar den hela upplevelsen ur ett användarperspektiv.

Simulering av fel och svar

Du kan också simulera olika felscenarier och svar i dina Cypress-tester.

Skapa en ny Error.spec.cy.js fil i e2e katalog och inkludera följande kod.

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

Denna testsvit kontrollerar att ett felmeddelande visas när en användare anger en felaktig sökfråga.

För att testfallet ska klara använder den Cypress' genskjuta funktion för att stoppa nätverket och simulera ett nätverksbegäranfel. Den kontrollerar sedan att efter att ha skrivit in en felaktig sökfråga i inmatningsfältet och initierat hämtningsprocessen, visas ett felmeddelande – Produkten hittades inte – på sidan.

Detta resultat indikerar att felhanteringsmekanismen fungerar som förväntat.

Använda Cypress i testdriven utveckling

Testning är ett grundläggande utvecklingskrav, men det kan också vara en tidskrävande process. Men att införliva Cypress kan ge den stora tillfredsställelsen att se dina testfall löpa tillsammans.

Cypress är ett utmärkt verktyg för att implementera testdriven utveckling i applikationer – det ger inte bara en omfattande uppsättning testfunktioner, utan stöder också olika teststrategier. För att få ut det mesta av Cypress, fortsätt och utforska dess officiella dokumentation för att upptäcka många fler testmöjligheter.