test(wdio): add a browser matrix for our wdio tests

ionic-team · Mar 28, 2024 · 2823adf · 2823adf
1 parent 962372f
commit 2823adf
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 23 deletions.
diff --git 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
@@ -7,6 +7,30 @@ 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 +97,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 +340,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',
+  });
 }