feat: Introduce Playwright for e2e testing by jeffredodd · Pull Request #1007 · Gusto/embedded-react-sdk

jeffredodd · 2026-02-02T18:04:57Z

Summary

This PR introduces Playwright for end-to-end testing of SDK flows.

What's included

Infrastructure

Playwright configuration with Chromium browser support
E2E test app (e2e/) with its own Vite config and MSW mocking
CI integration - new e2e job in GitHub Actions that:
- Installs Playwright browsers
- Initializes MSW
- Runs e2e tests
- Uploads test reports as artifacts

Test Coverage

Initial tests for all major flows:

Company Onboarding (4 tests)
Employee Onboarding (1 test)
Employee Self-Onboarding (1 test)
Contractor Onboarding (3 tests)
Contractor Payments (2 tests)
Payroll (4 tests)

Running Locally

# Run all e2e tests
npm run test:e2e

# Run with UI mode for debugging
npm run test:e2e:ui

# Run only the e2e dev server
npm run e2e:serve

Why Playwright?

Fast execution with parallel testing
Built-in browser automation
Excellent debugging with traces/videos on failure
Works well with MSW for API mocking
Good CI integration with artifact uploads

Copilot

Pull request overview

This PR introduces Playwright for end-to-end testing of SDK flows, providing comprehensive test coverage across major features including company onboarding, employee onboarding, contractor management, and payroll processing.

Changes:

Added Playwright infrastructure with CI integration and test harness app
Extended MSW mock handlers to support e2e test scenarios
Created 15 e2e tests covering 6 major flows

Reviewed changes

Copilot reviewed 24 out of 25 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
playwright.config.ts	Configures Playwright with Chromium browser, test directory, and dev server settings
package.json	Adds e2e test scripts and MSW worker directory configuration
eslint.config.mjs	Excludes e2e directory from linting
vite.config.ts	Excludes e2e directory from unit test collection
.gitignore	Ignores Playwright test artifacts and MSW service worker file
.github/workflows/ci.yaml	Adds e2e job to CI pipeline with Playwright browser installation and test execution
e2e/vite.config.ts	Configures Vite build for e2e test app with React and SCSS support
e2e/index.html	Provides HTML entry point for e2e test harness
e2e/main.tsx	Implements flow renderer that loads different SDK flows based on URL parameters
e2e/mocks/browser.ts	Sets up MSW browser worker for API mocking in e2e tests
e2e/tests/*.spec.ts	Implements e2e tests for company onboarding, employee onboarding, contractor flows, and payroll
src/test/mocks/handlers.ts	Exports additional handlers and imports new mock modules for e2e support
src/test/mocks/apis/*.ts	Adds and updates mock API handlers to support e2e test scenarios

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/test/mocks/handlers.ts

e2e/tests/payroll.spec.ts

e2e/tests/employee-self-onboarding.spec.ts

e2e/tests/employee-onboarding.spec.ts

e2e/tests/contractor-payment.spec.ts

- Add Playwright configuration with chromium browser support - Add e2e test application with MSW mocking - Add test specs for major flows: - Company onboarding - Employee onboarding - Employee self-onboarding - Contractor onboarding - Contractor payments - Payroll - Extend MSW handlers for e2e scenarios - Add CI job for running e2e tests with artifact upload

…CasesHandlers

…2e tests

serikjensen

Looking good! couple of comments

Also, question: are we removing the existing tests while we add these ones to playwright? or will that be a fast follow? Just worried about having both side by side

serikjensen · 2026-02-05T17:29:27Z

e2e/vite.config.ts

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import svgr from 'vite-plugin-svgr'
+import { resolve } from 'path'
+
+export default defineConfig({
+  root: resolve(__dirname),
+  publicDir: resolve(__dirname, 'public'),
+  plugins: [
+    react(),
+    svgr({
+      svgrOptions: {
+        exportType: 'default',
+        titleProp: true,
+      },
+      include: ['**/*.svg?react', '**/*.svg'],
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, '../src'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        additionalData: `@use "@/styles/Helpers" as *; @use '@/styles/Responsive' as *;\n`,
+      },
+    },
+  },
+  server: {
+    port: 5173,
+  },
+})


Could we update this to share the existing vite config where possible so it can scale?

serikjensen · 2026-02-05T17:30:00Z

src/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.tsx

+              const getLabel = () => {
+                if (paymentType === 'Payroll') {
+                  return payrollRange
+                    ? t('selectLabelPayroll', { payrollRange })
+                    : t('selectFallback')
+                }
+                return t('selectFallback')
+              }
+
              return {
-                label:
-                  paymentType === 'Payroll'
-                    ? payrollRange
-                      ? t('selectLabelPayroll', { payrollRange })
-                      : t('selectFallback')
-                    : paymentType === 'ContractorPaymentGroup'
-                      ? t('selectLabelContractorPaymentGroup', {
-                          requestedAmount: formatCurrency(Number(requestedAmount)),
-                        })
-                      : t('selectFallback'),
+                label: getLabel(),


Do we know why it is making changes here? Seems like if there's an issue this one should be a sep PR

jeffredodd force-pushed the feature/playwright-e2e-tests branch from 34329e6 to 9c0ff34 Compare February 3, 2026 23:55

jeffredodd marked this pull request as ready for review February 3, 2026 23:55

Copilot AI review requested due to automatic review settings February 3, 2026 23:55

jeffredodd force-pushed the feature/playwright-e2e-tests branch from 9c0ff34 to bd1e33a Compare February 3, 2026 23:56

Copilot AI reviewed Feb 3, 2026

View reviewed changes

jeffredodd added 11 commits February 4, 2026 09:10

fix: update e2e test and remove unreachable payment type check

6c9a6cb

test: temporarily skip flaky payroll blockers e2e test

4998bfd

fix: replace waitForTimeout with proper Playwright wait conditions

e6e5636

refactor: extract fillDate helper, cleanup skipped test, add Recovery…

60fd177

…CasesHandlers

perf: reduce e2e test timeouts (30s→15s, 15s→10s, 10s→5s)

ac1b6f8

refactor: remove redundant waits and explicit timeouts in e2e tests

8ccb06b

refactor: remove remaining redundant waits and explicit timeouts in e…

27cb7fd

…2e tests

ci: add Playwright browser caching for faster e2e tests

994e5e4

ci: use Playwright Docker container to skip system deps installation

91b5674

revert: remove Docker container, keep browser caching only

da31686

jeffredodd force-pushed the feature/playwright-e2e-tests branch from 5cb4d4f to da31686 Compare February 4, 2026 17:10

serikjensen reviewed Feb 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Introduce Playwright for e2e testing#1007

feat: Introduce Playwright for e2e testing#1007
jeffredodd wants to merge 11 commits intomainfrom
feature/playwright-e2e-tests

jeffredodd commented Feb 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

serikjensen left a comment

Uh oh!

serikjensen Feb 5, 2026

Uh oh!

serikjensen Feb 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

jeffredodd commented Feb 2, 2026

Summary

What's included

Infrastructure

Test Coverage

Running Locally

Why Playwright?

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

serikjensen left a comment

Choose a reason for hiding this comment

Uh oh!

serikjensen Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

serikjensen Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants