Scaffold some E2E browser testing

.gitignore

@@ -22,4 +22,6 @@ junit.xml
 eslint.results.json
 .pnpm-store
 /sonda-report.html
-sonda-report/
+/sonda-report
+/playwright-report
+/test-results

config/feature-flags.ts

@@ -55,6 +55,8 @@ export function makeFeatureFlags(env: {
     editInGameLoadoutIdentifiers: false,
     // Whether to sync DIM API data instead of loading everything
     dimApiSync: true,
+    // Enable E2E test mode with mock data
+    e2eMode: process.env.E2E_MOCK_DATA === 'true',
   };
 }
 

config/webpack.ts

@@ -306,7 +306,7 @@ export default (env: Env) => {
         // All files with a '.ts' or '.tsx' extension will be handled by 'babel-loader'.
         {
           test: /\.tsx?$/,
-          exclude: [/testing/, /\.test\.ts$/],
+          exclude: [/\.test\.ts$/],
           use: [
             {
               loader: 'babel-loader',
@@ -488,6 +488,8 @@ export default (env: Env) => {
         { from: './src/safari-pinned-tab.svg' },
         { from: './src/nuke.php' },
         { from: './src/robots.txt' },
+        // Copy manifest cache for E2E tests
+        ...(env.dev ? [{ from: './manifest-cache', to: 'manifest-cache' }] : []),
       ],
     }),
 

e2e/characters.spec.ts

@@ -0,0 +1,44 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Character Management', () => {
+  test('displays multiple characters from mock data', async ({ page }) => {
+    await page.goto('/');
+
+    // Wait for app to load
+    await expect(page.locator('header')).toBeVisible({ timeout: 15000 });
+
+    // Should contain main navigation
+    await expect(page.locator('body')).toContainText('Inventory');
+
+    // Should not show critical error states
+    await expect(page.locator('.developer-settings, .login-required')).not.toBeVisible();
+  });
+
+  test('character switching functionality', async ({ page }) => {
+    await page.goto('/');
+
+    // Wait for characters to load
+    await expect(page.locator('header')).toBeVisible({ timeout: 15000 });
+
+    // Should contain main navigation
+    await expect(page.locator('body')).toContainText('Inventory');
+
+    // Should not show critical error states
+    await expect(page.locator('.developer-settings, .login-required')).not.toBeVisible();
+
+    // Note: Character switching would require finding actual clickable elements
+  });
+
+  test('character emblem and basic info display', async ({ page }) => {
+    await page.goto('/');
+
+    // Wait for character data to load
+    await expect(page.locator('header')).toBeVisible({ timeout: 15000 });
+
+    // Should contain main navigation
+    await expect(page.locator('body')).toContainText('Inventory');
+
+    // Should not show critical error states
+    await expect(page.locator('.developer-settings, .login-required')).not.toBeVisible();
+  });
+});

e2e/example.spec.ts

@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Basic App Loading', () => {
+  test('loads DIM application successfully', async ({ page }) => {
+    await page.goto('/');
+
+    // App should have correct title (includes page name)
+    await expect(page).toHaveTitle(/^DIM/);
+
+    // App should load successfully with header visible
+    await expect(page.locator('header')).toBeVisible({ timeout: 15000 });
+
+    // Should contain main navigation text indicating app loaded
+    await expect(page.locator('body')).toContainText('Inventory');
+
+    // Should not show critical error states (but loading states are OK)
+    await expect(page.locator('.developer-settings, .login-required')).not.toBeVisible();
+  });
+
+  test('main navigation is present', async ({ page }) => {
+    await page.goto('/');
+
+    // Wait for app to load
+    await expect(page.locator('header')).toBeVisible({ timeout: 15000 });
+
+    // Should contain the main navigation text (Inventory, Progress, etc.)
+    await expect(page.locator('body')).toContainText('Inventory');
+    await expect(page.locator('body')).toContainText('Progress');
+    await expect(page.locator('body')).toContainText('Vendors');
+  });
+});