Use chromium only in PRs e2e tests (#3374)

# What this PR does
In PR pipelines install dependencies and run e2e tests only in Chromium.
In daily e2e workflow use Chromium, Firefox and Webkit.

## Which issue(s) this PR fixes

## Checklist

- [x] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

.github/workflows/daily-e2e-tests.yml

@@ -32,6 +32,7 @@ jobs:
     with:
       grafana-image-tag: ${{ matrix.grafana-image-tag }}
       run-expensive-tests: true
+      browsers: "chromium firefox webkit"
     secrets: inherit
 
   post-status-to-slack:

.github/workflows/e2e-tests.yml

@@ -5,6 +5,9 @@ name: e2e tests
       grafana-image-tag:
         required: true
         type: string
+      browsers:
+        required: true
+        type: string
       run-expensive-tests:
         description: >
           Whether or not to run Playwright tests that're annotated as "@expensive"
@@ -126,14 +129,14 @@ jobs:
       - name: Install Playwright Browsers
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         working-directory: grafana-plugin
-        run: ./node_modules/.bin/playwright install --with-deps chromium firefox webkit
+        run: ./node_modules/.bin/playwright install --with-deps ${{ inputs.browsers }}
 
       # use the cached browsers, but we still need to install the necessary system dependencies
       # (system deps are installed in the cache-miss step above by the --with-deps flag)
       - name: Install Playwright System Dependencies
         if: steps.playwright-cache.outputs.cache-hit == 'true'
         working-directory: grafana-plugin
-        run: ./node_modules/.bin/playwright install-deps chromium firefox webkit
+        run: ./node_modules/.bin/playwright install-deps ${{ inputs.browsers }}
 
       # we could instead use the --wait flag for the helm install command above
       # but there's no reason to block on that step
@@ -163,6 +166,7 @@ jobs:
           GRAFANA_VIEWER_USERNAME: viewer
           GRAFANA_VIEWER_PASSWORD: viewer
           MAILSLURP_API_KEY: ${{ secrets.MAILSLURP_API_KEY }}
+          BROWSERS: ${{ inputs.browsers }}
         working-directory: ./grafana-plugin
         run: yarn test:e2e
 

.github/workflows/linting-and-tests.yml

@@ -318,4 +318,5 @@ jobs:
       # https://raintank-corp.slack.com/archives/C01C4K8DETW/p1692279329797149
       grafana-image-tag: 10.0.2
       run-expensive-tests: false
+      browsers: "chromium"
     secrets: inherit

grafana-plugin/playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { PlaywrightTestConfig, PlaywrightTestProject, defineConfig, devices } from '@playwright/test';
 
 import path from 'path';
 /**
@@ -12,6 +12,11 @@ export const EDITOR_USER_STORAGE_STATE = path.join(__dirname, 'e2e-tests/.auth/e
 export const ADMIN_USER_STORAGE_STATE = path.join(__dirname, 'e2e-tests/.auth/admin.json');
 
 const IS_CI = !!process.env.CI;
+const BROWSERS = process.env.BROWSERS || 'chromium firefox webkit';
+
+const SETUP_PROJECT_NAME = 'setup';
+const getEnabledBrowsers = (browsers: PlaywrightTestProject[]) =>
+  browsers.filter(({ name }) => name === SETUP_PROJECT_NAME || BROWSERS.includes(name));
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -57,26 +62,26 @@ export default defineConfig({
     headless: IS_CI,
   },
 
-  /* Configure projects for major browsers */
-  projects: [
+  /* Configure projects for major browsers. The final list is filtered based on BROWSERS env var */
+  projects: getEnabledBrowsers([
     {
-      name: 'setup',
+      name: SETUP_PROJECT_NAME,
       testMatch: /globalSetup\.ts/,
     },
     {
       name: 'chromium',
       use: devices['Desktop Chrome'],
-      dependencies: ['setup'],
+      dependencies: [SETUP_PROJECT_NAME],
     },
     {
       name: 'firefox',
       use: devices['Desktop Firefox'],
-      dependencies: ['setup'],
+      dependencies: [SETUP_PROJECT_NAME],
     },
     {
       name: 'webkit',
       use: devices['Desktop Safari'],
-      dependencies: ['setup'],
+      dependencies: [SETUP_PROJECT_NAME],
     },
 
     /* Test against mobile viewports. */
@@ -102,7 +107,7 @@ export default defineConfig({
     //     channel: 'chrome',
     //   },
     // },
-  ],
+  ]),
 
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
   // outputDir: 'test-results/',