From e9afb7e0d695d950f8989345ec79b6a6531a14db Mon Sep 17 00:00:00 2001 From: Pranjal Jately Date: Sun, 12 Oct 2025 19:14:25 +0100 Subject: [PATCH 1/2] fix: ensure E2E tests use Playwright mocks instead of MSW Fixes failing E2E tests when running the server using pnpm demo:mock. This was because Playwright mocks were not overriding the values from MSW which resulted in failing tests. --- e2e/config/environment.ts | 22 +++------------------- e2e/mocks/mockFeatureFlags.ts | 6 +++--- packages/demo/src/config/demo.ts | 13 +++++++++++-- 3 files changed, 17 insertions(+), 24 deletions(-) diff --git a/e2e/config/environment.ts b/e2e/config/environment.ts index c1124620..3a08c9c8 100644 --- a/e2e/config/environment.ts +++ b/e2e/config/environment.ts @@ -1,32 +1,16 @@ type Environment = 'ci' | 'local'; type EnvironmentConfig = { - [key in Environment]: { - ldBaseUrl?: string; - ldStreamUrl?: string; - }; + [key in Environment]: {}; }; -// Default values if environment variables are not set -const DEFAULT_LD_BASE_URL = 'https://app.launchdarkly.com'; -const DEFAULT_LD_STREAM_URL = 'https://clientstream.launchdarkly.com'; - const envConfig: EnvironmentConfig = { - ci: { - ldBaseUrl: process.env.VITE_LD_BASE_URL ?? DEFAULT_LD_BASE_URL, - ldStreamUrl: process.env.VITE_LD_STREAM_URL ?? DEFAULT_LD_STREAM_URL, - }, - local: { - ldBaseUrl: process.env.VITE_LD_BASE_URL ?? DEFAULT_LD_BASE_URL, - ldStreamUrl: process.env.VITE_LD_STREAM_URL ?? DEFAULT_LD_STREAM_URL, - }, + ci: {}, + local: {}, }; const TEST_ENV = (process.env.TEST_ENV as keyof typeof envConfig) || 'ci'; export const config = { - testEnv: TEST_ENV, - ldBaseUrl: envConfig[TEST_ENV].ldBaseUrl, - ldStreamUrl: envConfig[TEST_ENV].ldStreamUrl, ...envConfig[TEST_ENV], }; diff --git a/e2e/mocks/mockFeatureFlags.ts b/e2e/mocks/mockFeatureFlags.ts index 9ad14e83..ebce3218 100644 --- a/e2e/mocks/mockFeatureFlags.ts +++ b/e2e/mocks/mockFeatureFlags.ts @@ -1,8 +1,8 @@ import type { Page } from '@playwright/test'; -import { config } from '../config/environment'; -const LD_BASE_URL = `${config.ldBaseUrl}/sdk/evalx/**`; -const LD_EVENT_STREAM_URL = `${config.ldStreamUrl}/eval/**`; +// Match LaunchDarkly SDK endpoints regardless of base URL +const LD_BASE_URL = '**/sdk/evalx/**'; +const LD_EVENT_STREAM_URL = '**/eval/**'; // Static fixture flags export const FIXTURE_FLAGS = { diff --git a/packages/demo/src/config/demo.ts b/packages/demo/src/config/demo.ts index 122eb082..c3162582 100644 --- a/packages/demo/src/config/demo.ts +++ b/packages/demo/src/config/demo.ts @@ -8,9 +8,18 @@ export interface DemoConfig { enableLogging: boolean; } +// Check if running in an automated test environment i.e. Playwright +const isAutomatedTest = () => { + if (typeof window === 'undefined') return false; + // Check for webdriver (used by Playwright) + if (navigator.webdriver === true) return true; + return false; +}; + export const DEMO_CONFIG: DemoConfig = { - // Use mocks if explicitly enabled via env var - useMocks: import.meta.env.VITE_USE_MOCK_FLAGS === 'true', + // Use mocks if explicitly enabled via env var, but never during automated tests + // Automated tests (like Playwright) provide their own network mocking + useMocks: import.meta.env.VITE_USE_MOCK_FLAGS === 'true' && !isAutomatedTest(), // Enable logging in development enableLogging: import.meta.env.DEV, From 5056bbae976643860a2793b9217b41b42407dfb5 Mon Sep 17 00:00:00 2001 From: Pranjal Jately Date: Wed, 15 Oct 2025 08:06:01 +0100 Subject: [PATCH 2/2] docs: document MSW/Playwright mock interaction in E2E tests --- e2e/README.md | 16 +++++++++++++++- packages/demo/src/config/demo.ts | 12 ++++++------ 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/e2e/README.md b/e2e/README.md index 69a12065..3153a1b3 100644 --- a/e2e/README.md +++ b/e2e/README.md @@ -43,7 +43,21 @@ pnpm test:e2e:ci:ui ## How It Works -### 1. Environment Configuration +### 1. Mock Data Strategy + +E2E tests use **Playwright's network mocking** for controlled, deterministic test data. + +**Automated Test Detection** + +The demo app uses Mock Service Worker (MSW) for manual testing, which conflicts with Playwright mocks (MSW intercepts at a higher priority). The `isAutomatedTest()` function detects Playwright via `navigator.webdriver` and automatically disables MSW during E2E tests. + +See [`isAutomatedTest()`](../packages/demo/src/config/demo.ts) for implementation. + +**Mock files**: + +- E2E tests: [`e2e/mocks/mockFeatureFlags.ts`](./mocks/mockFeatureFlags.ts) + +### 2. Environment Configuration The `config/environment.ts` file determines which demo routes to load based on `TEST_ENV`: diff --git a/packages/demo/src/config/demo.ts b/packages/demo/src/config/demo.ts index c3162582..be98445c 100644 --- a/packages/demo/src/config/demo.ts +++ b/packages/demo/src/config/demo.ts @@ -8,20 +8,20 @@ export interface DemoConfig { enableLogging: boolean; } -// Check if running in an automated test environment i.e. Playwright +/** + * Detects if running in an automated test environment (e.g., Playwright). + * This disables MSW so Playwright's network mocks can work. + * See e2e/README.md for details. + */ const isAutomatedTest = () => { if (typeof window === 'undefined') return false; - // Check for webdriver (used by Playwright) if (navigator.webdriver === true) return true; return false; }; export const DEMO_CONFIG: DemoConfig = { - // Use mocks if explicitly enabled via env var, but never during automated tests - // Automated tests (like Playwright) provide their own network mocking + // Disable MSW during E2E tests to allow Playwright mocks to work useMocks: import.meta.env.VITE_USE_MOCK_FLAGS === 'true' && !isAutomatedTest(), - - // Enable logging in development enableLogging: import.meta.env.DEV, };