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

Предварительные требования

  1. Node.js установлен
  2. Редактор исходного кода, например. Код 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 и позволит вам продолжать открывать для себя все функции и возможности этого надежного инструмента тестирования.