Фронтенд-разработка включает в себя создание визуально привлекательных и функциональных клиентских приложений. Но есть загвоздка; эти приложения должны обеспечивать бесперебойную работу пользователей.

Хотя модульные и интеграционные тесты необходимы для проверки функциональности приложения, они могут не полностью отражать типичные взаимодействия с пользователем. Чтобы по-настоящему смоделировать путешествие пользователя, вам необходимо запустить сквозные тесты, которые воспроизводят реальное взаимодействие с пользователем. Это гарантирует, что ваше приложение будет работать так, как вы задумали, от начала до конца.

Начало работы со сквозным тестированием с использованием Cypress

Основная цель сквозного тестирования интерфейсных приложений — проверка результатов, а не деталей реализации бизнес-логики.

В качестве примера возьмем форму входа. В идеале вы должны проверить, появляется ли экран входа в систему так, как должен, и делает ли он то, для чего предназначен. По сути, основные технические детали не имеют значения. Конечная цель — просто встать на место пользователя и оценить весь его опыт.

Кипарис — отличная среда автоматизации тестирования, совместимая с некоторыми самые популярные фреймворки JavaScript. Его способность запускать тесты непосредственно в браузере и обширный набор функций тестирования делают тестирование простым и эффективным. Он также поддерживает различные подходы к тестированию, включая:

• Модульные тесты
• Сквозные тесты
• Интеграционные тесты

Чтобы написать сквозные тесты для приложения React, рассмотрите следующие пользовательские истории:

• Пользователь может видеть поле ввода с соответствующей кнопкой отправки.
• Пользователь может ввести поисковый запрос в поле ввода.
• После нажатия кнопки «Отправить» пользователь должен увидеть список элементов, отображаемый прямо под полем ввода.

Следуя этим пользовательским историям, вы можете создать простое приложение React, которое позволит пользователю искать продукты. Приложение получит данные о продукте из API-интерфейс DummyJSON и отобразить его на странице.

Вы можете найти код этого проекта в его GitHub репозиторий

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

Для начала, создать проект React с помощью Vite или используйте Команда create-react-app для настройки базового приложения React. После завершения процесса установки установите пакет Cypress в качестве зависимости для разработки в вашем проекте:

npm install cypress --save-dev

Теперь обновите свой пакет.json файл, добавив этот скрипт:

"test": "npx cypress open"

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

в источник каталог, создайте папку и назовите ее компоненты. Внутри этой папки добавьте новый продукты.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>
 );
}

В функциональном компоненте определите использованиеЭффект перехватчик, который выполняет асинхронную функцию, извлекающую данные о продукте на основе предоставленного поискового запроса.

 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.

Теперь обновите Приложение.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>
"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

Большой! У вас должна быть возможность получить конкретные данные о продукте из фиктивного JSON API.

Настройте среду тестирования

Сначала запустите команду тестового сценария на своем терминале:

npm run test

Эта команда запустит и откроет клиент Cypress. Идите вперед и нажмите кнопку E2E-тестирование кнопка.

Далее нажмите Продолжать для добавления файлов конфигурации Cypress.

После завершения этого процесса вы должны увидеть в своем проекте новый каталог тестов Cypress. Кроме того, клиент Cypress автоматически добавляет файл cypress.config.js. Вы можете обновить этот файл для дальнейшей настройки различных аспектов тестовой среды, поведения и настройки.

Написание сквозных тестов с использованием 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 запустит тесты и отобразит результаты на левой панели тестовой площадки.

Моделирование процессов приложения

Чтобы убедиться, что вы прошли и протестировали весь путь пользователя (в данном конкретном случае использования), вам необходимо убедиться, что приложение может принимать вводимые пользователем данные, получать необходимые данные и, наконец, отображать данные в браузере. страница.

Для ясности вы можете создать новый тестовый файл для размещения другого набора тестов внутри файла. е2е папка. Альтернативно вы также можете включить все наборы тестов, которые исследуют конкретный тестовый пример, в один тестовый файл.

Идите вперед и создайте новый Products.spec.cy.js файл в е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: $');
 });
 });

Этот набор тестов проверяет, что когда пользователь отправляет определенный элемент поиска, приложение извлекает и отображает данные на странице браузера.

Это делается путем моделирования процесса ввода поисковых данных, нажатия кнопки «Отправить» и ожидания продукты для загрузки, а затем проверка наличия элементов продукта, а также таких деталей, как название и цена. По сути, он фиксирует и проверяет весь опыт с точки зрения пользователя.

Моделирование ошибок и ответов

Вы также можете моделировать различные сценарии ошибок и реакции в тестах Cypress.

Создать новый Ошибка.spec.cy.js файл в е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');
 });
 });

Этот набор тестов проверяет, отображается ли сообщение об ошибке, когда пользователь вводит неправильный поисковый запрос.

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

Этот результат указывает на то, что механизм обработки ошибок работает должным образом.

Использование Cypress в разработке через тестирование

Тестирование является фундаментальным требованием разработки, но оно также может занять много времени. Однако включение Cypress может принести истинное удовлетворение от просмотра ваших тестовых примеров.

Cypress — отличный инструмент для реализации разработки приложений на основе тестирования. Он не только предоставляет полный набор функций тестирования, но и поддерживает различные стратегии тестирования. Чтобы получить максимальную отдачу от Cypress, изучите его официальную документацию и откройте для себя гораздо больше возможностей тестирования.