From fbc48d68f1a1582454fa97bfc32abb694579ea2a Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Mon, 8 Aug 2022 07:54:00 +0100
Subject: [PATCH] E2E: Make Cypress recordings higher res + quality (#53342)

---
 packages/grafana-e2e/cypress.json             |  3 +-
 packages/grafana-e2e/cypress/plugins/index.js | 34 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-e2e/cypress.json b/packages/grafana-e2e/cypress.json
index 3183556b78f..eaa48eb162f 100644
--- a/packages/grafana-e2e/cypress.json
+++ b/packages/grafana-e2e/cypress.json
@@ -1,4 +1,5 @@
 {
   "projectId": "zb7k1c",
-  "supportFile": "cypress/support/index.ts"
+  "supportFile": "cypress/support/index.ts",
+  "videoCompression": 20
 }
diff --git a/packages/grafana-e2e/cypress/plugins/index.js b/packages/grafana-e2e/cypress/plugins/index.js
index 9b3125623ed..7ec85fecae1 100644
--- a/packages/grafana-e2e/cypress/plugins/index.js
+++ b/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);