Proposal - cy.screenshot enhancements

Make cy.screenshot() more useful to go down the path towards screenshot diffing.

Let’s create a new set of API’s to make it easier to take a picture of the AUT (application under test) without involving the Cypress UI.

To make this happen, we’ll also need to give the user the option to remove the artificial “scaling” Cypress applies, and we’ll need to black out all of the excess areas.

Bonus points for also going down the route of slicing out the “blacked out” areas of the picture so the resulting screenshot has no excess - and is insulated from resolution differences.

This also leads us towards being able to take pictures of just dom elements instead of the whole window.

Cypress.Screenshot.defaults({
  capture: 'commands | app | both', // default 'commands'
  waitForCommandSynchronization: true, // when taking a picture of the commands, wait until they are synchronized
  scaleAppCaptures: false, // when taking a picture of the app, remove the scaling
  disableTimersAndAnimations: true, // prevent app animations and timers from firing
  screenshotOnRunFailure: true, // config.screenshotOnRunFailure
  blackout: ['selectors'], // whatever matches, we'll blackout their box model
  onScreenshot: ($dom) => {

  },
})

To disable animations - we need to keep references for setTimeout, setInterval, requestAnimationFrame during the initial phase of event binding to the window - and then prevent callbacks from firing until the screenshot has been taken.

onScreenshot would yield you the $elements that are being screenshotted - enabling the user to synchronously perform changes on it (like changing dynamic content).

blackout allows the user to easily pick selectors which we’d use to blackout their box model. This would utilize the logic for layering hitboxes (except layer only a blacked out piece)

[brian-mann]

Released in 3.0.0.

[brian-mann]

To disable CSS animations insert this <style> into the document:

*, *:before, *:after {
  transition-property: none !important;
  transform: none !important;
  animation: none !important;
}