Setting Electron Dimensions Does Not Work In CI

[GregLahaye]

Current behavior

I was following the instructions at https://docs.cypress.io/api/plugins/browser-launch-api#Set-screen-size-when-running-headless to try to set the Electron headless dimensions when running in CI because at the moment the videos are very low quality. I have copied the exact code shown and it works fine locally but does not seem to have any affect when running on TeamCity. I've previously been doing this with Chrome and it worked fine but Electron does not work on CI for some reason.

Desired behavior

I would like any way to have decent looking recordings when setting the Electron viewport to 1367x768, currently the recording sidebar takes almost half the screen and I can't really see the browser view.

Test code to reproduce

index.js

module.exports = (on, config) => {
    on("before:browser:launch", (browser = {}, launchOptions) => {
        console.log(
            "launching browser %s is headless? %s",
            browser.name,
            browser.isHeadless,
        );

        // the browser width and height we want to get
        // our screenshots and videos will be of that resolution
        const width = 1920;
        const height = 1080;

        console.log("setting the browser window size to %d x %d", width, height);

        if (browser.name === "chrome" && browser.isHeadless) {
            launchOptions.args.push(`--window-size=${width},${height}`);

            // force screen to be non-retina and just use our given resolution
            launchOptions.args.push("--force-device-scale-factor=1");
        }

        if (browser.name === "electron" && browser.isHeadless) {
            launchOptions.preferences.width = width;
            launchOptions.preferences.height = height;
        }

        if (browser.name === "firefox" && browser.isHeadless) {
            launchOptions.args.push(`--width=${width}`);
            launchOptions.args.push(`--height=${height}`);
        }

        return launchOptions;
    })

    return config;
}

cypress.json

    "viewportWidth": 1366,
    "viewportHeight": 768,

Versions

6.8.0

[GregLahaye]

I see that this is actually mentioned in https://www.cypress.io/blog/2021/03/01/generate-high-resolution-videos-and-screenshots/
Ctrl+F '// might not work on CI for some reason'

[jennifer-shehane]

Yeah...we have had people report the effects of Electron headless sizing not taking effect. #587

We are working on a PR to make the default size larger for all sizes so that this configuration is not necessary for those that just want high resolution videos/screenshots. #15686

I'm hoping some insight will come out of that on how to configure specific sizes.

[kuceb]

this will be fixed in #15686

[cypress-bot]

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

[bahmutov]

Released in v7.0.0

[GregLahaye]

Thanks all, our recordings look great in 7.0.0. Will be upgrading after performance issues are sorted out.