Käyttöliittymän kehittämiseen kuuluu visuaalisesti houkuttelevien, toimivien asiakaskäyttöön tarkoitettujen sovellusten rakentaminen. Mutta siinä on saalis; näiden sovellusten on varmistettava, että käyttäjillä on saumaton käyttökokemus.

Vaikka yksikkö- ja integrointitestit ovat välttämättömiä sovelluksen toimivuuden varmistamisessa, ne eivät välttämättä kaappaa täysin tyypillisiä käyttäjien vuorovaikutuksia. Jotta voit todella simuloida käyttäjän matkaa, sinun on suoritettava päästä päähän -testejä, jotka jäljittelevät todellisia käyttäjien vuorovaikutuksia. Tämä varmistaa, että sovelluksesi toimii kuten aiot alusta loppuun.

Päästä päähän -testauksen aloittaminen Cypressin avulla

Päätä päähän -testauksen päätavoite etupääsovelluksissa on varmistaa tulosten sijaan liiketoimintalogiikan toteutusyksityiskohdat.

Ota esimerkkinä kirjautumislomake. Ihannetapauksessa testaisit, ponnahtaako sisäänkirjautumisnäyttö näkyviin haluamallaan tavalla ja tekeekö se mitä sen on tarkoitus tehdä. Pohjimmiltaan taustalla olevat tekniset yksityiskohdat eivät ole tärkeitä. Lopullisena tavoitteena on vain astua käyttäjän kenkiin ja arvioida hänen koko kokemustaan.

Sypressi on loistava automaatiotestauskehys, joka on yhteensopiva joidenkin kanssa suosituimmat JavaScript-kehykset. Sen kyky suorittaa testejä suoraan selaimessa ja kattava testausominaisuuksien valikoima tekevät testaamisesta saumatonta ja tehokasta. Se tukee myös erilaisia ​​testausmenetelmiä, mukaan lukien:

• Yksikkötestit
• Päästä päähän -testit
• Integraatiotestit

Kun haluat kirjoittaa päästä päähän -testejä React-sovellukselle, harkitse näitä käyttäjätarinoita:

• Käyttäjä voi nähdä syöttökentän, jossa on vastaava lähetyspainike.
• Käyttäjä voi kirjoittaa hakukyselyn syöttökenttään.
• Napsautettuaan Lähetä-painiketta käyttäjän pitäisi nähdä luettelo kohteista, jotka näkyvät suoraan syöttökentän alla.

Seuraamalla näitä käyttäjätarinoita voit rakentaa yksinkertaisen React-sovelluksen, jonka avulla käyttäjä voi etsiä tuotteita. Sovellus hakee tuotetiedot osoitteesta DummyJSON API ja renderöi se sivulla.

Löydät tämän projektin koodin siitä GitHub arkisto

Luo React-projekti

Aloita Luo React-projekti Viten avulla tai käytä Create-react-app -komento perustaa React-perussovellus. Kun asennusprosessi on valmis, jatka ja asenna Cypress-paketti kehittäjäriippuvuutena projektiisi:

npm install cypress --save-dev

Päivitä nyt omasi package.json tiedosto lisäämällä tämä komentosarja:

"test": "npx cypress open"

Luo toiminnallinen komponentti

Vuonna src hakemistoon, luo kansio ja nimeä se komponentit. Lisää tähän kansioon uusi products.jsx tiedosto ja liitä mukaan alla oleva koodi.

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

Määritä toiminnallisessa komponentissa a useEffect koukku, joka suorittaa asynkronisen toiminnon, joka hakee tuotetiedot annetun hakukyselyn perusteella.

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

Päivitä App.jsx-tiedosto

Päivitä nyt App.jsx tiedosto seuraavalla koodilla:

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

Mene eteenpäin ja käynnistä kehityspalvelin.

npm run dev

Loistava! Sinun pitäisi pystyä hakemaan tiettyjä tuotetietoja vale-JSON-sovellusliittymästä.

Määritä testausympäristö

Suorita ensin testiskriptin komento päätteessäsi:

npm run test

Tämä komento käynnistää ja avaa Cypress-asiakkaan. Mene eteenpäin ja napsauta E2E-testaus -painiketta.

Napsauta seuraavaksi Jatkaa lisätäksesi Cypress-määritystiedostoja.

Kun tämä prosessi on valmis, sinun pitäisi nähdä projektissasi uusi Cypress-testihakemisto. Lisäksi Cypressin asiakasohjelma lisää automaattisesti cypress.config.js-tiedoston. Voit päivittää tämän tiedoston mukauttaaksesi testiympäristösi, käyttäytymisesi ja asennuksesi eri näkökohtia.

