Сквозное тестирование является важным этапом в процессе разработки программного обеспечения, поскольку оно гарантирует, что все компоненты веб-приложения работают должным образом. Программисты могут создавать автоматизированные тесты, которые имитируют реальное взаимодействие с пользователем и проверяют предполагаемые результаты, используя эту популярную среду тестирования от Cypress. Эта статья покажет вам, как создавать сквозные тесты для веб-приложения с помощью Cypress.
Предварительные требования
- Node.js установлен
- Редактор исходного кода, например. Код Visual Studio
Начальная настройка
Прежде чем вы начнете писать тесты с помощью Cypress, вам нужно настроить новый проект Cypress. Для этого на вашем компьютере должен быть установлен Node.js. После установки Node.js выполните следующие действия:
Шаг 1.Создайте новую папку для своего проекта Cypress, например, cypress-web-test
.
Шаг 2.Перейдите к новой папке и выполните команду. Это создаст новый файл package.json для вашего проекта.
npm init -y
Шаг 3.Выполните следующую команду, чтобы установить Cypress в качестве зависимости от разработчиков для вашего проекта. В этом примере я использую версию Cypress 12.9.0
.
npm install cypress --save-dev
Шаг 4.Выполните следующую команду, чтобы установить зависимости для создания HTML-отчетов с помощью Allure в конце нашего теста.
npm install @shelex/cypress-allure-plugin allure-commandline --save-dev
Настройка тестовой конфигурации и тестового отчета
После первоначальной настройки, описанной выше, вам необходимо внести следующие изменения в файлы конфигурации, чтобы включить Allure в качестве вашего тестового репортера.
Шаг 1.Создайте новый файл в главном каталоге вашего проекта cypress.config.js
и добавьте следующий код:
const { defineConfig } = require("cypress"); const allureWriter = require('@shelex/cypress-allure-plugin/writer'); module.exports = defineConfig({ e2e: { setupNodeEvents(on, config) { allureWriter(on, config); return config; } }, screenshotsFolder: 'cypress/reports/screenshots', videosFolder: 'cypress/reports/videos' });
Шаг 2.Создайте новый файл в следующем каталоге cypress/support/e2e.js
и добавьте следующий код:
import '@shelex/cypress-allure-plugin';
Шаг 3. Обновите сценарии файлов package.json
следующим образом:
"scripts": { "test": "npx cypress run --env allure=true,allureResultsPath=cypress/reports/allure-result", "generate-report": "npx allure generate cypress/reports/allure-result --clean -o cypress/reports/allure-report && allure open cypress/reports/allure-report" },
Написание вашего первого теста
После того, как вы установили Cypress и внедрили конфигурации, вы можете создать свой первый тест. Создайте новый файл с именем login.cy.js
в каталоге cypress/e2e
и добавьте следующий код:
describe('Login Page', () => { it('Logs in with valid credentials', () => { cy.visit('https://www.saucedemo.com/') cy.get('#user-name').type('standard_user') cy.get('#password').type('secret_sauce') cy.get('#login-button').click() cy.url().should('include', '/inventory') cy.contains('Products').should('be.visible') }); it('Shows an error with invalid credentials', () => { cy.visit('https://www.saucedemo.com/') cy.get('#user-name').type('standard_user') cy.get('#password').type('invalidPassword') cy.get('#login-button').click() cy.contains('Username and password do not match any user in this service').should('be.visible') }); });
В этом примере учетные данные вводятся после посещения страницы входа, нажимается кнопка входа, а затем выполняется проверка, чтобы увидеть, отображается ли правильная страница или сообщение об ошибке. Первый тест подтверждает, что пользователь может войти в систему, используя действительные учетные данные, а второй тест подтверждает, что при вводе неверных учетных данных отображается сообщение об ошибке.
Мы используем команду cy.visit
для перехода на страницу входа и команду cy.get
для выбора и взаимодействия с полями формы входа. Мы используем команду cy.contains
, чтобы убедиться, что на странице отображается правильный текст, и команду cy.url().should('include', ...)
, чтобы убедиться, что URL-адрес страницы содержит ожидаемый текст.
Запуск вашего теста (через CLI)
Выполните следующие шаги после указания сценариев в файле package.json
.
Шаг 1.Выполните следующую команду, чтобы выполнить тест. После выполнения теста вы сможете увидеть сводку результатов теста на своем терминале. Будет создана новая папка с именем reports
, содержащая результаты теста в формате JSON.
npm test
Шаг 2.Чтобы создать и открыть отчет в формате HTML на основе файла результатов теста JSON, выполните следующую команду:
npm run generate-report
Выполнение теста (через Cypress Test Runner)
Помимо выполнения через CLI, вы также можете запускать свои тесты через Cypress Test Runner, выполнив следующие действия:
Шаг 1. Откройте средство запуска тестов Cypress, выполнив команду ./node_modules/.bin/cypress open
на Mac или npx cypress open
на компьютере с Windows. Это запустит средство запуска тестов Cypress и позволит вам создавать и запускать тесты для вашего веб-приложения.
Шаг 2.Выполните настройку тестирования E2E, а затем выберите браузер.
Шаг 3.Нажмите на тестовый файл E2E, чтобы начать выполнение.
Шаг 4.После завершения теста вы сможете увидеть его результаты следующим образом.
Заключение
Имитируя взаимодействие с пользователем и подтверждая ожидаемые результаты, сквозное тестирование с помощью Cypress представляет собой мощный способ убедиться, что ваше веб-приложение работает должным образом. Используя Cypress, вы можете быстро писать и запускать тесты для своего веб-приложения, настраивая их для работы в различных средах и браузерах. Я надеюсь, что эта статья помогла вам начать работу с Cypress и позволит вам продолжать открывать для себя все функции и возможности этого надежного инструмента тестирования.