Строгото тестване се среща с реалния свят със симулирани потребителски тестове от край до край.

Frontend разработката включва изграждане на визуално привлекателни, функционални клиентски приложения. Но има уловка; тези приложения трябва да гарантират, че потребителите имат безпроблемно изживяване.

Макар че модулните и интеграционните тестове са от съществено значение за проверка на функционалността на приложението, те може да не уловят напълно типичните потребителски взаимодействия. За да симулирате наистина пътуването на потребителя, трябва да стартирате тестове от край до край, които възпроизвеждат действителните потребителски взаимодействия. Това ще гарантира, че вашето приложение работи според вашите намерения от началото до края.

Първи стъпки с тестване от край до край с помощта на Cypress

Основната цел на тестването от край до край в приложенията отпред е да се проверят резултатите, а не подробностите за изпълнение на бизнес логиката.

Вземете форма за влизане като пример. В идеалния случай бихте тествали дали екранът за вход изскача по начина, по който трябва и прави това, което трябва да прави. По същество основните технически подробности не са важни. Крайната цел е просто да влезете на мястото на потребителя и да оцените цялото му изживяване.

instagram viewer

Кипарис е страхотна рамка за автоматизирано тестване, която е съвместима с някои от най-популярните рамки на JavaScript. Способността му да изпълнява тестове директно в браузъра и изчерпателният му набор от функции за тестване правят тестването безпроблемно и ефективно. Той също така поддържа различни подходи за тестване, включително:

  • Единични тестове
  • Тестове от край до край
  • Интеграционни тестове

За да напишете тестове от край до край за приложение на React, разгледайте тези потребителски истории:

  • Потребителят може да види поле за въвеждане със съответния бутон за изпращане.
  • Потребителят може да въведе заявка за търсене в полето за въвеждане.
  • След като щракне върху бутона за изпращане, потребителят трябва да види списък с елементи, показан точно под полето за въвеждане.

Като следвате тези потребителски истории, можете да създадете просто приложение React, което позволява на потребителя да търси продукти. Приложението ще извлече данни за продукта от API на DummyJSON и го изобразете на страницата.

Можете да намерите кода на този проект в него GitHub хранилище

Настройте проект на React

За да започнете, създайте React проект с помощта на Vite или използвайте команда create-react-app за настройка на основно React приложение. След като процесът на инсталиране приключи, продължете и инсталирайте пакета Cypress като зависимост от разработчици във вашия проект:

npm install cypress --save-dev

Сега актуализирайте своя package.json файл, като добавите този скрипт:

"test": "npx cypress open"

Създайте функционален компонент

В src директория, създайте папка и я наименувайте компоненти. В тази папка добавете нова продукти.jsx файл и включете кода по-долу.

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

В рамките на функционалния компонент дефинирайте a useEffect кука, която изпълнява асинхронна функция, която извлича данните за продукта въз основа на предоставената заявка за търсене.

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

Актуализирайте файла App.jsx

Сега актуализирайте App.jsx файл със следния код:

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

Продължете и стартирайте сървъра за разработка.

npm run dev

Страхотен! Трябва да можете да извличате конкретни данни за продукта от фиктивния JSON API.

Настройте тестовата среда

Първо изпълнете командата за тестов скрипт на вашия терминал:

npm run test

Тази команда ще задейства и отваря Cypress клиента. Продължете и щракнете върху E2E тестване бутон.

След това щракнете продължи за добавяне на конфигурационни файлове на Cypress.

След като този процес приключи, трябва да видите нова директория за тестове на Cypress във вашия проект. В допълнение, клиентът на Cypress автоматично добавя файла cypress.config.js. Можете да актуализирате този файл, за да персонализирате допълнително различни аспекти на вашата тестова среда, поведение и настройка.

Пишете тестове от край до край с помощта на Cypress

За да напишете първия си тест, трябва да изберете браузъра, в който ще се изпълнява тестът. Изберете предпочитаната от вас опция от наличните в Cypress клиента.

Cypress ще стартира опростена версия на браузъра, който сте избрали, създавайки контролирана среда за провеждане на тестове.

Изберете Създайте нова спец опция за създаване на вашия тестов файл.

Преминете към вашия редактор на код, отворете cypress/e2e/App.spec.cy.js файл и актуализирайте съдържанието на този файл със следния код.

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

Връщайки се към потребителските истории, подчертани по-горе, този специфичен тестов пакет проверява два аспекта:

  • Че браузърът показва поле за въвеждане и бутон за изпращане на страницата.
  • Че използването може да въведе заявка за търсене.

Подобно на други инструменти за тестване на JavaScript като Jest и Supertest, Cypress използва декларативен синтаксис и език за дефиниране на тестови случаи.

За да изпълните теста, върнете се към опростената версия на браузъра, управлявана от Cypress, и изберете конкретния тестов файл, който искате да изпълните.

Cypress ще проведе тестовете и ще покаже резултатите в левия панел на тестовата площадка.

Симулиране на процеси на приложение

За да сте сигурни, че преминавате през и тествате целия път на потребителя - в този конкретен случай на употреба - трябва да потвърдите, че приложението може да приеме въведеното от потребителя, да извлече необходимите данни и накрая да покаже данните в браузъра страница.

За по-голяма яснота можете да създадете нов тестов файл, за да поберете различен тестов пакет вътре в e2e папка. Като алтернатива можете също да изберете да включите всички тестови пакети, които изследват конкретен тестов случай в един тестов файл.

Продължете и създайте нов Products.spec.cy.js файл в e2e папка. В този файл включете следния код.

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

Този пакет от тестове проверява дали след като потребител изпрати конкретен елемент за търсене, приложението извлича и показва данните на страницата на браузъра.

Прави го чрез симулиране на процеса на въвеждане на въведените данни за търсене, щракване върху бутона за изпращане, изчакване на продукти за зареждане и след това проверка на наличието на продуктови артикули, заедно с подробности като заглавие и цена. По същество той улавя и проверява цялото изживяване от гледна точка на потребителя.

Симулиране на грешки и отговори

Можете също така да симулирате различни сценарии за грешки и отговори в рамките на вашите Cypress тестове.

Създайте нов Error.spec.cy.js файл в e2e директория и включете следния код.

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

Този тестов пакет проверява дали се показва съобщение за грешка, когато потребител въведе неправилна заявка за търсене.

За да премине тестовият случай, той използва Cypress' прихващам функция за запушване на мрежата и симулиране на грешка в мрежова заявка. След това проверява дали след въвеждане на неправилна заявка за търсене в полето за въвеждане и стартиране на процеса на извличане, на страницата видимо се показва съобщение за грешка — Продуктът не е намерен.

Този резултат показва, че механизмът за обработка на грешки функционира според очакванията.

Използване на Cypress в разработка, управлявана от тестове

Тестването е основно изискване за разработка, но може да бъде и отнемащ време процес. Въпреки това, включването на Cypress може да донесе чистото удовлетворение от гледането на вашите тестови случаи да работят заедно.

Cypress е страхотен инструмент за прилагане на разработка, управлявана от тестове, в приложения – не само предоставя изчерпателен набор от функции за тестване, но също така поддържа различни стратегии за тестване. За да извлечете максимума от Cypress, продължете напред и проучете официалната му документация, за да откриете много повече възможности за тестване.