Cypress: Make the screenshot/video size configurable

[carlos-granados]

Right now the resolution of the screenshots and the recorded video is fixed at 1280x720. This should be configurable

[deanchen]

+1

[pgroot91]

Like also to see this feature/option! 👍 HD, FHD or even UHD with all kidding aside... 😄 Not sure if this is technically possible but it would be nice indeed.

[Konstruktour]

any news about this issue? would really be helpfull. sometimes it is not possible/very hard to read tiny texts on recorded video :(

[SimonSch]

+1

[polom01]

@jennifer-shehane any update?

[Phenomite]

This worked for me and adjusted all attached screenshots to x1080.

In cypress\plugins\index.js:

module.exports = (on,config) => {
  on('before:browser:launch', (browser = {}, launchOptions) => {
    if (browser.name === 'electron') {
      launchOptions.preferences['width'] = 1920;
      launchOptions.preferences['height'] = 1080;
      launchOptions.preferences['resizable'] = false;
      return launchOptions
    }
    if (browser.name === 'chrome' && browser.isHeadless) {
      launchOptions.push('--window-size=1920,1080')
      return launchOptions
    }
  })
};

[carlos-granados]

@Phenomite where did you add that code?

[Phenomite]

Oh yes sorry, updated.

[carlos-granados]

In the latest version of Cypress (4.0.0 and up), the signature of the before:browser;launch event has changed, the second parameter is now an object, not an array, so this needs to be changed a little bit. Also, we only want to do this if we are running headless, even if it is Electron, so my final version is a bit different:

    on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.name === 'electron' && browser.isHeadless) {
            launchOptions.preferences['width'] = 1920;
            launchOptions.preferences['height'] = 1080;
            launchOptions.preferences['resizable'] = false;
            return launchOptions
        }
        if (browser.name === 'chrome' && browser.isHeadless) {
            launchOptions.args.push('--window-size=1920,1080')
            return launchOptions
        }
    })

I can confirm that this works perfectly both for screenshots and videos, so this is great news

[sesam]

Do you need to return unmodified launchOptions, or is implicitly returning undefined fine? This is a feature I'm interested in using. Should I copy from the above, or is this supposed to be added to some future release? How does the cypress config viewPort relate to this? I had imagined that the video should capture the viewPort, and then it could be optional if we also want to capture the test runner that wraps the app. But that is maybe out of scope for this ticket.

[bahmutov]

You can see high-resolution movies in action in http://github.com/bahmutov/cypress-movie

• I am using Chrome headless browser on CI, seems to be very reliable in generating 1920x1080 movies

Example still from the movie showing the resolution