E2E: Make Cypress recordings higher res + quality (#53342)

This commit is contained in:
Josh Hunt 2022-08-08 07:54:00 +01:00 committed by GitHub
parent 2dab7ad890
commit fbc48d68f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 1 deletions

View File

@ -1,4 +1,5 @@
{
"projectId": "zb7k1c",
"supportFile": "cypress/support/index.ts"
"supportFile": "cypress/support/index.ts",
"videoCompression": 20
}

View File

@ -33,6 +33,40 @@ module.exports = (on, config) => {
},
});
// Make recordings higher resolution
// https://www.cypress.io/blog/2021/03/01/generate-high-resolution-videos-and-screenshots/
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) {
// might not work on CI for some reason
launchOptions.preferences.width = width;
launchOptions.preferences.height = height;
}
if (browser.name === 'firefox' && browser.isHeadless) {
launchOptions.args.push(`--width=${width}`);
launchOptions.args.push(`--height=${height}`);
}
// IMPORTANT: return the updated browser launch options
return launchOptions;
});
// Always extend with this library's config and return for diffing
// @todo remove this when possible: https://github.com/cypress-io/cypress/issues/5674
return extendConfig(config);