Vývoj frontendu zahrnuje vytváření vizuálně přitažlivých, funkčních aplikací pro klienty. Má to ale háček; tyto aplikace musí zajistit uživatelům bezproblémové používání.

Zatímco jednotkové a integrační testy jsou nezbytné pro ověření funkčnosti aplikace, nemusí zcela zachytit typické interakce uživatelů. Chcete-li skutečně simulovat cestu uživatele, musíte provést end-to-end testy, které replikují skutečné uživatelské interakce. Tím zajistíte, že vaše aplikace bude od začátku do konce fungovat tak, jak zamýšlíte.

Začínáme s end-to-end testováním pomocí Cypress

Hlavním cílem end-to-end testování ve front-end aplikacích je ověřit výsledky spíše než implementační detaily obchodní logiky.

Vezměte si jako příklad přihlašovací formulář. V ideálním případě byste vyzkoušeli, zda přihlašovací obrazovka vyskočí tak, jak má a dělá to, co má. Základní technické detaily jsou v podstatě nedůležité. Konečným cílem je jednoduše vstoupit do kůže uživatele a vyhodnotit celou jeho zkušenost.

Cypřiš je skvělý rámec pro testování automatizace, který je kompatibilní s některými z nich nejpopulárnějších frameworků JavaScriptu. Jeho schopnost spouštět testy přímo v prohlížeči a jeho komplexní sada testovacích funkcí činí testování bezproblémovým a efektivním. Podporuje také různé testovací přístupy, včetně:

• Jednotkové testy
• End-to-End testy
• Integrační testy

Chcete-li napsat komplexní testy pro aplikaci React, zvažte tyto uživatelské příběhy:

• Uživatel může vidět vstupní pole s odpovídajícím tlačítkem pro odeslání.
• Uživatel může do vstupního pole zadat vyhledávací dotaz.
• Po kliknutí na tlačítko Odeslat by měl uživatel vidět seznam položek zobrazený přímo pod vstupním polem.

Sledováním těchto uživatelských příběhů můžete vytvořit jednoduchou aplikaci React, která uživateli umožní vyhledávat produkty. Aplikace načte produktová data z DummyJSON API a vykreslit jej na stránce.

Kód tohoto projektu najdete v něm GitHub úložiště

Nastavte projekt React

Začít, vytvořte projekt React pomocí Vite nebo použijte příkaz create-react-app pro nastavení základní aplikace React. Jakmile je proces instalace dokončen, pokračujte a nainstalujte balíček Cypress jako závislost pro vývojáře ve vašem projektu:

npm install cypress --save-dev

Nyní aktualizujte svůj package.json soubor přidáním tohoto skriptu:

"test": "npx cypress open"

Vytvořte funkční komponentu

V src adresář, vytvořte složku a pojmenujte ji komponenty. Do této složky přidejte nový products.jsx soubor a zahrňte níže uvedený kód.

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

V rámci funkční komponenty definujte a useEffect hook, který provádí asynchronní funkci, která načítá data produktu na základě poskytnutého vyhledávacího dotazu.

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

Aktualizujte soubor App.jsx

Nyní aktualizujte App.jsx soubor s následujícím kódem:

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

Pokračujte a spusťte vývojový server.

npm run dev

Skvělý! Měli byste být schopni načíst konkrétní produktová data z fiktivního rozhraní JSON API.

Nastavte testovací prostředí

Nejprve spusťte na svém terminálu příkaz testovacího skriptu:

npm run test

Tento příkaz spustí a otevře klienta Cypress. Pokračujte a klikněte na Testování E2E knoflík.

Dále klikněte Pokračovat přidat konfigurační soubory Cypress.

Po dokončení tohoto procesu byste měli ve svém projektu vidět nový adresář Cypress Tests. Klient Cypress navíc automaticky přidá soubor cypress.config.js. Tento soubor můžete aktualizovat, abyste dále přizpůsobili různé aspekty testovacího prostředí, chování a nastavení.

