Автоматические скриншоты при ошибках

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

Включение автоматических скриншотов

Для активации автоматических скриншотов используется конфигурационный файл cypress.config.js (или cypress.json в старых версиях). Основные параметры, отвечающие за скриншоты:

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    screenshotsFolder: 'cypress/screenshots',
    screenshotOnRunFailure: true
  }
})
  • screenshotsFolder — путь, куда будут сохраняться скриншоты.
  • screenshotOnRunFailure — при значении true Cypress автоматически делает скриншот при падении любого теста.

Форматы и наименования файлов

Cypress сохраняет скриншоты с именем, которое отражает структуру теста:

<имя_спецификации>/<название_теста> (failed).png

Пример: login.spec.js/Login with invalid credentials (failed).png

Такое именование помогает быстро находить нужный скриншот без лишних поисков.

Скриншоты вручную

Иногда требуется сделать скриншот в определённой точке теста, независимо от ошибок. Для этого используется команда:

cy.screenshot('custom_name')

Эта команда создаёт скриншот с указанным именем. Также можно настроить полный скриншот страницы или только определённого элемента:

cy.get('.login-form').screenshot('login-form')

Настройка качества и размеров

Cypress позволяет управлять качеством и разрешением скриншотов:

cy.screenshot('homepage', {
  scale: true,
  blackout: ['.ads-banner'],
  capture: 'runner',
  clip: { x: 0, y: 0, width: 800, height: 600 }
})
  • scale — включает масштабирование скриншота в соответствии с устройством.
  • blackout — скрывает элементы, которые не должны попасть на скриншот.
  • capture — определяет, что будет захвачено: 'viewport' или 'runner'.
  • clip — обрезает область скриншота по заданным координатам.

События для расширенного контроля

Cypress предоставляет хук afterEach, который позволяет делать скриншот при падении теста с дополнительной обработкой:

afterEach(function () {
  if (this.currentTest.state === 'failed') {
    cy.screenshot(`failure-${this.currentTest.title}`)
  }
})

Такой подход позволяет:

  • Генерировать собственные имена файлов для удобного поиска.
  • Добавлять метаданные или временные отметки.
  • Сохранять скриншоты в структуре каталогов по дате или функционалу.

Интеграция с видео-записью

Cypress поддерживает запись видео всех тестов. Скриншоты и видео могут быть синхронизированы для более точного анализа:

import { defineConfig } from 'cypress'

export default defineConfig({
  video: true,
  screenshotsFolder: 'cypress/screenshots',
  videoUploadOnPasses: false
})

Видео фиксирует все действия теста, а скриншоты — момент ошибки, что даёт комплексное понимание проблемы.

Советы по организации скриншотов

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

Поддержка CI/CD

При запуске Cypress в CI/CD скриншоты автоматически сохраняются и могут быть загружены в артефакты сборки. Для этого достаточно настроить путь сохранения в конфигурации и убедиться, что папка доступна для извлечения после сборки. Это позволяет мгновенно видеть причины падения тестов без локального запуска.

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

Оглавление