New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Proposal - cy.screenshot enhancements #1424
Comments
To disable CSS animations insert this *, *:before, *:after {
transition-property: none !important;
transform: none !important;
animation: none !important;
} |
After screenshot perform all the cleanup - remove the CSS, blackouts, and revert timers. |
After some discussion, changing Cypress.Screenshot.defaults({
capture: ['app', 'everything']
}) Still need a decent name for 'everything'. Ideas:
Also include 'app-scaled' as an option? Or, another idea is to accept an object instead of a string for each item (maybe called it Cypress.Screenshot.defaults({
screenshots: [
{
capture: 'app',
scale: false
},
{
capture: 'everything',
scale: true
}
]
}) Perhaps the user could still use the string 'app' or 'everything' and it defaults to @brian-mann, @jennifer-shehane, @bahmutov, thoughts? |
Latest API: Cypress.Screenshot.defaults({
capture: 'app', // or 'runner'
waitForCommandSynchronization: true,
scaleAppCaptures: false,
disableTimersAndAnimations: true,
screenshotOnRunFailure: true,
blackout: ['selectors'],
beforeScreenshot: (document) => {},
afterScreenshot: (document) => {},
}) By default, taking 'app' captures with |
Some additions: Allow capturing full pageAdd 'fullpage' option for cy.screenshot({
capture: 'fullpage'
}) Implement it by scrolling to the top, then taking a screenshot, scrolling, taking a screenshot, and so on, then stitching them together. When we implement native events, we'll be able to use Chrome's debugger protocol to accomplish this in a better, more succinct way. Its implementation utilizes device emulation overrides. See puppeteer's implementation. Add element capture supportMake cy.get('.foo').screenshot() Implement as follows:
Number 3 will be unnecessary for Chrome once implemented with debugger protocol. See puppeteer's implementation. |
Some more changes to this API before it's released:
|
Released in |
Can Screenshot give us DOM which can be stored in JSON format the way snapshot https://github.com/cypress-io/snapshot gives? |
@ModiYesha No. |
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.
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)The text was updated successfully, but these errors were encountered: