cyclope

[![ci status][ci image]][ci url] [![renovate-app badge][renovate-badge]][renovate-app]  !cypress version

> Cypress DOM snapshots and consistent image diffing in the cloud

Blog posts

- Save The Page On Test Failure

Videos

- Cyclope: Save A Full Page With Styles If A Cypress Test Fails
- Use LocalStorage From Cypress Test To Set Initial Data
- Test Dragging Items
- Introduction to cy.session command

Course lessons

$3

- Bonus 39: Save the entire HTML page on test failures

Install

Add this plugin to your project. Assuming Cypress is a dev dependency

``shell
$ npm i -D cyclope


or if you prefer yarn


$ yarn add -D cyclope
`

Include the plugin from your support file or an individual spec file

`js
// in cypress/support/index.js
// https://github.com/bahmutov/cyclope
import 'cyclope'
`

$3

`js
// cypress.config.js
const { defineConfig } = require('cypress')

module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// https://github.com/bahmutov/cyclope
require('cyclope/plugin')(on, config)
// IMPORTANT to return the config object
// with the any changed environment variables
return config
},
},
})
`

$3

Include the plugin from your plugins file

`js
// cypress/plugins/index.js
module.exports = (on, config) => {
// https://github.com/bahmutov/cyclope
require('cyclope/plugin')(on, config)

// IMPORTANT to return the config object
// with the any changed environment variables
return config
}
`

Save the current page

If you need to save the current web application page, including any resources

`js
// cypress/integration/spec.js
it('saves the page', () => {
// normal Cypress commands
cy.contains('.some-selector', 'some text')
.should('be.visible')
// when the app has reached the desired state
// save the page in the folder "page"
.savePage('page')
})
`

All local resources like images and CSS should be saved as local files. You can create a zip archive

`js
// use .zip extension to zip the folder into a file
cy.savePage('page.zip')
`

When saving the zip, the function yields an object with filename, width, and height properties.

$3

- removeIframes (false by default) removes all