Скриншоты элементов

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

Основные возможности скриншотов

  1. Скриншот всей страницы Метод cy.screenshot() делает снимок всей страницы на момент вызова.

    cy.visit('/login');
cy.screenshot('login-page-full');
    • Параметр 'login-page-full' задаёт имя файла скриншота.
    • Скриншоты сохраняются в папке cypress/screenshots по структуре, соответствующей структуре тестов.
    • Можно включить флаг capture: 'runner' для захвата интерфейса тестового раннера Cypress.

  2. Скриншот конкретного элемента Метод .screenshot() применяется и к элементам DOM, что позволяет фиксировать только интересующую область.

    cy.get('#submit-button').screenshot('submit-button');
    • Метод автоматически рассчитывает размеры элемента и обрезает скриншот.
    • Удобно использовать для визуальной регрессии отдельных компонентов.

  3. Настройка формата и качества Cypress позволяет управлять форматом, качеством и фоном скриншотов через объект настроек:

    cy.get('.modal')
  .screenshot({
    blackout: ['.ads-banner'],
    capture: 'viewport',
    overwrite: true,
    scale: true
  });

    Описание ключевых опций:

    • blackout: скрывает чувствительные или динамические элементы (например, рекламные блоки).
    • capture: 'viewport' — текущая видимая область, 'fullPage' — весь документ.
    • overwrite: позволяет перезаписывать существующие файлы.
    • scale: масштабирование изображения для улучшения качества.

Скриншоты при падении тестов

Cypress автоматически делает скриншоты при ошибках выполнения тестов, если в настройках включена опция:

// cypress.config.js
module.exports = {
  e2e: {
    screenshotOnRunFailure: true
  }
};
  • Скриншоты сохраняются в структуре, отражающей путь к тесту.
  • Автоматические снимки фиксируют состояние страницы в момент падения, облегчая диагностику проблем.

Скриншоты и визуальная регрессия

Для тестирования визуальной стабильности интерфейса полезно сочетать Cypress с библиотеками визуальной регрессии (например, cypress-image-snapshot). Основная идея: сравнивать текущий скриншот с эталонным изображением.

Пример интеграции:

import 'cypress-image-snapshot/command';

cy.get('.profile-card').then(($el) => {
  cy.wrap($el).toMatchImageSnapshot({
    failureThreshold: 0.01,
    failureThresholdType: 'percent'
  });
});
  • failureThreshold — допустимое отклонение между эталонным и текущим изображением.
  • failureThresholdType: 'percent' позволяет задавать процентное различие вместо пиксельного.

Полезные приёмы при работе с элементами

  1. Скриншоты динамических элементов Перед созданием скриншота элементов, которые могут изменяться (например, выпадающие меню), рекомендуется использовать команды ожидания:

    cy.get('.dropdown-menu').should('be.visible').screenshot('dropdown-menu');

  2. Фокус на интерактивных компонентах Можно сфокусировать скриншот на конкретной части интерфейса с помощью .scrollIntoView():

    cy.get('#important-section').scrollIntoView().screenshot('important-section');

  3. Множественные элементы Если необходимо сфотографировать несколько элементов в цикле:

    cy.get('.card').each(($el, index) => {
  cy.wrap($el).screenshot(`card-${index}`);
});

Настройки Cypress для скриншотов

В файле конфигурации cypress.config.js можно задать глобальные параметры:

module.exports = {
  screenshotsFolder: 'cypress/custom-screenshots',
  trashAssetsBeforeRuns: true,
  screenshotOnRunFailure: true,
  screenshotQuality: 90
};
  • screenshotsFolder — путь к папке для всех скриншотов.
  • trashAssetsBeforeRuns — удаляет старые скриншоты перед новым запуском.
  • screenshotQuality — регулирует качество JPEG/PNG изображений (0–100).

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

  • Использовать имена файлов, включающие имя теста и элемент, чтобы легче ориентироваться.
  • Для крупных страниц — применять capture: 'viewport' вместо fullPage, чтобы уменьшить размер файла.
  • Для элементов с анимациями или всплывающими эффектами — фиксировать момент, когда элемент стабилен.
  • Совмещать скриншоты с логами и трассировками Cypress, чтобы упростить диагностику визуальных ошибок.

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

Оглавление