feat: Introduce Playwright for e2e testing

.github/workflows/ci.yaml

@@ -150,3 +150,103 @@ jobs:
 
       - name: Test with coverage
         run: npm run test:ci
+
+  # E2E job: Run Playwright e2e tests (parallel with other checks)
+  e2e:
+    needs: setup
+    runs-on:
+      group: gusto-ubuntu-default
+    continue-on-error: true
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Restore node_modules cache
+        uses: actions/cache/restore@v4
+        with:
+          path: node_modules
+          key: ${{ needs.setup.outputs.cache-key }}
+
+      - name: Cache Playwright browsers
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            playwright-${{ runner.os }}-
+
+      - name: Install Playwright browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps chromium
+
+      - name: Install Playwright system dependencies only
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        run: npx playwright install-deps chromium
+
+      - name: Initialize MSW
+        run: npx msw init e2e/public --save=false
+
+      - name: Run e2e tests
+        run: npm run test:e2e
+
+      - name: Upload test results
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
+  # E2E Demo job: Run Playwright e2e tests against the live demo environment
+  e2e-demo:
+    needs: setup
+    runs-on:
+      group: gusto-ubuntu-default
+    continue-on-error: true
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Restore node_modules cache
+        uses: actions/cache/restore@v4
+        with:
+          path: node_modules
+          key: ${{ needs.setup.outputs.cache-key }}
+
+      - name: Cache Playwright browsers
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            playwright-${{ runner.os }}-
+
+      - name: Install Playwright browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps chromium
+
+      - name: Install Playwright system dependencies only
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        run: npx playwright install-deps chromium
+
+      - name: Initialize MSW
+        run: npx msw init e2e/public --save=false
+
+      - name: Run e2e tests against demo environment
+        run: npm run test:e2e:demo
+
+      - name: Upload demo test results
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report-demo
+          path: playwright-report/
+          retention-days: 7

.gitignore

@@ -189,3 +189,14 @@ dist
 
 # Storybook build output
 storybook-static/
+
+# Playwright
+playwright-report/
+test-results/
+
+# E2E local testing
+e2e/.e2e-state.json
+e2e/local.config.env
+
+# MSW generated service worker
+mockServiceWorker.js

.storybook/main.ts

@@ -3,17 +3,11 @@ import { fileURLToPath } from 'node:url'
 import type { StorybookConfig } from '@storybook/react-vite'
 import { mergeConfig } from 'vite'
 import { resolve, dirname } from 'path'
+import { scssPreprocessorOptions } from '../vite.config'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
-const scssPreprocessorOptions = {
-  scss: {
-    api: 'modern-compiler',
-    additionalData: `@use "@/styles/Helpers" as *; @use '@/styles/Responsive' as *;\n`,
-  },
-} as const
-
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],