Add critical user journey E2E tests (login, project creation, start agent)

[frankbria]

Overview

Current E2E tests validate that features work, but don't test that users can access them through the UI. Tests bypass authentication and project creation via database seeding, leaving critical user journeys untested.

Problem

Global Setup Bypasses UI (tests/e2e/global-setup.ts):

• Auth: Pre-seeds session token instead of testing login flow
• Projects: Creates via direct database insertion instead of UI
• Agents: Backend tests call agent.execute_task() directly, no UI interaction

Missing User Journeys:

1. ❌ No login flow test (/login page interaction)
2. ❌ No project creation test (root / → create project form)
3. ❌ No "start agent" interaction test (discovery UI → execute button)

Risk: If login or project creation breaks, beta testers can't even access the features we've thoroughly tested.

Required Tests

Test 1: Authentication Flow

File: tests/e2e/test_auth_flow.spec.ts

test('should render login page', async ({ page }) => {
  await page.goto('/login');
  await expect(page.locator('[data-testid="email-input"]')).toBeVisible();
  await expect(page.locator('[data-testid="password-input"]')).toBeVisible();
  await expect(page.locator('[data-testid="login-button"]')).toBeVisible();
});

test('should login successfully with valid credentials', async ({ page }) => {
  await page.goto('/login');
  await page.fill('[data-testid="email-input"]', 'test@example.com');
  await page.fill('[data-testid="password-input"]', 'TestPassword123!');
  await page.click('[data-testid="login-button"]');
  
  // Should redirect to root or dashboard
  await expect(page).toHaveURL(/\/projects|\/$/);
  await expect(page.locator('[data-testid="user-menu"]')).toBeVisible();
});

test('should show error with invalid credentials', async ({ page }) => {
  await page.goto('/login');
  await page.fill('[data-testid="email-input"]', 'test@example.com');
  await page.fill('[data-testid="password-input"]', 'WrongPassword');
  await page.click('[data-testid="login-button"]');
  
  await expect(page.locator('[data-testid="auth-error"]')).toContainText('Invalid credentials');
  await expect(page).toHaveURL('/login'); // Should stay on login page
});

test('should logout successfully', async ({ page }) => {
  // Login first
  await loginUser(page);
  
  // Logout
  await page.click('[data-testid="user-menu"]');
  await page.click('[data-testid="logout-button"]');
  
  await expect(page).toHaveURL('/login');
});

Test 2: Project Creation Flow

File: tests/e2e/test_project_creation.spec.ts

test('should display root page with create project option', async ({ page }) => {
  await loginUser(page);
  await page.goto('/');
  
  await expect(page.locator('[data-testid="create-project-button"]')).toBeVisible();
  await expect(page.locator('[data-testid="project-list"]')).toBeVisible();
});

test('should create new project via UI', async ({ page }) => {
  await loginUser(page);
  await page.goto('/');
  
  // Click create project
  await page.click('[data-testid="create-project-button"]');
  
  // Fill form
  await expect(page.locator('[data-testid="project-name-input"]')).toBeVisible();
  await page.fill('[data-testid="project-name-input"]', 'My E2E Test Project');
  await page.fill('[data-testid="project-description-input"]', 'Created via E2E test');
  
  // Submit
  await page.click('[data-testid="create-project-submit"]');
  
  // Should redirect to new project dashboard
  await expect(page).toHaveURL(/\/projects\/\d+/);
  await expect(page.locator('[data-testid="project-name"]')).toContainText('My E2E Test Project');
  await expect(page.locator('[data-testid="dashboard-header"]')).toBeVisible();
});

test('should validate project name is required', async ({ page }) => {
  await loginUser(page);
  await page.goto('/');
  await page.click('[data-testid="create-project-button"]');
  
  // Try to submit without name
  await page.click('[data-testid="create-project-submit"]');
  
  await expect(page.locator('[data-testid="form-error"]')).toContainText('Project name is required');
});

Test 3: Start Agent Interaction

File: tests/e2e/test_start_agent_flow.spec.ts

