скриншот

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

Синтаксис

.screenshot()
.screenshot(fileName)
.screenshot(options)
.screenshot(fileName, options)

// ---or---

cy.screenshot()
cy.screenshot(fileName)
cy.screenshot(options)
cy.screenshot(fileName, options)

Использование

Правильное использование

cy.screenshot()
cy.get('.post').screenshot()

Аргументы

fileName (Строка)

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

options (Объект)

Передайте объект options, чтобы изменить стандартное поведение .screenshot().

Для получения дополнительной информации об этих параметрах и установке некоторых в качестве значений по умолчанию для всех используемых .screenshot(), см. документацию по API Cypress.Screenshot.

Возвращаемое значение

• .screenshot() возвращает тот же объект, который был передан предыдущей командой.

Примеры

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

Без аргументов

Сделать скриншот

// cypress/integration/users.spec.js

describe('my tests', () => {
  it('takes a screenshot', () => {
    // screenshot will be saved as
    // cypress/screenshots/users.spec.js/my tests -- takes a screenshot.png
    cy.screenshot()
  })
})

Имя файла

Сделать скриншот и сохранить под определенным именем файла

// screenshot will be saved as
// cypress/screenshots/spec.js/clicking-on-nav.png
cy.screenshot('clicking-on-nav')

Сделать скриншот и сохранить в определенной папке

// screenshot will be saved as
// cypress/screenshots/spec.js/actions/login/clicking-login.png
cy.screenshot('actions/login/clicking-login')

Область

Обрезать скриншот до определенной позиции и размера

// screenshot will be clipped 20px from the top and left
// to the dimensions 400px x 300px
cy.screenshot({ clip: { x: 20, y: 20, width: 400, height: 300 } })

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

Сделать скриншот первого элемента .post

cy.get('.post').first().screenshot()

Сделать скриншот первого элемента .post с отступом в 10 пикселей вокруг него

cy.get('.post').first().screenshot({ padding: 10 })

После скриншота щелкнуть захваченный элемент

cy.get('button').first().screenshot().click()

Получение информации о скриншоте из обратного вызова onAfterScreenshot

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

Примечания

Правила именования

Именование скриншотов подчиняется следующим правилам:

• По умолчанию скриншот сохраняется в файле с путём, относительным к папке со скриншотами, дополненным путём, указывающим на местоположение файла спецификации, с именем, включающим текущие наборы тестов и имя теста: {screenshotsFolder}/{specPath}/{testName}.png
• Для скриншота с именем используется это имя вместо наборов тестов и имени теста: {screenshotsFolder}/{specPath}/{name}.png
• Для любых дублированных скриншотов (с именем или без) к имени добавляется номер: {screenshotsFolder}/{specPath}/{testName} (1).png.

Это поведение можно изменить, передав параметр {overwrite: true} в cy.screenshot() для явного перезаписи дублированных скриншотов.

• Для скриншота, созданного при ошибке, используется схема именования по умолчанию, и имя дополняется (failed): {screenshotsFolder}/{specPath}/{testName} (failed).png

Например, при расположении файла спецификации по адресу cypress/integration/users/login_spec.js:

describe('my tests', () => {
  it('takes a screenshot', () => {
    cy.screenshot() // cypress/screenshots/users/login_spec.js/my tests -- takes a screenshot.png
    cy.screenshot() // cypress/screenshots/users/login_spec.js/my tests -- takes a screenshot (1).png
    cy.screenshot() // cypress/screenshots/users/login_spec.js/my tests -- takes a screenshot (2).png

    cy.screenshot('my-screenshot') // cypress/screenshots/users/login_spec.js/my-screenshot.png
    cy.screenshot('my-screenshot') // cypress/screenshots/users/login_spec.js/my-screenshot (1).png

    cy.screenshot('my/nested/screenshot') // cypress/screenshots/users/login_spec.js/my/nested/screenshot.png

    // if this test fails, the screenshot will be saved to cypress/screenshots/users/login_spec.js/my tests -- takes a screenshot (failed).png
  })
})

after:screenshot событие плагина

Вы можете получить подробную информацию о любом скриншоте и изменить его после записи на диск с помощью after:screenshot события плагина.

Ошибки тестирования

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

При выполнении через cypress run или в непрерывной интеграции, Cypress автоматически создаёт скриншот при ошибке теста. Вы можете отключить это, установив screenshotOnRunFailure на false в своей screenshotOnRunFailure или Cypress.Screenshot.defaults().

Просмотр скриншотов

Скриншоты в CI

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

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

Асинхронность

Понимание, когда создается скриншот

Создание скриншота — асинхронное действие, которое занимает около 100ms для завершения. К моменту создания скриншота вероятно, что что-то в вашем приложении изменится. Важно понимать, что скриншот может не полностью отражать вид приложения в момент выполнения команды.

Например, скажем, команда, которую мы написали, превысила время ожидания: cy.get('#element'). Это приводит к ошибке вашего теста. Затем Cypress автоматически создаёт скриншот при ошибке теста, но возможно, что что-то в вашем приложении изменится в течение этого 100ms временного интервала. Гипотетически, ваше приложение может отобразить элемент, который вы первоначально ожидали увидеть.

Ещё одна потенциальная проблема, о которой следует знать, заключается в том, что наш собственный журнал команд использует React в качестве движка и отображается асинхронно во время кадра анимации. Возможно, вы увидите скриншот до того, как наш журнал команд завершит отрисовку. Это означает, что вы можете не увидеть отображаемую ошибку на скриншоте. Но именно поэтому мы создаём видео — чтобы показать вам полную ошибку.

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

Полные захват страницы и элементы fixed/sticky

При передаче fullPage в опцию capture, Cypress прокручивает приложение, которое тестируется, сверху вниз, делает скриншоты в каждой точке и склеивает их вместе. Из-за этого элементы, которые position: fixed или position: sticky будут появляться несколько раз на конечном скриншоте. Чтобы предотвратить это, в большинстве случаев можно программно изменить элемент на position: absolute перед скриншотом и вернуть его обратно после, как показано ниже:

cy.get('.sticky-header').invoke('css', 'position', 'absolute')
cy.screenshot()
cy.get('.sticky-header').invoke('css', 'position', null)

Правила

Требования

• cy.screenshot() можно использовать после cy или после команды, которая возвращает один DOM-элемент.

Утверждения

• cy.screenshot() будет выполнять утверждения, которые вы прицепили только один раз и не будет их перепроверять.

Таймауты

• cy.screenshot() никогда не должен превышать таймаут.

Поскольку cy.screenshot() асинхронный, теоретически возможно превышение таймаута при общении с внутренними API автоматизации Cypress. Но на практике это должно никогда не происходить.

Журнал команд

Сделать скриншот со специфическим именем файла

cy.screenshot('my-image')

Вышеуказанные команды будут отображаться в журнале команд как:

При нажатии на screenshot в журнале команд, консоль выведет следующее:

История

См. также

• После скриншота API
• cy.debug()
• Cypress.Screenshot
• Услуга панели мониторинга
• .pause()
• Скриншоты и видеозаписи
• Визуальное тестирование