Take screenshots using Chrome DevTools Protocol

[jennifer-shehane]

Current behavior:

Cypress screenshot algorithm is complicated and has introduced several challenges.

• Cypress doesn't take correct snapshots in 'fullPage' mode in Electron and Chrome browsers Cypress doesn't take correct snapshots in 'fullPage' mode in Electron and Chrome browsers #5876
• Screenshot of webGL content does not render anything Screenshot of webGL content does not render anything #5792
• Chance of race condition when using screenshot() Chance of race condition when using screenshot() #3276
• Screenshot "scroll and stitch together" functionality does not play nicely with React Single Page Apps Screenshot "scroll and stitch together" is not correct when html and body have height: 100% css style #2681
• Full page screenshots are not rendering as expected Full page screenshots with scale: true are not stitched together as expected, contains black borders / spacings #2348

Desired behavior:

Now that #4628 is merged, Cypress has access to Chrome's Debugger Protocol which could be used to take screenshots.

Page.captureScreenshot docs: https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot

Challenges

• This would only be usable in Chrome browser and not extensible to other browsers, so we would have to maintain the other screenshot algorithm anyway unless there are comparable substitutions for other browsers.

Versions

3.7.0

[mikila85]

Fix this already!!!

[flotwig]

@mikila85 You are welcome to open a pull request if you need this quickly. You will want to start with the handler for take:screenshot in cdp_automation.ts. Let us know if you have any questions.

[ThomasGHenry]

Hey, folks. What's the lowest overhead alternative to this in the meantime? Would anyone recommend a workaround? Thanks

[flotwig]

@ThomasGHenry Does cy.screenshot() not work for you? This issue is about changing the internal implementation of screenshots, so there's not really a workaround for it.

[ThomasGHenry]

Thanks, @flotwig.

It does not. I'm experiencing this #5876

I'm wondering if anyone recommends a 3rd party option that plays nicely with cypress in the meantime. Cloud-based solutions like Percy and Applitools aren't ideal. Anything else I've found so far uses cy.screenshot() under the covers. Thanks!

[flotwig]

@ThomasGHenry Might have to wait to use --headless until #5876 is fixed, I'm not sure if there are any 3rd-party screenshot tools for Cypress.

---

With regard to this issue - @jennifer-shehane I think we actually are already taking screenshots using CDP in Chrome and Electron since 3.5.0:

cypress/packages/server/lib/browsers/cdp_automation.ts

Lines 170 to 177 in 719fd98

	case 'take:screenshot':
	return sendDebuggerCommandFn('Page.captureScreenshot')
	.catch((err) => {
	throw new Error(`The browser responded with an error when Cypress attempted to take a screenshot.\n\nDetails:\n${err.message}`)
	})
	.then(({ data }) => {
	return `data:image/png;base64,${data}`
	})

So closing this... oops 😅