test('should start Socratic discovery from dashboard', async ({ page }) => {
  const projectId = await createTestProject(page);
  await page.goto(`/projects/${projectId}`);
  
  // Click start discovery button
  const startButton = page.locator('[data-testid="start-discovery-button"]');
  await expect(startButton).toBeVisible();
  await startButton.click();
  
  // Should show first discovery question
  await expect(page.locator('[data-testid="discovery-question"]')).toBeVisible();
  await expect(page.locator('[data-testid="discovery-answer-input"]')).toBeVisible();
});

test('should answer discovery questions and generate PRD', async ({ page }) => {
  const projectId = await createTestProject(page);
  await page.goto(`/projects/${projectId}`);
  
  // Start discovery
  await page.click('[data-testid="start-discovery-button"]');
  
  // Answer questions (simulate 3 questions)
  for (let i = 0; i < 3; i++) {
    await page.fill('[data-testid="discovery-answer-input"]', `Answer ${i + 1}`);
    await page.click('[data-testid="submit-answer-button"]');
    await page.waitForTimeout(500); // Wait for next question
  }
  
  // Should show PRD generation or completion
  await expect(page.locator('[data-testid="prd-generated"]')).toBeVisible({ timeout: 10000 });
});

test('should execute tasks after discovery completion', async ({ page }) => {
  const projectId = await createTestProjectWithDiscovery(page);
  await page.goto(`/projects/${projectId}`);
  
  // Click execute/start agents button
  const executeButton = page.locator('[data-testid="start-execution-button"]');
  await expect(executeButton).toBeVisible();
  await executeButton.click();
  
  // Should show agents in progress
  await expect(page.locator('[data-testid="agent-status-panel"]')).toBeVisible();
  await expect(page.locator('[data-testid="agent-status"]')).toContainText('in_progress');
});

Test 4: Complete User Journey (Smoke Test)

File: tests/e2e/test_complete_user_journey.spec.ts

