Развој фронтенд-а укључује изградњу визуелно привлачних, функционалних апликација окренутих клијенту. Али постоји квака; ове апликације морају осигурати да корисници имају беспрекорно искуство.

Док су тестови јединица и интеграције неопходни за верификацију функционалности апликације, они можда неће у потпуности обухватити типичне интеракције корисника. Да бисте заиста симулирали пут корисника, потребно је да покренете тестове од краја до краја који реплицирају стварне интеракције корисника. Ово ће осигурати да ваша апликација ради онако како намеравате од почетка до краја.

Почетак рада са тестирањем од краја до краја помоћу Ципресс-а

Главни циљ енд-то-енд тестирања у фронт-енд апликацијама је верификација резултата, а не детаља имплементације пословне логике.

Узмите образац за пријаву као пример. У идеалном случају, тестирали бисте да ли се екран за пријаву појављује на начин на који би требало да буде и да ли ради оно што је намењено. У суштини, основни технички детаљи нису важни. Крајњи циљ је једноставно ући у кожу корисника и проценити њихово целокупно искуство.

Ципресс је одличан оквир за тестирање аутоматизације који је компатибилан са неким од најпопуларнији ЈаваСцрипт оквири. Његова способност да покреће тестове директно у претраживачу и свеобухватан скуп функција за тестирање чине тестирање беспрекорним и ефикасним. Такође подржава различите приступе тестирању укључујући:

• Јединични тестови
• Енд-то-Енд тестови
• Интеграциони тестови

Да бисте написали тестове од краја до краја за Реацт апликацију, размотрите ове корисничке приче:

• Корисник може да види поље за унос са одговарајућим дугметом за слање.
• Корисник може да унесе упит за претрагу у поље за унос.
• Након што кликне на дугме за слање, корисник би требало да види листу ставки приказану одмах испод поља за унос.

Пратећи ове корисничке приче, можете направити једноставну Реацт апликацију која омогућава кориснику да тражи производе. Апликација ће преузети податке о производу са ДуммиЈСОН АПИ и приказати на страници.

Код овог пројекта можете пронаћи у њему ГитХуб репозиторијум

Поставите Реацт пројекат

Започети, креирајте Реацт пројекат користећи Вите или користите наредба цреате-реацт-апп за подешавање основне Реацт апликације. Када се процес инсталације заврши, наставите и инсталирајте Ципресс пакет као зависност од програмера у вашем пројекту:

npm install cypress --save-dev

Сада ажурирајте своје пацкаге.јсон датотеку додавањем ове скрипте:

"test": "npx cypress open"

Направите функционалну компоненту

У срц директоријум, креирајте фасциклу и дајте јој име компоненте. Унутар овог фолдера додајте нови продуцтс.јск датотеку и укључите код испод.

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

У оквиру функционалне компоненте дефинисати а усеЕффецт кука, која извршава асинхрону функцију која преузима податке о производу на основу датог упита за претрагу.

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

Ажурирајте датотеку Апп.јск

Сада ажурирајте Апп.јск датотеку са следећим кодом:

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

Само напред и покрените развојни сервер.

npm run dev

Велики! Требало би да будете у могућности да преузмете одређене податке о производу из лажног ЈСОН АПИ-ја.

Подесите окружење за тестирање

Прво покрените команду тест скрипте на свом терминалу:

npm run test

Ова команда ће покренути и отворити Ципресс клијент. Само напред и кликните на Е2Е тестирање дугме.

Затим кликните Настави да додате конфигурационе датотеке Ципресс.

Када се овај процес заврши, требало би да видите нови директоријум Ципресс тестова у вашем пројекту. Поред тога, Ципрессов клијент аутоматски додаје датотеку ципресс.цонфиг.јс. Можете да ажурирате ову датотеку да бисте додатно прилагодили различите аспекте вашег тестног окружења, понашања и подешавања.

Напишите енд-то-енд тестове користећи Ципресс

Да бисте написали свој први тест, потребно је да изаберете претраживач у којем ће се тест покренути. Изаберите жељену опцију од доступних у Ципресс клијенту.

Ципресс ће покренути поједностављену верзију претраживача који сте изабрали, стварајући контролисано окружење за покретање тестова.

Изаберите Креирајте нову спецификацију опцију за креирање тестне датотеке.

Пређите на уређивач кода, отворите чемпрес/е2е/Апп.спец.ци.јс датотеку и ажурирајте садржај те датотеке следећим кодом.

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

Враћајући се на корисничке приче истакнуте изнад, овај специфични пакет тестова потврђује два аспекта:

• Да претраживач приказује поље за унос и дугме за слање на страници.
• Да употреба може да унесе упит за претрагу.

Као и други алати за тестирање ЈаваСцрипт-а као што су Јест и Супертест, Ципресс користи декларативну синтаксу и језик за дефинисање тест случајева.

Да бисте покренули тест, вратите се на поједностављену верзију прегледача којом управља Ципресс и изаберите конкретну тестну датотеку коју желите да покренете.

Ципресс ће покренути тестове и приказати резултате на левој страни тестног игралишта.

Симулација процеса апликације

Да бисте били сигурни да ћете проћи и тестирати читав пут корисника – у овом конкретном случају употребе – морате да потврдите да апликација може узети кориснички унос, дохватити потребне податке и на крају, приказати податке у претраживачу страна.

Ради јасноће, можете креирати нову датотеку за тестирање да бисте сместили другачији тестни пакет унутар е2е фолдер. Алтернативно, можете се одлучити да укључите све тестне пакете који истражују одређени тест случај у једну тест датотеку.

Само напред и креирајте нови Продуцтс.спец.ци.јс фајл у е2е фолдер. Унутар ове датотеке укључите следећи код.

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

Овај тестни пакет проверава да ли, када корисник пошаље одређену ставку за претрагу, апликација преузима и приказује податке на страници прегледача.

То ради тако што симулира процес уноса за претрагу, кликне на дугме за слање, чекајући производе за учитавање, а затим проверу присуства ставки производа, заједно са детаљима као што су наслов и цена. У суштини, он обухвата и верификује целокупно искуство из перспективе корисника.

Симулација грешака и одговора

Такође можете симулирати различите сценарије грешака и одговоре у оквиру ваших Ципресс тестова.

Створити нова Еррор.спец.ци.јс фајл у е2е директоријум и укључите следећи код.

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

Овај тестни пакет проверава да ли се приказује порука о грешци када корисник унесе нетачан упит за претрагу.

Да би тест прошао, користи Ципресс' пресретнути функцију за затварање мреже и симулацију грешке мрежног захтева. Затим проверава да ли је након уноса погрешног упита за претрагу у поље за унос и покретања процеса преузимања порука о грешци — Производ није пронађен — видљиво приказана на страници.

Овај исход указује да механизам за руковање грешкама функционише како се очекивало.

Коришћење Ципресс-а у развоју вођеном тестом

Тестирање је основни развојни захтев, али такође може бити дуготрајан процес. Међутим, укључивање Ципресс-а може донети чисто задовољство гледања како ваши тестни случајеви раде заједно.

Ципресс је одличан алат за имплементацију развоја заснованог на тестовима у апликацијама – не само да пружа свеобухватан скуп функција за тестирање, већ такође подржава различите стратегије тестирања. Да бисте максимално искористили Ципресс, само напред и истражите његову званичну документацију да бисте открили много више могућности тестирања.