Создание скриншотов по требованию

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

Настройка скриншотов

Скриншоты в Cypress настраиваются через файл конфигурации cypress.config.js или через командную строку. Основные параметры конфигурации:

  • screenshotsFolder — путь к папке, где будут сохраняться скриншоты. По умолчанию cypress/screenshots.
  • trashAssetsBeforeRuns — удаление старых скриншотов перед запуском тестов.
  • screenshotOnRunFailure — создание скриншота автоматически при падении теста. По умолчанию включено.

Пример конфигурации:

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    screenshotsFolder: 'cypress/custom_screenshots',
    trashAssetsBeforeRuns: true,
    screenshotOnRunFailure: true,
  },
});

Создание скриншота вручную

Cypress предоставляет команду cy.screenshot() для явного создания скриншота в любом месте теста. Она может применяться к всей странице или к конкретному элементу.

Скриншот всей страницы:

it('Создание скриншота страницы', () => {
  cy.visit('https://example.com');
  cy.screenshot('full-page-screenshot');
});

Скриншот конкретного элемента:

it('Создание скриншота элемента', () => {
  cy.visit('https://example.com');
  cy.get('.main-banner').screenshot('banner-screenshot');
});

Ключевые параметры команды cy.screenshot():

  • capture — определяет, что именно будет захвачено: "fullPage" (вся страница), "viewport" (только видимая область), "runner" (только окно тестов).
  • clip — объект { x, y, width, height } для создания обрезанного скриншота.
  • scale — масштабирование изображения. Значение по умолчанию true для Retina-экранов.
  • overwrite — перезаписывать ли существующий скриншот с таким же именем.

Пример с параметрами:

cy.get('#login-form').screenshot('login-form', {
  capture: 'viewport',
  clip: { x: 0, y: 0, width: 400, height: 300 },
  scale: false,
  overwrite: true
});

Скриншоты при ошибках и событиях

Cypress автоматически создает скриншоты при падении теста, если включена опция screenshotOnRunFailure. Дополнительно можно создавать скриншоты по событию:

Cypress.on('fail', (error, runnable) => {
  cy.screenshot('failure-' + runnable.title);
  throw error;
});

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

Интеграция с отчётами

Скриншоты часто используют совместно с отчетами о тестах, например mochawesome. Cypress сохраняет скриншоты с указанием имени теста и времени выполнения, что облегчает связывание скриншота с конкретным тестом в отчете. При генерации HTML-отчета можно отображать скриншоты для наглядного контроля.

Советы по эффективному использованию скриншотов

  1. Выделять только ключевые элементы — для сложных страниц нет смысла делать скриншот всей страницы каждый раз; лучше фиксировать критичные блоки.
  2. Использовать понятные имена файлов — имена должны отражать сценарий теста и момент захвата.
  3. Комбинировать с видео — Cypress позволяет записывать видео выполнения тестов, а скриншоты дают дополнительную детализацию для анализа.
  4. Оптимизировать параметры clip и scale — уменьшение размера изображения ускоряет сохранение и анализ скриншотов в CI/CD.

Примеры комплексного использования

Создание скриншота после успешного заполнения формы и перед отправкой:

it('Форма регистрации', () => {
  cy.visit('/register');
  cy.get('#username').type('testuser');
  cy.get('#email').type('test@example.com');
  cy.get('#password').type('SecurePass123');
  cy.get('#register-button').screenshot('before-submit');
  cy.get('#register-button').click();
  cy.screenshot('after-submit');
});

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

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

Оглавление