test('should complete full workflow from login to agent execution', async ({ page }) => {
  // 1. Login
  await page.goto('/login');
  await page.fill('[data-testid="email-input"]', 'test@example.com');
  await page.fill('[data-testid="password-input"]', 'TestPassword123!');
  await page.click('[data-testid="login-button"]');
  await expect(page).toHaveURL(/\//);
  
  // 2. Create project
  await page.click('[data-testid="create-project-button"]');
  await page.fill('[data-testid="project-name-input"]', 'Journey Test Project');
  await page.click('[data-testid="create-project-submit"]');
  await expect(page).toHaveURL(/\/projects\/\d+/);
  
  // 3. Start discovery
  await page.click('[data-testid="start-discovery-button"]');
  
  // 4. Answer discovery questions
  await page.fill('[data-testid="discovery-answer-input"]', 'Build a REST API');
  await page.click('[data-testid="submit-answer-button"]');
  await page.waitForSelector('[data-testid="discovery-question"]');
  await page.fill('[data-testid="discovery-answer-input"]', 'Python with FastAPI');
  await page.click('[data-testid="submit-answer-button"]');
  
  // 5. Wait for PRD generation (or skip remaining questions if implemented)
  await expect(page.locator('[data-testid="prd-generated"]')).toBeVisible({ timeout: 15000 });
  
  // 6. Start execution
  await page.click('[data-testid="start-execution-button"]');
  
  // 7. Verify agents are running
  await expect(page.locator('[data-testid="agent-status"]')).toContainText('in_progress', { timeout: 10000 });
  
  // 8. Verify dashboard features are accessible
  await expect(page.locator('[data-testid="metrics-panel"]')).toBeVisible();
  await expect(page.locator('[data-testid="review-findings-panel"]')).toBeVisible();
});

Test Utilities

Create helper functions in tests/e2e/test-utils.ts:

export async function loginUser(page: Page, email = 'test@example.com', password = 'TestPassword123!') {
  await page.goto('/login');
  await page.fill('[data-testid="email-input"]', email);
  await page.fill('[data-testid="password-input"]', password);
  await page.click('[data-testid="login-button"]');
  await page.waitForURL(/\//, { timeout: 10000 });
}

export async function createTestProject(page: Page, name = 'Test Project'): Promise<string> {
  await page.goto('/');
  await page.click('[data-testid="create-project-button"]');
  await page.fill('[data-testid="project-name-input"]', name);
  await page.click('[data-testid="create-project-submit"]');
  
  // Extract project ID from URL
  await page.waitForURL(/\/projects\/\d+/);
  const url = page.url();
  const match = url.match(/\/projects\/(\d+)/);
  return match ? match[1] : '1';
}

export async function answerDiscoveryQuestion(page: Page, answer: string) {
  await page.fill('[data-testid="discovery-answer-input"]', answer);
  await page.click('[data-testid="submit-answer-button"]');
  await page.waitForTimeout(500);
}

Acceptance Criteria

• test_auth_flow.spec.ts created with 4 tests (login success/failure, logout, render)
• test_project_creation.spec.ts created with 3 tests (create, validation, list)
• test_start_agent_flow.spec.ts created with 3 tests (discovery start, answer, execute)
• test_complete_user_journey.spec.ts created with 1 comprehensive smoke test
• Helper utilities added to test-utils.ts
• All tests pass on Chromium, Firefox, and WebKit
• Tests run in CI without flakiness
• Test coverage for /login, / (root), and project dashboard interaction flows

Implementation Notes

Required UI Test IDs

Ensure the following data-testid attributes exist in the frontend:

Login Page (/login):

• email-input
• password-input
• login-button
• auth-error (error message container)

Root Page (/):

• create-project-button
• project-list
• project-name-input
• project-description-input
• create-project-submit
• form-error

Project Dashboard:

• start-discovery-button
• discovery-question
• discovery-answer-input
• submit-answer-button
• prd-generated
• start-execution-button

User Menu:

• user-menu
• logout-button

Test Data Management

• Create dedicated test user in global setup: test@example.com / TestPassword123!
• Clean up test projects after each test to avoid database bloat
• Use unique project names with timestamps to avoid conflicts

Priority Justification

P1-high-beta because:

1. First User Interaction: Login is the FIRST thing beta testers will try
2. Blocking if Broken: If login/project creation fails, users can't access ANY features
3. High Risk: Currently untested - we don't know if these flows work end-to-end
4. Quick Wins: These tests are straightforward to implement (~4-6 hours total)

Related Issues

• Update E2E test expectations to match current Dashboard design #88: Update E2E test expectations (Dashboard design changes)
• [P1] Add npm audit review during deployment script #97: Add npm audit review (security validation)

Estimated Effort

4-6 hours total:

• 1-2 hours: Add test IDs to frontend components
• 2-3 hours: Write 11 test cases
• 1 hour: Create helper utilities and test data fixtures

[traycerai]

Plan

Observations

The codebase has a well-structured E2E testing setup using Playwright, but currently bypasses critical user journeys. The file:tests/e2e/global-setup.ts seeds test data directly into the database and sets session cookies, skipping login and project creation UI flows. Frontend components exist for all required flows (file:web-ui/src/components/auth/LoginForm.tsx, file:web-ui/src/components/ProjectCreationForm.tsx, file:web-ui/src/components/DiscoveryProgress.tsx) but lack the necessary data-testid attributes for E2E testing. Test user credentials are already seeded (test@example.com / testpassword123).

Approach

The implementation follows a two-phase approach: Phase 1 adds missing data-testid attributes to frontend components to enable test selectors, and Phase 2 creates four new E2E test files with helper utilities. This approach ensures tests interact with the actual UI flows that beta testers will experience, rather than bypassing them through database seeding. The tests will use the existing test user credentials and validate the complete user journey from login through agent execution.

Implementation Steps

Phase 1: Add Data-testid Attributes to Frontend Components

1.1 Login Page Components

File: file:web-ui/src/components/auth/LoginForm.tsx

Add the following data-testid attributes:

• Line 69: Add data-testid="email-input" to the email input element
• Line 86: Add data-testid="password-input" to the password input element
• Line 102: Add data-testid="login-button" to the submit button
• Line 59: Add data-testid="auth-error" to the error message div

1.2 Root Page and Project Creation

File: file:web-ui/src/app/page.tsx

The root page currently shows only the ProjectCreationForm. For the project list view, you'll need to modify the page to conditionally show either the creation form OR a project list component.

Add data-testid="project-list" wrapper around the main content area.

File: file:web-ui/src/components/ProjectCreationForm.tsx

Add the following data-testid attributes:

• Line 162: Add data-testid="project-name-input" to the name input (id="project-name")
• Line 188: Add data-testid="project-description-input" to the description textarea (id="description")
• Line 211: Add data-testid="create-project-submit" to the submit button
• Line 175-177: Add data-testid="form-error" to the name error paragraph
• Line 201-203: Add data-testid="form-error" to the description error paragraph
• Line 226-233: Add data-testid="form-error" to the submit error div

File: file:web-ui/src/components/ProjectList.tsx

Add the following data-testid attributes:

• Line 77: Add data-testid="create-project-button" to the "Create New Project" button
• Line 111: Add data-testid="project-list" to the projects grid div

1.3 Navigation and User Menu

File: file:web-ui/src/components/Navigation.tsx

Add the following data-testid attributes:

• Line 44-46: Wrap the user email span in a div with data-testid="user-menu"
• Line 47: Add data-testid="logout-button" to the logout button

1.4 Dashboard Discovery and Agent Execution

File: file:web-ui/src/components/DiscoveryProgress.tsx

Add the following data-testid attributes:

• Line 185-192: Add data-testid="discovery-question" to the current question div
• Line 198: Add data-testid="discovery-answer-input" to the textarea
• Line 221: Add data-testid="submit-answer-button" to the submit button

For the "start discovery" button, you'll need to add a button in the Dashboard or DiscoveryProgress component that initiates the discovery flow. Currently, discovery appears to start automatically based on project phase.

File: file:web-ui/src/components/Dashboard.tsx

Add the following data-testid attributes:

• Add a "Start Discovery" button near line 346 (in the Overview tab) with data-testid="start-discovery-button" if discovery hasn't started
• Add data-testid="prd-generated" to the PRD section or completion indicator (around line 268 where "View PRD" button exists)
• Add data-testid="start-execution-button" to a button that starts agent execution (may need to be added if it doesn't exist)

Phase 2: Create E2E Test Files

2.1 Test Utilities

File: file:tests/e2e/test-utils.ts

Extend the existing file with the following helper functions:

export async function loginUser(
  page: Page, 
  email = 'test@example.com', 
  password = 'testpassword123'
): Promise<void>

• Navigate to /login
• Fill email and password inputs using data-testid selectors
• Click login button
• Wait for redirect to root page (URL should match / or /projects)

export async function createTestProject(
  page: Page, 
  name = 'Test Project'
): Promise<string>

• Navigate to /
• Click create project button
• Fill project name and description
• Submit form
• Extract and return project ID from URL

export async function answerDiscoveryQuestion(
  page: Page, 
  answer: string
): Promise<void>

• Fill discovery answer input
• Click submit button
• Wait for next question or completion

2.2 Authentication Flow Tests

File: file:tests/e2e/test_auth_flow.spec.ts

Create 4 test cases:

Test 1: "should render login page"

• Navigate to /login
• Assert email-input, password-input, and login-button are visible

Test 2: "should login successfully with valid credentials"

• Navigate to /login
• Fill email: test@example.com, password: testpassword123
• Click login button
• Assert redirect to / or /projects
• Assert user-menu is visible

Test 3: "should show error with invalid credentials"

• Navigate to /login
• Fill email: test@example.com, password: WrongPassword
• Click login button
• Assert auth-error contains "Invalid credentials" or similar
• Assert still on /login page

Test 4: "should logout successfully"

• Call loginUser() helper
• Click user-menu
• Click logout-button
• Assert redirect to /login

2.3 Project Creation Flow Tests

File: file:tests/e2e/test_project_creation.spec.ts

Create 3 test cases:

Test 1: "should display root page with create project option"

• Call loginUser() helper
• Navigate to /
• Assert create-project-button is visible
• Assert project-list is visible

Test 2: "should create new project via UI"

• Call loginUser() helper
• Navigate to /
• Click create-project-button
• Fill project-name-input: my-e2e-test-project
• Fill project-description-input: Created via E2E test
• Click create-project-submit
• Assert redirect to /projects/\d+
• Assert dashboard-header is visible

Test 3: "should validate project name is required"

• Call loginUser() helper
• Navigate to /
• Click create-project-button
• Click create-project-submit without filling fields
• Assert form-error contains "Project name is required"

2.4 Start Agent Flow Tests

File: file:tests/e2e/test_start_agent_flow.spec.ts

Create 3 test cases:

Test 1: "should start Socratic discovery from dashboard"

• Call createTestProject() helper
• Navigate to project dashboard
• Click start-discovery-button
• Assert discovery-question is visible
• Assert discovery-answer-input is visible

Test 2: "should answer discovery questions and generate PRD"

• Call createTestProject() helper
• Navigate to project dashboard
• Click start-discovery-button
• Loop 3 times: answer questions using answerDiscoveryQuestion() helper
• Assert prd-generated is visible (timeout: 10000ms)

Test 3: "should execute tasks after discovery completion"

• Create project with completed discovery (may need helper)
• Navigate to project dashboard
• Click start-execution-button
• Assert agent-status-panel is visible
• Assert agent status contains "in_progress" or "working"

2.5 Complete User Journey Test

File: file:tests/e2e/test_complete_user_journey.spec.ts

Create 1 comprehensive test case:

Test: "should complete full workflow from login to agent execution"

This test combines all flows:

1. Login with test@example.com / testpassword123
2. Create project "Journey Test Project"
3. Start discovery
4. Answer 2-3 discovery questions
5. Wait for PRD generation
6. Start execution
7. Verify agents are running
8. Verify dashboard panels are accessible (metrics-panel, review-findings-panel)

Phase 3: Test Configuration Updates

File: file:tests/e2e/playwright.config.ts

No changes needed - existing configuration supports the new tests.

File: file:tests/e2e/global-setup.ts

Keep existing setup for backward compatibility with other tests. The new tests will NOT use the pre-seeded session cookie, instead logging in through the UI.

Test Execution Strategy

sequenceDiagram
    participant Test as E2E Test
    participant Login as Login Page
    participant Root as Root Page
    participant Dashboard as Dashboard
    participant Backend as Backend API

    Test->>Login: Navigate to /login
    Test->>Login: Fill credentials
    Test->>Login: Click login button
    Login->>Backend: POST /api/auth/login
    Backend-->>Login: Session cookie
    Login->>Root: Redirect to /
    
    Test->>Root: Click create project
    Test->>Root: Fill form & submit
    Root->>Backend: POST /api/projects
    Backend-->>Root: Project created
    Root->>Dashboard: Redirect to /projects/{id}
    
    Test->>Dashboard: Click start discovery
    Dashboard->>Backend: POST /api/discovery/start
    Test->>Dashboard: Answer questions
    Dashboard->>Backend: POST /api/discovery/answer
    Backend-->>Dashboard: Next question
    
    Test->>Dashboard: Click start execution
    Dashboard->>Backend: POST /api/agents/start
    Backend-->>Dashboard: Agents started
    Test->>Dashboard: Verify agent status

Loading

Acceptance Criteria Validation

Criterion	Implementation
test_auth_flow.spec.ts with 4 tests	Step 2.2
test_project_creation.spec.ts with 3 tests	Step 2.3
test_start_agent_flow.spec.ts with 3 tests	Step 2.4
test_complete_user_journey.spec.ts with 1 test	Step 2.5
Helper utilities in test-utils.ts	Step 2.1
Tests pass on Chromium, Firefox, WebKit	Playwright config already supports
Tests run in CI without flakiness	Use existing retry/timeout config
Coverage for /login, /, dashboard flows	All steps combined

Notes

• Test Data Cleanup: Each test should use unique project names with timestamps to avoid conflicts
• Timeouts: Use generous timeouts (10-15s) for discovery/PRD generation as these involve AI processing
• Flakiness Prevention: Use waitForSelector with proper states (visible, attached) and avoid hard-coded waitForTimeout where possible
• Existing Tests: The new tests complement existing dashboard tests in file:tests/e2e/test_dashboard.spec.ts which focus on feature validation rather than user journeys

Import In IDE

🤖 Prompt for AI Agents

## Observations

The codebase has a well-structured E2E testing setup using Playwright, but currently bypasses critical user journeys. The `file:tests/e2e/global-setup.ts` seeds test data directly into the database and sets session cookies, skipping login and project creation UI flows. Frontend components exist for all required flows (`file:web-ui/src/components/auth/LoginForm.tsx`, `file:web-ui/src/components/ProjectCreationForm.tsx`, `file:web-ui/src/components/DiscoveryProgress.tsx`) but lack the necessary `data-testid` attributes for E2E testing. Test user credentials are already seeded (`test@example.com` / `testpassword123`).

## Approach

The implementation follows a two-phase approach: **Phase 1** adds missing `data-testid` attributes to frontend components to enable test selectors, and **Phase 2** creates four new E2E test files with helper utilities. This approach ensures tests interact with the actual UI flows that beta testers will experience, rather than bypassing them through database seeding. The tests will use the existing test user credentials and validate the complete user journey from login through agent execution.

## Implementation Steps

### Phase 1: Add Data-testid Attributes to Frontend Components

#### 1.1 Login Page Components

**File: `file:web-ui/src/components/auth/LoginForm.tsx`**

Add the following `data-testid` attributes:
- Line 69: Add `data-testid="email-input"` to the email input element
- Line 86: Add `data-testid="password-input"` to the password input element
- Line 102: Add `data-testid="login-button"` to the submit button
- Line 59: Add `data-testid="auth-error"` to the error message div

#### 1.2 Root Page and Project Creation

**File: `file:web-ui/src/app/page.tsx`**

The root page currently shows only the `ProjectCreationForm`. For the project list view, you'll need to modify the page to conditionally show either the creation form OR a project list component.

Add `data-testid="project-list"` wrapper around the main content area.

**File: `file:web-ui/src/components/ProjectCreationForm.tsx`**

Add the following `data-testid` attributes:
- Line 162: Add `data-testid="project-name-input"` to the name input (id="project-name")
- Line 188: Add `data-testid="project-description-input"` to the description textarea (id="description")
- Line 211: Add `data-testid="create-project-submit"` to the submit button
- Line 175-177: Add `data-testid="form-error"` to the name error paragraph
- Line 201-203: Add `data-testid="form-error"` to the description error paragraph
- Line 226-233: Add `data-testid="form-error"` to the submit error div

**File: `file:web-ui/src/components/ProjectList.tsx`**

Add the following `data-testid` attributes:
- Line 77: Add `data-testid="create-project-button"` to the "Create New Project" button
- Line 111: Add `data-testid="project-list"` to the projects grid div

#### 1.3 Navigation and User Menu

**File: `file:web-ui/src/components/Navigation.tsx`**

Add the following `data-testid` attributes:
- Line 44-46: Wrap the user email span in a div with `data-testid="user-menu"`
- Line 47: Add `data-testid="logout-button"` to the logout button

#### 1.4 Dashboard Discovery and Agent Execution

**File: `file:web-ui/src/components/DiscoveryProgress.tsx`**

Add the following `data-testid` attributes:
- Line 185-192: Add `data-testid="discovery-question"` to the current question div
- Line 198: Add `data-testid="discovery-answer-input"` to the textarea
- Line 221: Add `data-testid="submit-answer-button"` to the submit button

For the "start discovery" button, you'll need to add a button in the Dashboard or DiscoveryProgress component that initiates the discovery flow. Currently, discovery appears to start automatically based on project phase.

**File: `file:web-ui/src/components/Dashboard.tsx`**

Add the following `data-testid` attributes:
- Add a "Start Discovery" button near line 346 (in the Overview tab) with `data-testid="start-discovery-button"` if discovery hasn't started
- Add `data-testid="prd-generated"` to the PRD section or completion indicator (around line 268 where "View PRD" button exists)
- Add `data-testid="start-execution-button"` to a button that starts agent execution (may need to be added if it doesn't exist)

### Phase 2: Create E2E Test Files

#### 2.1 Test Utilities

**File: `file:tests/e2e/test-utils.ts`**

Extend the existing file with the following helper functions:

```typescript
export async function loginUser(
  page: Page, 
  email = 'test@example.com', 
  password = 'testpassword123'
): Promise<void>
```
- Navigate to `/login`
- Fill email and password inputs using data-testid selectors
- Click login button
- Wait for redirect to root page (URL should match `/` or `/projects`)

```typescript
export async function createTestProject(
  page: Page, 
  name = 'Test Project'
): Promise<string>
```
- Navigate to `/`
- Click create project button
- Fill project name and description
- Submit form
- Extract and return project ID from URL

```typescript
export async function answerDiscoveryQuestion(
  page: Page, 
  answer: string
): Promise<void>
```
- Fill discovery answer input
- Click submit button
- Wait for next question or completion

#### 2.2 Authentication Flow Tests

**File: `file:tests/e2e/test_auth_flow.spec.ts`**

Create 4 test cases:

**Test 1: "should render login page"**
- Navigate to `/login`
- Assert email-input, password-input, and login-button are visible

**Test 2: "should login successfully with valid credentials"**
- Navigate to `/login`
- Fill email: `test@example.com`, password: `testpassword123`
- Click login button
- Assert redirect to `/` or `/projects`
- Assert user-menu is visible

**Test 3: "should show error with invalid credentials"**
- Navigate to `/login`
- Fill email: `test@example.com`, password: `WrongPassword`
- Click login button
- Assert auth-error contains "Invalid credentials" or similar
- Assert still on `/login` page

**Test 4: "should logout successfully"**
- Call `loginUser()` helper
- Click user-menu
- Click logout-button
- Assert redirect to `/login`

#### 2.3 Project Creation Flow Tests

**File: `file:tests/e2e/test_project_creation.spec.ts`**

Create 3 test cases:

**Test 1: "should display root page with create project option"**
- Call `loginUser()` helper
- Navigate to `/`
- Assert create-project-button is visible
- Assert project-list is visible

**Test 2: "should create new project via UI"**
- Call `loginUser()` helper
- Navigate to `/`
- Click create-project-button
- Fill project-name-input: `my-e2e-test-project`
- Fill project-description-input: `Created via E2E test`
- Click create-project-submit
- Assert redirect to `/projects/\d+`
- Assert dashboard-header is visible

**Test 3: "should validate project name is required"**
- Call `loginUser()` helper
- Navigate to `/`
- Click create-project-button
- Click create-project-submit without filling fields
- Assert form-error contains "Project name is required"

#### 2.4 Start Agent Flow Tests

**File: `file:tests/e2e/test_start_agent_flow.spec.ts`**

Create 3 test cases:

**Test 1: "should start Socratic discovery from dashboard"**
- Call `createTestProject()` helper
- Navigate to project dashboard
- Click start-discovery-button
- Assert discovery-question is visible
- Assert discovery-answer-input is visible

**Test 2: "should answer discovery questions and generate PRD"**
- Call `createTestProject()` helper
- Navigate to project dashboard
- Click start-discovery-button
- Loop 3 times: answer questions using `answerDiscoveryQuestion()` helper
- Assert prd-generated is visible (timeout: 10000ms)

**Test 3: "should execute tasks after discovery completion"**
- Create project with completed discovery (may need helper)
- Navigate to project dashboard
- Click start-execution-button
- Assert agent-status-panel is visible
- Assert agent status contains "in_progress" or "working"

#### 2.5 Complete User Journey Test

**File: `file:tests/e2e/test_complete_user_journey.spec.ts`**

Create 1 comprehensive test case:

**Test: "should complete full workflow from login to agent execution"**

This test combines all flows:
1. Login with `test@example.com` / `testpassword123`
2. Create project "Journey Test Project"
3. Start discovery
4. Answer 2-3 discovery questions
5. Wait for PRD generation
6. Start execution
7. Verify agents are running
8. Verify dashboard panels are accessible (metrics-panel, review-findings-panel)

### Phase 3: Test Configuration Updates

**File: `file:tests/e2e/playwright.config.ts`**

No changes needed - existing configuration supports the new tests.

**File: `file:tests/e2e/global-setup.ts`**

Keep existing setup for backward compatibility with other tests. The new tests will NOT use the pre-seeded session cookie, instead logging in through the UI.

### Test Execution Strategy

```mermaid
sequenceDiagram
    participant Test as E2E Test
    participant Login as Login Page
    participant Root as Root Page
    participant Dashboard as Dashboard
    participant Backend as Backend API

    Test->>Login: Navigate to /login
    Test->>Login: Fill credentials
    Test->>Login: Click login button
    Login->>Backend: POST /api/auth/login
    Backend-->>Login: Session cookie
    Login->>Root: Redirect to /
    
    Test->>Root: Click create project
    Test->>Root: Fill form & submit
    Root->>Backend: POST /api/projects
    Backend-->>Root: Project created
    Root->>Dashboard: Redirect to /projects/{id}
    
    Test->>Dashboard: Click start discovery
    Dashboard->>Backend: POST /api/discovery/start
    Test->>Dashboard: Answer questions
    Dashboard->>Backend: POST /api/discovery/answer
    Backend-->>Dashboard: Next question
    
    Test->>Dashboard: Click start execution
    Dashboard->>Backend: POST /api/agents/start
    Backend-->>Dashboard: Agents started
    Test->>Dashboard: Verify agent status
```

### Acceptance Criteria Validation

| Criterion | Implementation |
|-----------|----------------|
| `test_auth_flow.spec.ts` with 4 tests | Step 2.2 |
| `test_project_creation.spec.ts` with 3 tests | Step 2.3 |
| `test_start_agent_flow.spec.ts` with 3 tests | Step 2.4 |
| `test_complete_user_journey.spec.ts` with 1 test | Step 2.5 |
| Helper utilities in `test-utils.ts` | Step 2.1 |
| Tests pass on Chromium, Firefox, WebKit | Playwright config already supports |
| Tests run in CI without flakiness | Use existing retry/timeout config |
| Coverage for `/login`, `/`, dashboard flows | All steps combined |

### Notes

- **Test Data Cleanup**: Each test should use unique project names with timestamps to avoid conflicts
- **Timeouts**: Use generous timeouts (10-15s) for discovery/PRD generation as these involve AI processing
- **Flakiness Prevention**: Use `waitForSelector` with proper states (`visible`, `attached`) and avoid hard-coded `waitForTimeout` where possible
- **Existing Tests**: The new tests complement existing dashboard tests in `file:tests/e2e/test_dashboard.spec.ts` which focus on feature validation rather than user journeys

---

Execution Information

Branch: main
Commit: 52e78e0

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Related Issues

• Add unit tests for Quality Gates Panel components #56
• Update E2E test expectations to match current Dashboard design #88
• [P1] Implement missing CostDashboard UI elements (date filter, task breakdown, trend chart) #86
• Fix checkpoint panel visibility - CheckpointList not rendering items #85
• Add data-testid attributes to Dashboard tabs for E2E testing #84

🔗 Related PRs

#24 - feat: Implement project creation flow (011-project-creation-flow) [merged]
#25 - feat: Discovery Answer UI Integration (Feature 012) [merged]
#38 - fix(e2e): Improve Playwright test pass rate from 18% to 57% [merged]
#81 - Fix E2E Frontend test failures - Auto-start backend server [merged]
#155 - Reduce mocking in unit tests for better coverage [merged]

👤 Suggested Assignees

• frankbria

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!