Skip to content
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

Set screen's device pixel ratio to a standard ratio for all browsers run headlessly via cypress run #17375

jennifer-shehane opened this issue Jul 16, 2021 · 2 comments · Fixed by #17377
topic: video 📹 type: breaking change Requires a new major release version


Copy link

jennifer-shehane commented Jul 16, 2021

What would you like?

The default device pixel ratio should be set to 1x for all browsers when running tests headlessly during cypress run.

Why is this needed?

When running Chrome, Cypress uses the device pixel ratio of the machine it is run within. This creates variability of screenshot and video sizes when someone runs tests via cypress run on their Mac (which is retina 2x) and their CI (which is not retina, 1x). This can create unexpected behavior where users see the screenshots as twice the size they were expecting (or the reverse) as described in #6485.

Ideally we would set the DPR to 2x as this will result in what is considered 'high definition' videos and screenshots. But this has other performance implications that we're currently investigating #16854.

To normalize across machines and browsers, we can set the DPR to 1x for Chrome.

  • Firefox --headless (always runs 1x)
  • Electron --headless (always runs 1x)
  • Chrome --headless (uses the DPR of current machine)


This would create lower quality videos and screenshots for users using captured videos and screenshots on a high DPR machine (like retina Mac). In this case, they would be able to override this 1 DPR in the Chrome browser only using the browser launch API to override.

// cypress/plugins/index.js
module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    if ( === 'chromium' && browser.isHeadless) {
      // force screen to be retina
      // launchOptions.args.push('--force-device-scale-factor=2')

    return launchOptions
@jennifer-shehane jennifer-shehane self-assigned this Jul 16, 2021
@jennifer-shehane jennifer-shehane added type: breaking change Requires a new major release version topic: video 📹 labels Jul 16, 2021
@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review stage: work in progress and removed stage: to do stage: needs review The PR code is done & tested, needs review labels Jul 16, 2021
Copy link

cypress-bot bot commented Jul 19, 2021

The code for this is done in cypress-io/cypress#17377, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

Copy link
Member Author

Released in 8.0.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v8.0.0, please open a new issue.

@cypress-io cypress-io locked as resolved and limited conversation to collaborators Jul 20, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
topic: video 📹 type: breaking change Requires a new major release version
None yet

Successfully merging a pull request may close this issue.

1 participant