Cypress.Screenshot

API «Screenshot» позволяет задавать значения по умолчанию для того, как скриншоты захватываются во время .screenshot и автоматических скриншотов, создаваемых при сбоях тестов. Вы можете задать значения по умолчанию для следующего:

Каких частей экрана следует захватить.
Нужно ли масштабировать приложение, которое тестируется, на скриншоте.
Нужно ли отключить таймеры JavaScript и анимации CSS при создании скриншота.
Нужно ли автоматически создавать скриншоты при возникновении сбоев во время выполнения тестов.
Какие элементы следует затемнить при создании скриншота.
Нужно ли ждать синхронизации журнала команд перед созданием скриншота.

Синтаксис

Cypress.Screenshot.defaults(options)

Аргументы

options (Объект)

Объект, содержащий один или несколько из следующих элементов:

Опция	Значение по умолчанию	Описание
`blackout`	`[]`	Массив строковых селекторов, используемых для соответствия элементам, которые должны быть затемнены при создании скриншота. Не применяется к захватам `runner`.
`capture`	`'fullPage'`	Какие части тестового исполнителя захватить. Это значение игнорируется для захвата скриншотов элементов. Допустимые значения: `viewport`, `fullPage`, или `runner`. Когда `viewport`, приложение, которое тестируется, захватывается в текущем viewport. Когда `fullPage`, приложение, которое тестируется, захватывается полностью сверху вниз. Когда `runner`, захватывается весь viewport браузера, включая журнал команд Cypress. Для скриншотов, автоматически создаваемых при сбое теста, захват всегда приводится к `runner`.
`disableTimersAndAnimations`	`true`	Если true, предотвращает выполнение таймеров JavaScript (`setTimeout`, `setInterval`, и т.д.) и анимаций CSS во время создания скриншота.
`scale`	`false`	Нужно ли масштабировать приложение для соответствия viewport браузера. Это всегда приводится к `true` для захватов `runner`.
`screenshotOnRunFailure`	`true`	Если true, автоматически создаёт скриншот при сбое во время выполнения `cypress run`.
`overwrite`	`false`	Нужно ли перезаписывать дублирующие файлы скриншотов с одинаковым именем файла при сохранении.
`onBeforeScreenshot`	`null`	Обратный вызов перед созданием скриншота (не при сбое). Для захвата элемента, аргументом является захватываемый элемент. Для других скриншотов, аргументом является `$el`.
`onAfterScreenshot`	`null`	Обратный вызов после создания скриншота (не при сбое). Для захвата элемента, первым аргументом является захватываемый элемент. Для других скриншотов, первым аргументом является `$el`. Вторым аргументом являются свойства, относящиеся к скриншотов, включая путь к сохранённому скриншотов и размер сохранённого скриншота.

Примеры

Затемнение элементов перед скриншотом

Элементы, соответствующие указанным селекторам, будут затемнены на скриншоте, но только когда опция capture имеет значение viewport. blackout игнорируется, если опция capture имеет значение runner.

Cypress.Screenshot.defaults({
  blackout: ['.secret-info', '[data-hide=true]'],
})

Создание скриншота всего тестового исполнителя

По умолчанию, cy.screenshot() захватывает только приложение, которое тестируется. Возможно, вам понадобится захватить весь тестовый исполнитель для целей отладки.

Cypress.Screenshot.defaults({
  capture: 'runner',
})

Разрешить таймерам и анимациям продолжать работу

По умолчанию, таймеры JavaScript и анимации CSS отключены, чтобы предотвратить изменения в приложении, которое тестируется, во время создания скриншота, но вы можете отключить это поведение.

Cypress.Screenshot.defaults({
  disableTimersAndAnimations: false,
})

Отключение скриншотов при сбоях

По умолчанию, Cypress автоматически создаёт скриншот при сбое во время выполнения cypress run, но вы можете отключить это.

Cypress.Screenshot.defaults({
  screenshotOnRunFailure: false,
})

Перезапись существующих скриншотов

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

Cypress.Screenshot.defaults({
  overwrite: true,
})

Масштабирование захватов `viewport` и `fullPage`

По умолчанию, масштабирование приложения, которое тестируется, отключено во время создания скриншота, когда опция capture имеет значение viewport, чтобы предотвратить различия между скриншотами на экранах с разными разрешениями. Вы можете включить масштабирование, и приложение будет масштабироваться так же, как при обычном использовании Cypress. Это всегда приводится к true если опция capture имеет значение runner.

Cypress.Screenshot.defaults({
  scale: true,
})

Изменение DOM с помощью `onBeforeScreenshot` и `onAfterScreenshot`

Обратные вызовы onBeforeScreenshot и onAfterScreenshot предоставляют возможность синхронно изменять DOM, чтобы создать более согласованное состояние для скриншота.

В этом примере представьте, что в вашем приложении есть часы, отображающие текущее время. Это может привести к недетерминированным скриншотам, что может создать ложные отрицательные результаты при сравнении скриншотов. Вы можете использовать onBeforeScreenshot для скрытия часов, а затем снова отобразить их с помощью onAfterScreenshot.

Cypress.Screenshot.defaults({
  onBeforeScreenshot($el) {
    const $clock = $el.find('.clock')

    if ($clock) {
      $clock.hide()
    }
  },

  onAfterScreenshot($el, props) {
    const $clock = $el.find('.clock')

    if ($clock) {
      $clock.show()
    }
  },
})

Получение свойств из обратного вызова `onAfterScreenshot`

Cypress.Screenshot.defaults({
  onAfterScreenshot($el, props) {
    // props has information about the screenshot,
    // including but not limited to the following:
    // {
    //   path: '/Users/janelane/project/screenshots/my-screenshot.png',
    //   size: '15 kb',
    //   dimensions: {
    //     width: 1000,
    //     height: 660,
    //   },
    //   scaled: true,
    //   blackout: ['.foo'],
    //   duration: 2300,
    // }
  },
})

Примечания

Где разместить конфигурацию скриншотов

Отличное место для размещения этой конфигурации - в вашем cypress/support/index.js файле, так как он загружается перед оценкой любых файлов тестов.

История

Версия	Изменения
8.7.0	Добавлена опция конфигурации `overwrite`