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

packages/grafana-e2e/cypress.json

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

packages/grafana-e2e/cypress/plugins/index.js

@@ -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);