ci: test frontend in multiple browsers

Get the playwright browser from the `VITE_BROWSER` environment variable, defaulting to `chromium`. Run the CI tests in chromium, firefox, and webkit.

Author: eatyourgreens

.github/workflows/frontend-test.yml

@@ -15,6 +15,10 @@ jobs:
       # Make sure to grab the latest version of the Playwright image
       # https://playwright.dev/docs/docker#pull-the-image
       image: mcr.microsoft.com/playwright:v1.56.1-noble
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium, firefox, webkit]
     defaults:
       run:
         working-directory: ./frontend-v2
@@ -33,3 +37,6 @@ jobs:
 
       - name: Run tests
         run: yarn test-storybook
+        env:
+          VITE_BROWSER: ${{ matrix.browser }}
+          HOME: /root

frontend-v2/vite.config.ts

@@ -34,7 +34,10 @@ const proxy = {
 
 // https://vitejs.dev/config/
 export default ({ mode }) => {
-  const { VITE_APP_GA_ID } = loadEnv(mode, process.cwd());
+  const { VITE_APP_GA_ID, VITE_BROWSER = "chromium" } = loadEnv(
+    mode,
+    process.cwd(),
+  );
   const radarOptions = {
     enableDev: true,
     analytics: {
@@ -94,7 +97,7 @@ export default ({ mode }) => {
               enabled: true,
               headless: true,
               provider: playwright(),
-              instances: [{ browser: "chromium" }],
+              instances: [{ browser: VITE_BROWSER }],
             },
             setupFiles: [".storybook/vitest.setup.ts"],
             retry: 2,