launchdarkly · pranjal-jately-ld · Oct 15, 2025 · Oct 12, 2025 · Oct 15, 2025
diff --git 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/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
@@ -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
@@ -8,11 +8,20 @@ export interface DemoConfig {
  enableLogging: boolean;
 }

-export const DEMO_CONFIG: DemoConfig = {
-  // Use mocks if explicitly enabled via env var
-  useMocks: import.meta.env.VITE_USE_MOCK_FLAGS === 'true',
+/**
+ * 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;
+  if (navigator.webdriver === true) return true;
+  return false;
+};

-  // Enable logging in development
+export const DEMO_CONFIG: DemoConfig = {
+  // Disable MSW during E2E tests to allow Playwright mocks to work
+  useMocks: import.meta.env.VITE_USE_MOCK_FLAGS === 'true' && !isAutomatedTest(),
  enableLogging: import.meta.env.DEV,
 };