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

Make the screenshot/video size configurable #587

Open
carlos-granados opened this issue Aug 9, 2017 · 21 comments
Open

Make the screenshot/video size configurable #587

carlos-granados opened this issue Aug 9, 2017 · 21 comments
Labels
topic: screenshots 📸 topic: video 📹 type: feature New feature that does not currently exist

Comments

@carlos-granados
Copy link

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

@jennifer-shehane jennifer-shehane added the type: feature New feature that does not currently exist label Aug 9, 2017
@deanchen

This comment has been minimized.

@pgroot91
Copy link

pgroot91 commented Feb 27, 2018

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.

@jennifer-shehane jennifer-shehane added the stage: ready for work The issue is reproducible and in scope label Sep 14, 2018
@Konstruktour
Copy link

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

@SimonSch

This comment has been minimized.

@polom01

This comment has been minimized.

@Phenomite
Copy link

Phenomite commented May 6, 2020

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
Copy link
Author

@Phenomite where did you add that code?

@Phenomite
Copy link

Oh yes sorry, updated.

@carlos-granados
Copy link
Author

carlos-granados commented May 7, 2020

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
Copy link

sesam commented May 19, 2020

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
Copy link
Contributor

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

movie-screenshot

@jvanoostveen
Copy link

I've finally figured out why I could not get any videos and screenshots larger dan 1024x768, no matter what I did for settings. It will not record videos or make screenshots larger then the defined screen size voor the computer it is running on (which are VMs in our case). When I set my own screen to a smaller resolution then the resolution set in the settings, it will max out to the resolution of the screen.
Not sure how these internals work, but it is quite a strange thing for a headless browser IMHO... and probably a limitation outside the scope of Cypress, but as others might have troubles with this, setting a larger screen size will allow to make larger screenshots and videos...

@jennifer-shehane
Copy link
Member

@jvanoostveen Looking into this, I haven't been able to verify this locally on my Mac, using Electron headless (which is the default) or any other browser. I've been setting my screen size to 3800 x 3800 and the video recording and screenshots taken on failure are that size.

I'd like to narrow down why the screen size overwrites don't work in some environments as it does in others.

Do you have any more specifics to share about your environment and the workarounds used that eventually made it work?

@jvanoostveen
Copy link

In the end I have no workarounds, just the settings mentioned in #14430, although with some tweaks (family to name and the Electron preferences.resizable = false.

Cypress 6.2.1
Electron (embedded)
Windows 10 version 1909 (build 18363.1198)
Azure DevOps (although also locally when changing screen size)

@jvanoostveen
Copy link

@jennifer-shehane I was wondering if you found the time to look at it, if it a limitation / bug in the code or limitation when running it on Windows.
I noticed I didn't mention what a possible workaround would be, which is setting the screen size of the machine running Cypress to at least the size you want for the screenshots/videos. But this is not so simple on CI build machines.

@KuFain
Copy link

KuFain commented Jan 25, 2021

Exactly same behavior in ours CI server. Port-view is set to 1920x1080, and if tests are run locally, screenshots and videos are made with 1920x1080, but on CI server V,) everything is saved with 1024x768.

@jennifer-shehane
Copy link
Member

We are working on setting the size of the window that screenshots and videos will be captured to a higher default resolution (1920x1080) across browsers. #15686

We think this will help many of the requests to have higher resolution screenshots and videos to review. It does not however satisfy the whole requirements of this issue of having an easy configurable way to change the size yourself.

It should also resolve some of the issues with not being able to override the Electron size, even with our suggested workarounds. #15686

@gsouf
Copy link

gsouf commented Mar 29, 2023

    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
        }
    })

That doesn't seem to be working in cypress 12.8 the screenshot size in headless mode is always smaller than the one in headed mode with a large screen

@dobladov
Copy link

    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
        }
    })

That doesn't seem to be working in cypress 12.8 the screenshot size in headless mode is always smaller than the one in header mode with a large screen

I have the same issue using a Mac Pro M1 with two external screens, electron headless always runs using --force-device-scale-factor=2 and there's no way to force it to 1.

When running on the Github CI it runs with a value of 1 and can't be forced to a value of 2, which makes me think the setting does not work.

I tried other approaches like setting the value like shown here without success:

Here is another example of someone have 2x resolution on headless mac: #6485 (comment)

Unfortunately, this change seems broken: #17375

@mlnarik
Copy link

mlnarik commented Oct 2, 2023

any new solution for Chrome?

@mrAnomalyy
Copy link

Bump this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic: screenshots 📸 topic: video 📹 type: feature New feature that does not currently exist
Projects
None yet
Development

No branches or pull requests