From c6b09b4da736627b880c6812f3e42760e22f187d Mon Sep 17 00:00:00 2001
From: Alice Pote <alice.writes.wrongs@gmail.com>
Date: Thu, 28 Mar 2024 12:44:56 -0400
Subject: [PATCH] test(wdio): add a browser matrix for our wdio tests

---
 .github/workflows/test-wdio.yml |  7 +++-
 test/wdio/wdio.conf.ts          | 65 ++++++++++++++++++++++-----------
 2 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/.github/workflows/test-wdio.yml b/.github/workflows/test-wdio.yml
index fba7104c7430..17e277118f68 100644
--- a/.github/workflows/test-wdio.yml
+++ b/.github/workflows/test-wdio.yml
@@ -13,9 +13,12 @@ jobs:
     uses: ./.github/workflows/build.yml
 
   run_wdio:
-    name: Run WebdriverIO Component Tests
+    name: Run WebdriverIO Component Tests (${{ matrix.browser }})
     runs-on: ubuntu-22.04
     needs: [build_core]
+    strategy:
+      matrix:
+        browser: [CHROME, FIREFOX, EDGE]
 
     steps:
       - name: Checkout Code
@@ -39,7 +42,7 @@ jobs:
           filename: stencil-core-build.zip
 
       - name: Run WebdriverIO Component Tests
-        run: npm run test.wdio
+        run: BROWSER=${{ matrix.browser }} npm run test.wdio
 
       - name: Check Git Context
         uses: ./.github/workflows/actions/check-git-context
diff --git a/test/wdio/wdio.conf.ts b/test/wdio/wdio.conf.ts
index cbc40e529e3c..c36f6ca7d1ee 100644
--- a/test/wdio/wdio.conf.ts
+++ b/test/wdio/wdio.conf.ts
@@ -7,6 +7,32 @@ import type { Options } from '@wdio/types';
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
 const isCI = Boolean(process.env.CI);
 
+/**
+ * Browser usage
+ *
+ * - based on the `BROWSER` environment variable
+ * - if `BROWSER` is set to 'all' then we use all browsers
+ * - if `BROWSER` is not set, then we default to just chrome
+ * - if `BROWSER` is set to a browser name ('CHROME', 'FIREFOX', 'EDGE') then
+ *   we run on that browser
+ */
+const BROWSER_CONFIGURATION = (() => {
+  switch (process.env.BROWSER) {
+    case 'ALL':
+      return 'ALL';
+    case 'CHROME':
+      return 'CHROME';
+    case 'FIREFOX':
+      return 'FIREFOX';
+    case 'EDGE':
+      return 'EDGE';
+    // we default to chrome in the case where the `BROWSER` env var ins't set
+    // to something (handy for local dev in particular)
+    default:
+      return 'CHROME';
+  }
+})();
+
 export const config: Options.Testrunner = {
   //
   // ====================
@@ -73,16 +99,9 @@ export const config: Options.Testrunner = {
   //
   maxInstances: 10,
   //
-  // If you have trouble getting all important capabilities together, check out the
-  // Sauce Labs platform configurator - a great tool to configure your capabilities:
-  // https://saucelabs.com/platform/platform-configurator
+  // we set this to an empty array here and programmatically add configuration below
   //
-  capabilities: [
-    {
-      // capabilities for local browser web tests
-      browserName: 'chrome', // or "firefox", "microsoftedge", "safari"
-    },
-  ],
+  capabilities: [],
 
   //
   // ===================
@@ -323,16 +342,20 @@ export const config: Options.Testrunner = {
   // }
 };
 
-/**
- * run with more browser in CI
- */
-if (isCI) {
-  (config.capabilities as WebdriverIO.Capabilities[]).push(
-    {
-      browserName: 'firefox',
-    },
-    {
-      browserName: 'edge',
-    },
-  );
+if (['CHROME', 'ALL'].includes(BROWSER_CONFIGURATION)) {
+  (config.capabilities as WebdriverIO.Capabilities[]).push({
+    browserName: 'chrome',
+  });
+}
+
+if (['FIREFOX', 'ALL'].includes(BROWSER_CONFIGURATION)) {
+  (config.capabilities as WebdriverIO.Capabilities[]).push({
+    browserName: 'firefox',
+  });
+}
+
+if (['EDGE', 'ALL'].includes(BROWSER_CONFIGURATION)) {
+  (config.capabilities as WebdriverIO.Capabilities[]).push({
+    browserName: 'edge',
+  });
 }