Cypress screenshot and video size are restricted to 800 x 600 in Chrome Headless

Current behavior:

When running cy.screenshot(), the screenshot differs when running in Chrome Headless vs Chrome Headed vs Electron Headless:

Electron Headless:

Chrome Headed:

Chrome Headless:

Desired behavior:

It seems as though any screenshot taken while running headless chrome will produce an image that is only 800x600 pixels. This is an issue because i would like to run all tests using headless chrome, however the screenshots headless chrome produces are not large (wide/tall) enough to fully capture my application.

When running chrome headless, changing the size using cy.viewport only works when the given size is less than 800x600. For example if i call cy.viewport(1920,1080) then call cy.screenshot(), the screenshot will be 800x600. However if i call cy.viewport(700,500) then call cy.screenshot(), the screenshot will be 700x500.

Test code to reproduce

cy.visit('https://google.com/')

cy.screenshot('test1') //produces a 800x600 pixel image

cy.viewport(700,500)
cy.screenshot('test2') //produces a 700x500 pixel image

cy.viewport(1920,1080)
cy.screenshot('test3') //produces a 800x600 pixel image

Versions

Cypress 3.8.2 Windows 10 Resolution 1920x1200 node 12.13.1 npm 6.12.1

[jennifer-shehane]

So, after talking this over with the team. This is kind of expected behavior. Basically, Chrome is running headless - which means there is no display. So, there is not a display size that Cypress can pull from and automagically know to set the window size at.

However, I advocated for having a better default than 800 x 600, which we can do. Since xvfb generally restricts the size of most users runs during cypress run to 1280 x 720, I thought this would be a better default.

---

@cooleiwhistles The cy.viewport() only applies to the height and width of the application under test when rendered. Not the size of the display (including the command log and Cypress Test Runner GUI).

@0xIslamTaha @cooleiwhistles I am not able to recreate any timeouts during cy.screenshot() while passing the window size using the basic Cypress screenshot command (no plugins). Are you using a plugin to take screenshots? Because this may be an issue with the plugin or it could be related to this issue https://github.com/cypress-io/cypress/issues/5016

Workaround

You can set the window size to whatever you want in Chrome headless.

3.x.x versions

module.exports = (on, config) => {
  on('before:browser:launch', (browser, args) => {
    if (browser.name === 'chrome' && browser.isHeadless) {
      args.push('--window-size=1280,720')
  
      return args
    }
  })
}

4.x.x version

module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.name === 'chrome' && browser.isHeadless) {
      console.log('TRUE')
      launchOptions.args.push('--window-size=1280,720')
  
      return launchOptions
    }
  })
}

Code

Default args we send to Chrome are here: https://github.com/cypress-io/cypress/blob/develop/packages/server/lib/browsers/chrome.ts#L42:L42

So, I guess you would have to somehow detect that they are running Chrome headless and push in the --window-size=1280,720 arg when that is true.

I think you would likely do this check in this method: https://github.com/cypress-io/cypress/blob/develop/packages/server/lib/browsers/chrome.ts#L341:L341

[Threnos]

Faced this issue as well. Debugging failing headless tests became harder - such small wiewport prevents from reading error messages.