Napište End-to-End testy pomocí Cypress

Chcete-li napsat svůj první test, musíte vybrat prohlížeč, ve kterém bude test probíhat. Vyberte preferovanou možnost z dostupných v klientovi Cypress.

Cypress spustí zjednodušenou verzi prohlížeče, který jste si vybrali, a vytvoří kontrolované prostředí pro spouštění testů.

Vybrat Vytvořit novou specifikaci možnost vytvoření testovacího souboru.

Přejděte do editoru kódu a otevřete soubor cypress/e2e/App.spec.cy.js soubor a aktualizujte obsah tohoto souboru pomocí následujícího kódu.

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

Vrátíme-li se k výše uvedeným uživatelským příběhům, tato konkrétní testovací sada ověřuje dva aspekty:

• Že prohlížeč zobrazí na stránce vstupní pole a tlačítko pro odeslání.
• Že uživatel může zadat vyhledávací dotaz.

Stejně jako jiné testovací nástroje JavaScriptu, jako je Jest a Supertest, používá Cypress k definování testovacích případů deklarativní syntaxi a jazyk.

Chcete-li spustit test, vraťte se do zjednodušené verze prohlížeče spravované Cypressem a vyberte konkrétní testovací soubor, který chcete spustit.

Cypress spustí testy a zobrazí výsledky na levém panelu testovacího hřiště.

Simulace aplikačních procesů

Abyste zajistili, že projdete a otestujete celou cestu uživatele – v tomto konkrétním případě použití – musíte to ověřit aplikace může převzít uživatelský vstup, načíst požadovaná data a nakonec data zobrazit v prohlížeči strana.

Pro přehlednost můžete vytvořit nový testovací soubor, který bude obsahovat jinou testovací sadu e2e složku. Případně se můžete také rozhodnout zahrnout všechny testovací sady, které zkoumají konkrétní testovací případ, do jednoho testovacího souboru.

Pokračujte a vytvořte nový Products.spec.cy.js soubor v e2e složku. Uvnitř tohoto souboru zahrňte následující kód.

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

Tato testovací sada kontroluje, že jakmile uživatel odešle konkrétní položku vyhledávání, aplikace načte a zobrazí data na stránce prohlížeče.

Činí tak simulací procesu zadávání vyhledávacího vstupu, kliknutím na tlačítko Odeslat a čekáním na produkty k načtení a poté ověření přítomnosti položek produktu spolu s podrobnostmi, jako je název a cena. V podstatě zachycuje a ověřuje celý zážitek z pohledu uživatele.

Simulace chyb a odezev

V rámci testů Cypress můžete také simulovat různé chybové scénáře a reakce.

Vytvoř nový Chyba.spec.cy.js soubor v e2e adresář a zahrňte následující kód.

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

Tato testovací sada kontroluje, zda se zobrazí chybová zpráva, když uživatel zadá nesprávný vyhledávací dotaz.

Aby testovací případ prošel, používá Cypress' zachytit funkce pro zablokování sítě a simulaci chyby síťového požadavku. Poté zkontroluje, že po zadání nesprávného vyhledávacího dotazu do vstupního pole a zahájení procesu načítání se na stránce viditelně zobrazí chybová zpráva – Produkt nenalezen.

Tento výsledek naznačuje, že mechanismus zpracování chyb funguje podle očekávání.

Použití Cypressu v testem řízeném vývoji

Testování je základním požadavkem vývoje, ale může to být také časově náročný proces. Začlenění Cypress však může přinést naprosté uspokojení ze sledování vašich testovacích případů, jak běží společně.

Cypress je skvělý nástroj pro implementaci vývoje řízeného testováním v aplikacích – nejenže poskytuje komplexní sadu testovacích funkcí, ale také podporuje různé testovací strategie. Chcete-li z Cypressu vytěžit maximum, pokračujte a prozkoumejte jeho oficiální dokumentaci, abyste objevili mnohem více testovacích možností.