Add npm run test:ui:headed to view browser during tests

e2e/bin/run-e2e.sh

@@ -102,4 +102,13 @@ yellow "Running Playwright tests..."
 APP_URL="$FRONTEND_URL" \
 E2E_EMAIL="${E2E_EMAIL:-test@tududi.com}" \
 E2E_PASSWORD="${E2E_PASSWORD:-password123}" \
-npm test
+bash -c '
+  if [ "${E2E_MODE:-}" = "ui" ]; then
+    npm run test:ui
+  elif [ "${E2E_MODE:-}" = "headed" ]; then
+    # Respect E2E_SLOWMO and run only Firefox
+    npx playwright test --headed --project=Firefox
+  else
+    npm test
+  fi
+'

e2e/playwright.config.ts

@@ -4,6 +4,7 @@ import dotenv from 'dotenv';
 dotenv.config({ path: process.cwd() + '/.env' });
 
 const baseURL = process.env.APP_URL || 'http://localhost:8080';
+const slowMoMs = Number(process.env.E2E_SLOWMO || '0') || 0;
 
 export default defineConfig({
   testDir: './tests',
@@ -17,6 +18,7 @@ export default defineConfig({
     video: 'retain-on-failure',
     screenshot: 'only-on-failure',
     viewport: { width: 1280, height: 800 },
+    launchOptions: { slowMo: slowMoMs },
   },
   projects: [
     { name: 'Chromium', use: { ...devices['Desktop Chrome'] } },

e2e/tests/login.spec.ts

@@ -23,6 +23,8 @@ test('user can login and reach Today page', async ({ page, baseURL }) => {
   // Expect redirect to Today view
   await expect(page).toHaveURL(/\/today$/);
 
-  // Basic sanity check: page shows some Today UI elements
-  await expect(page.getByText(/Today/i)).toBeVisible();
+  // Basic sanity check: unique control on Today page
+  await expect(
+    page.getByRole('button', { name: /Today Page Settings/i })
+  ).toBeVisible();
 });

package.json

@@ -12,6 +12,7 @@
     "build": "npm run frontend:build",
     "test": "npm run backend:test",
     "test:ui": "bash e2e/bin/run-e2e.sh",
+    "test:ui:headed": "cross-env E2E_MODE=headed E2E_SLOWMO=500 bash e2e/bin/run-e2e.sh",
     "test:watch": "npm run frontend:test:watch",
     "test:coverage": "npm run frontend:test:coverage && npm run backend:test:coverage",
     "frontend:dev": "webpack serve --config webpack.config.js --hot",