Kirjoita päästä päähän -testejä Cypressillä

Ensimmäisen testin kirjoittamista varten sinun on valittava selain, jossa testi suoritetaan. Valitse haluamasi vaihtoehto Cypress-asiakasohjelmassa olevista.

Cypress käynnistää yksinkertaistetun version valitsemastasi selaimesta ja luo kontrolloidun ympäristön testien suorittamista varten.

Valitse Luo uusi spesifikaatio vaihtoehto luoda testitiedosto.

Siirry koodieditoriin ja avaa cypress/e2e/App.spec.cy.js tiedosto ja päivitä tiedoston sisältö seuraavalla koodilla.

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

Palatakseni yllä korostettuihin käyttäjätarinoihin, tämä erityinen testipaketti vahvistaa kaksi näkökohtaa:

• Että selain näyttää sivulla syöttökentän ja lähetyspainikkeen.
• Että käyttäjä voi syöttää hakukyselyn.

Kuten muutkin JavaScript-testaustyökalut, kuten Jest ja Supertest, Cypress käyttää deklaratiivista syntaksia ja kieltä testitapausten määrittämiseen.

Suorita testi palaamalla Cypressin hallinnoimaan yksinkertaistettuun selainversioon ja valitsemalla testitiedosto, jonka haluat suorittaa.

Cypress suorittaa testit ja näyttää tulokset testileikkikentän vasemmassa paneelissa.

Hakuprosessien simulointi

Varmistaaksesi, että käyt läpi ja testaat koko käyttäjämatkan – tässä erityisessä käyttötapauksessa – sinun on varmistettava tämä sovellus voi ottaa käyttäjän syötteen, hakea tarvittavat tiedot ja lopuksi näyttää tiedot selaimessa sivu.

Selvyyden vuoksi voit luoda uuden testitiedoston, joka soveltuu eri testisarjaan e2e kansio. Vaihtoehtoisesti voit myös sisällyttää yhteen testitiedostoon kaikki testisarjat, jotka tutkivat tiettyä testitapausta.

Mene eteenpäin ja luo uusi Products.spec.cy.js tiedosto tiedostoon e2e kansio. Sisällytä tämän tiedoston sisällä seuraava koodi.

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

Tämä testipaketti tarkistaa, että kun käyttäjä lähettää tietyn hakukohteen, sovellus hakee ja näyttää tiedot selainsivulla.

Se tekee sen simuloimalla hakusyötteen syöttämistä, napsauttamalla lähetyspainiketta ja odottamalla ladattavat tuotteet ja sitten tuotteiden olemassaolon tarkistaminen sekä tiedot, kuten nimi ja hinta. Pohjimmiltaan se tallentaa ja varmistaa koko kokemuksen käyttäjän näkökulmasta.

Virheiden ja vastausten simulointi

Voit myös simuloida erilaisia ​​​​virheskenaarioita ja -vastauksia Cypress-testeissäsi.

Luoda uusi Error.spec.cy.js tiedosto tiedostoon e2e hakemistoon ja sisällytä seuraava koodi.

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

Tämä testipaketti tarkistaa, että näyttöön tulee virhesanoma, kun käyttäjä syöttää väärän hakukyselyn.

Jotta testitapaus läpäisi, se käyttää Cypress' siepata toiminto, joka sammuttaa verkon ja simuloi verkkopyyntövirhettä. Sen jälkeen se tarkistaa, että kun olet syöttänyt syöttökenttään väärän hakukyselyn ja käynnistänyt hakuprosessin, sivulla näkyy näkyvästi virhesanoma – Tuotetta ei löydy.

Tämä tulos osoittaa, että virheenkäsittelymekanismi toimii odotetulla tavalla.

Cypressin käyttö testipohjaisessa kehityksessä

Testaus on perustavanlaatuinen kehitysvaatimus, mutta se voi olla myös aikaa vievä prosessi. Cypressin sisällyttäminen voi kuitenkin tuottaa suuren tyytyväisyyden katselemalla testitapauksiasi yhdessä.

Cypress on loistava työkalu testipohjaisen kehityksen toteuttamiseen sovelluksissa – se ei ainoastaan ​​tarjoa kattavaa testausominaisuuksia, vaan tukee myös erilaisia ​​testausstrategioita. Saadaksesi kaiken irti Cypressistä, siirry eteenpäin ja tutustu sen viralliseen dokumentaatioon löytääksesi paljon enemmän testausominaisuuksia.