[P3] E2E Tests: Fix mobile browser and Firefox compatibility issues

[frankbria]

Summary

The E2E test suite has significant failures in mobile browsers and Firefox. While Chromium tests pass reliably (only 2 edge-case failures), cross-browser compatibility needs improvement.

Current Test Results

Browser	Passed	Failed	Notes
Chromium	~97	2	Core functionality works
Firefox	~67	32	CSS/timing differences
WebKit	~20	79	Safari-specific issues
Mobile Chrome	~0	99	Viewport/touch handling
Mobile Safari	~0	99	Viewport/touch handling

Smoke tests: 8/8 passed (100%)

Root Causes to Investigate

Mobile Browsers (198 failures)

• Viewport size handling
• Touch event compatibility
• Responsive design breakpoints
• Mobile-specific selectors

Firefox (32 failures)

• CSS rendering differences
• Form validation timing
• Session persistence behavior
• Network request handling (NS_BINDING_ABORTED errors)

WebKit (79 failures)

• Safari-specific CSS issues
• Timing/animation differences
• Form handling differences

Acceptance Criteria

• Mobile Chrome failures reduced to <10
• Mobile Safari failures reduced to <10
• Firefox failures reduced to <5
• WebKit failures reduced to <20
• All smoke tests continue to pass

Technical Notes

• WAL mode has been enabled for SQLite to prevent database locking
• Single worker configuration prevents concurrent database access
• Test selectors should use data-testid attributes for cross-browser reliability

Related

• PR fix: prevent duplicate task generation button for late-joining users #228: State reconciliation E2E tests

[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

---

🔗 Related PRs

#93 - fix(e2e): Fix dashboard and metrics tests for tab-based UI rendering [merged]
#188 - feat(e2e): Add comprehensive error monitoring and strict verification [merged]
#191 - feat(e2e): Enable conditional tests and fix discovery startup [merged]
#229 - feat(e2e): add state reconciliation tests for late-joining users [merged]
#262 - fix(e2e): add race condition guards to checkpoint UI tests [merged]

---

🧪 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!

[traycerai]

Plan

Observations

The E2E test suite has made significant progress since the original ticket was created. Current results show: Chromium 1 failure (improved from 2), Firefox 5 failures (improved from 32, -84%), WebKit 5 failures (improved from 79, -94%), Mobile Safari 6 failures (target met), but Mobile Chrome still has 17 failures (target <10). The remaining root causes are well-identified: mobile click interception due to z-index issues in the Dashboard header (15+ failures), mobile viewport detection logic errors (2 failures), seed data phase mismatch where projects are in active instead of planning phase (10+ failures), and flaky WebKit timing issues (13 tests). The test infrastructure is solid with error monitoring, WebSocket testing, and data-testid selectors already in place.

Approach

The plan focuses on targeted fixes for the remaining 17 Mobile Chrome failures and 5 Firefox/WebKit failures. Rather than broad refactoring, we'll address the specific root causes: fix the Dashboard header z-index stacking to prevent click interception on mobile, correct the mobile viewport detection logic in the Playwright configuration, update the seed data script to ensure projects are created in the correct planning phase, and increase WebKit-specific timeouts for timing-sensitive operations. We'll also address the backend type error (#251) and task visibility issues (#254, #255) that contribute to test failures.

Implementation Steps

1. Fix Mobile Click Interception - Dashboard Header Z-Index

Files: web-ui/src/components/Dashboard.tsx (or relevant header component), web-ui/src/styles/dashboard.css

Address the z-index stacking issue causing mobile click interception:

• Audit the Dashboard header component's z-index value and ensure it doesn't overlap clickable elements below
• Verify that navigation tabs/buttons have higher z-index than the header when needed
• Add pointer-events: none to non-interactive header elements on mobile viewports
• Test that clicking tabs on mobile (375px width) doesn't get intercepted by header
• Add CSS media query for mobile: @media (max-width: 640px) to adjust z-index stacking
• Verify the fix with manual mobile viewport testing before running E2E tests

2. Fix Mobile Viewport Detection Logic

File: tests/e2e/playwright.config.ts

Correct the mobile detection logic that's causing 2 test failures:

• Review the current mobile project configuration (Pixel 5, iPhone 12)
• Add explicit isMobile: true flag to mobile projects if not already present
• Verify hasTouch: true is set for mobile projects
• Add browser context option reducedMotion: 'reduce' for mobile to avoid animation timing issues
• Create a helper function isMobileBrowser(context) that checks both browserName and project name
• Update test files to use this helper for mobile-specific logic
• Add logging to verify which browser/project is being used: console.log(Running on ${browserName} - ${projectName})

3. Update Seed Data Script - Fix Project Phase Mismatch

File: tests/e2e/seed-test-data.py

Fix the seed data script to ensure projects are created in the correct planning phase:

• Review the current seed data script and identify where projects are being created
• Verify that TEST_PROJECT_IDS.PLANNING (project 2) is created with phase='planning', not phase='active'
• Verify that TEST_PROJECT_IDS.ACTIVE (project 3) is created with phase='active'
• Verify that TEST_PROJECT_IDS.TASK_BREAKDOWN (project 6) is created with phase='planning' and has PRD but no tasks
• Verify that TEST_PROJECT_IDS.ASSIGN_TASKS (project 7) is created with phase='active' and has pending unassigned tasks
• Add validation logic to the seed script that logs the phase of each created project
• Run the seed script and verify output shows correct phases before running tests

4. Increase WebKit-Specific Timeouts

File: tests/e2e/playwright.config.ts

Add browser-specific timeout configurations for WebKit:

• Add timeout override for WebKit project: increase from 30000ms to 45000ms
• Add expect.timeout override for WebKit: increase from 5000ms to 8000ms
• Add actionTimeout override for WebKit: increase from 10000ms to 15000ms
• Add navigationTimeout override for WebKit: set to 45000ms
• Document why WebKit needs longer timeouts: Safari's slower CSS rendering and animation handling
• Test that these timeouts don't cause tests to hang (use reasonable upper bounds)

5. Add Mobile-Specific Test Utilities

File: tests/e2e/test-utils.ts

Add utilities to handle mobile-specific interactions:

• Create isMobileBrowser(context) function that checks browserName and project name
• Add waitForMobileReady(page) function that waits for viewport stabilization
• Implement mobileClick(page, selector) that uses page.tap() for mobile, page.click() for desktop
• Add scrollIntoViewMobile(page, selector) with mobile-specific scroll behavior
• Create getMobileViewport() helper returning appropriate dimensions for current device
• Add waitForResponsiveLayout(page) that waits for CSS media query transitions to complete
• Export these utilities for use in test files

6. Update Test Files to Use Mobile-Aware Patterns

Files: tests/e2e/test_dashboard.spec.ts, tests/e2e/test_auth_flow.spec.ts, tests/e2e/test_project_creation.spec.ts, and other test files

Update tests to use mobile-aware interaction patterns:

• Replace direct page.click() with conditional logic: isMobileBrowser() ? mobileClick() : page.click()
• Add scrollIntoViewIfNeeded() before all mobile interactions
• Add waitForMobileReady() in beforeEach hook for mobile projects
• Add viewport size assertions for mobile tests
• Skip desktop-only features (e.g., hover states) on mobile
• Add mobile-specific selectors for hamburger menus and collapsed navigation
• Test that tab clicks work on mobile without header interception

7. Fix Firefox NS_BINDING_ABORTED Error Filtering

File: tests/e2e/test-utils.ts

Update error filtering to handle Firefox-specific network behavior:

• Add 'NS_BINDING_ABORTED' to the default Firefox error filter patterns
• Create isFirefoxNavigationError(error) helper that identifies benign Firefox navigation errors
• Update filterExpectedErrors() to automatically include Firefox patterns when isFirefox() returns true
• Document that Firefox aggressively cancels requests during navigation (normal behavior)
• Test that Firefox tests pass with this filter in place

8. Address Backend Type Error - FrontendWorkerAgent

File: Backend code (location TBD - related to issue #251)

Fix the FrontendWorkerAgent type error where it receives dict instead of Task object:

• Locate the FrontendWorkerAgent initialization code
• Verify that Task objects are being passed, not dictionaries
• Add type checking/validation to catch this error earlier
• Update any test setup code that might be passing incorrect types
• Verify the fix resolves test failures related to task operations

9. Fix Task Approval Button Visibility

File: Related to issue #254 - Task approval button not visible in planning phase projects

Investigate and fix the task approval button visibility issue:

• Verify that projects in planning phase should show task approval buttons
• Check the UI component that renders the approval button
• Verify the button's visibility conditions (phase, task status, permissions)
• Update seed data if needed to ensure test projects have the correct phase
• Test that the approval button is visible in planning phase projects

10. Fix Discovery Stuck State on New Project Creation

File: Related to issue #255 - Discovery enters stuck state on new project creation

Investigate and fix the discovery stuck state issue:

• Verify that new projects transition from discovery to planning phase correctly
• Check the discovery completion logic
• Verify that the LeadAgent completes discovery and transitions the project
• Test that new projects don't get stuck in discovery phase
• Update test expectations if the phase transition behavior has changed

11. Create Browser-Specific Configuration Module

File: tests/e2e/browser-config.ts (new file)

Centralize browser-specific settings:

export const BROWSER_TIMEOUTS = {
  chromium: { action: 10000, expect: 5000, navigation: 30000 },
  firefox: { action: 15000, expect: 8000, navigation: 45000 },
  webkit: { action: 15000, expect: 8000, navigation: 45000 },
  mobile: { action: 15000, expect: 10000, navigation: 60000 }
};

export const BROWSER_QUIRKS = {
  firefox: { needsFormValidationWait: true, hasNSBindingAborted: true },
  webkit: { needsStableElementWait: true, hasDelayedRendering: true },
  mobile: { needsTouchEvents: true, requiresScrollIntoView: true }
};

12. Update Playwright Configuration with Browser-Specific Settings

File: tests/e2e/playwright.config.ts

Enhance the configuration with targeted browser-specific settings:

• Add Firefox project with timeout: 45000 and expect.timeout: 8000
• Add WebKit project with timeout: 45000 and expect.timeout: 8000
• Add Mobile Chrome project with timeout: 60000 and expect.timeout: 10000
• Add Mobile Safari project with timeout: 60000 and expect.timeout: 10000
• Add retries: 1 for Firefox and WebKit projects (not just CI)
• Add use.contextOptions with reducedMotion: 'reduce' for all projects
• Document the timeout rationale in comments

13. Add Mobile-Specific Smoke Tests

File: tests/e2e/test_mobile_smoke.spec.ts (new file)

Create dedicated mobile smoke tests to verify mobile functionality:

• Test mobile navigation menu (hamburger icon)
• Verify responsive layout breakpoints
• Test touch gestures (tap, swipe)
• Verify mobile viewport meta tag
• Test mobile keyboard interactions
• Verify mobile-specific UI elements (bottom navigation, etc.)
• Ensure these tests pass on both Mobile Chrome and Mobile Safari

14. Update Test Documentation

File: tests/e2e/README.md

Document browser-specific testing patterns and known issues:

• Add "Cross-Browser Testing" section explaining browser differences
• Document mobile testing best practices (use tap, scroll into view, etc.)
• Add Firefox troubleshooting section for NS_BINDING_ABORTED
• Document WebKit quirks (delayed rendering, timing issues)
• Add examples of browser-aware test patterns
• Include browser-specific timeout recommendations
• Document the mobile click interception fix and how to verify it

15. Create Browser Compatibility Test Report

File: tests/e2e/browser-compatibility-report.md (new file)

Track progress toward acceptance criteria:

• Document current failure counts per browser (as of 2026-01-13)
• List specific failing tests with root cause analysis
• Track progress toward acceptance criteria (<10 mobile, <5 Firefox, <20 WebKit)
• Document known issues and workarounds
• Provide browser-specific test execution commands
• Update this report after each fix to track progress

Visual Representation

flowchart TD
    A[E2E Test Execution] --> B{Detect Browser}
    B -->|Chromium| C[Standard Config]
    B -->|Firefox| D[Firefox Config]
    B -->|WebKit| E[WebKit Config]
    B -->|Mobile| F[Mobile Config]
    
    D --> D1[+50% Timeouts]
    D --> D2[NS_BINDING_ABORTED Filter]
    
    E --> E1[+50% Timeouts]
    E --> E2[Delayed Rendering Wait]
    
    F --> F1[Touch Events]
    F --> F2[Viewport Ready Wait]
    F --> F3[Scroll Into View]
    F --> F4[Header Z-Index Fix]
    
    C --> G[Execute Test]
    D1 --> G
    D2 --> G
    E1 --> G
    E2 --> G
    F1 --> G
    F2 --> G
    F3 --> G
    F4 --> G
    
    G --> H{Test Result}
    H -->|Pass| I[Report Success]
    H -->|Fail| J{Root Cause}
    J -->|Mobile Click| K[Verify Z-Index Fix]
    J -->|Viewport| L[Verify Detection Logic]
    J -->|Phase| M[Verify Seed Data]
    J -->|Timing| N[Increase Timeout]
    K --> O[Retry Test]
    L --> O
    M --> O
    N --> O
    O --> P{Retry Result}
    P -->|Pass| I
    P -->|Fail| Q[Report Failure with Browser Context]

Loading

Acceptance Criteria Validation

After implementation, validate against ticket requirements:

• Mobile Chrome: Run npm run test:mobile -- --project='Mobile Chrome' and verify <10 failures (currently 17)
• Mobile Safari: Run npm run test:mobile -- --project='Mobile Safari' and verify <10 failures (currently 6, ✅ met)
• Firefox: Run npm run test:firefox and verify <5 failures (currently 5, ⚠️ at threshold)
• WebKit: Run npm run test:webkit and verify <20 failures (currently 5, ✅ met)
• Smoke Tests: Run npm run test:smoke across all browsers and verify 8/8 pass (currently passing)

Priority Order

1. Fix Mobile Click Interception (15+ failures) - Dashboard header z-index issue
2. Fix Seed Data Phase Mismatch (10+ failures) - Projects in wrong phase
3. Fix Mobile Viewport Detection (2 failures) - Playwright config logic
4. Increase WebKit Timeouts (13 flaky tests) - Timing-sensitive operations
5. Address Backend Issues ([P1] FrontendWorkerAgent receives dict instead of Task object #251, [P1] Task approval button not visible in planning phase projects #254, [P1] Discovery enters stuck state on new project creation - no current question #255) - Type errors and visibility issues
6. Add Mobile-Specific Utilities - Support mobile testing patterns
7. Update Documentation - Document fixes and patterns

Import In IDE

🤖 Prompt for AI Agents

## Observations

The E2E test suite has made significant progress since the original ticket was created. Current results show: Chromium 1 failure (improved from 2), Firefox 5 failures (improved from 32, -84%), WebKit 5 failures (improved from 79, -94%), Mobile Safari 6 failures (target met), but Mobile Chrome still has 17 failures (target <10). The remaining root causes are well-identified: mobile click interception due to z-index issues in the Dashboard header (15+ failures), mobile viewport detection logic errors (2 failures), seed data phase mismatch where projects are in `active` instead of `planning` phase (10+ failures), and flaky WebKit timing issues (13 tests). The test infrastructure is solid with error monitoring, WebSocket testing, and data-testid selectors already in place.

## Approach

The plan focuses on targeted fixes for the remaining 17 Mobile Chrome failures and 5 Firefox/WebKit failures. Rather than broad refactoring, we'll address the specific root causes: fix the Dashboard header z-index stacking to prevent click interception on mobile, correct the mobile viewport detection logic in the Playwright configuration, update the seed data script to ensure projects are created in the correct `planning` phase, and increase WebKit-specific timeouts for timing-sensitive operations. We'll also address the backend type error (#251) and task visibility issues (#254, #255) that contribute to test failures.

## Implementation Steps

### 1. Fix Mobile Click Interception - Dashboard Header Z-Index

**Files:** `web-ui/src/components/Dashboard.tsx` (or relevant header component), `web-ui/src/styles/dashboard.css`

Address the z-index stacking issue causing mobile click interception:

- Audit the Dashboard header component's z-index value and ensure it doesn't overlap clickable elements below
- Verify that navigation tabs/buttons have higher z-index than the header when needed
- Add `pointer-events: none` to non-interactive header elements on mobile viewports
- Test that clicking tabs on mobile (375px width) doesn't get intercepted by header
- Add CSS media query for mobile: `@media (max-width: 640px)` to adjust z-index stacking
- Verify the fix with manual mobile viewport testing before running E2E tests

### 2. Fix Mobile Viewport Detection Logic

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

Correct the mobile detection logic that's causing 2 test failures:

- Review the current mobile project configuration (Pixel 5, iPhone 12)
- Add explicit `isMobile: true` flag to mobile projects if not already present
- Verify `hasTouch: true` is set for mobile projects
- Add browser context option `reducedMotion: 'reduce'` for mobile to avoid animation timing issues
- Create a helper function `isMobileBrowser(context)` that checks both `browserName` and project name
- Update test files to use this helper for mobile-specific logic
- Add logging to verify which browser/project is being used: `console.log(`Running on ${browserName} - ${projectName}`)`

### 3. Update Seed Data Script - Fix Project Phase Mismatch

**File:** `tests/e2e/seed-test-data.py`

Fix the seed data script to ensure projects are created in the correct `planning` phase:

- Review the current seed data script and identify where projects are being created
- Verify that `TEST_PROJECT_IDS.PLANNING` (project 2) is created with `phase='planning'`, not `phase='active'`
- Verify that `TEST_PROJECT_IDS.ACTIVE` (project 3) is created with `phase='active'`
- Verify that `TEST_PROJECT_IDS.TASK_BREAKDOWN` (project 6) is created with `phase='planning'` and has PRD but no tasks
- Verify that `TEST_PROJECT_IDS.ASSIGN_TASKS` (project 7) is created with `phase='active'` and has pending unassigned tasks
- Add validation logic to the seed script that logs the phase of each created project
- Run the seed script and verify output shows correct phases before running tests

### 4. Increase WebKit-Specific Timeouts

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

Add browser-specific timeout configurations for WebKit:

- Add `timeout` override for WebKit project: increase from 30000ms to 45000ms
- Add `expect.timeout` override for WebKit: increase from 5000ms to 8000ms
- Add `actionTimeout` override for WebKit: increase from 10000ms to 15000ms
- Add `navigationTimeout` override for WebKit: set to 45000ms
- Document why WebKit needs longer timeouts: Safari's slower CSS rendering and animation handling
- Test that these timeouts don't cause tests to hang (use reasonable upper bounds)

### 5. Add Mobile-Specific Test Utilities

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

Add utilities to handle mobile-specific interactions:

- Create `isMobileBrowser(context)` function that checks `browserName` and project name
- Add `waitForMobileReady(page)` function that waits for viewport stabilization
- Implement `mobileClick(page, selector)` that uses `page.tap()` for mobile, `page.click()` for desktop
- Add `scrollIntoViewMobile(page, selector)` with mobile-specific scroll behavior
- Create `getMobileViewport()` helper returning appropriate dimensions for current device
- Add `waitForResponsiveLayout(page)` that waits for CSS media query transitions to complete
- Export these utilities for use in test files

### 6. Update Test Files to Use Mobile-Aware Patterns

**Files:** `tests/e2e/test_dashboard.spec.ts`, `tests/e2e/test_auth_flow.spec.ts`, `tests/e2e/test_project_creation.spec.ts`, and other test files

Update tests to use mobile-aware interaction patterns:

- Replace direct `page.click()` with conditional logic: `isMobileBrowser() ? mobileClick() : page.click()`
- Add `scrollIntoViewIfNeeded()` before all mobile interactions
- Add `waitForMobileReady()` in `beforeEach` hook for mobile projects
- Add viewport size assertions for mobile tests
- Skip desktop-only features (e.g., hover states) on mobile
- Add mobile-specific selectors for hamburger menus and collapsed navigation
- Test that tab clicks work on mobile without header interception

### 7. Fix Firefox NS_BINDING_ABORTED Error Filtering

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

Update error filtering to handle Firefox-specific network behavior:

- Add `'NS_BINDING_ABORTED'` to the default Firefox error filter patterns
- Create `isFirefoxNavigationError(error)` helper that identifies benign Firefox navigation errors
- Update `filterExpectedErrors()` to automatically include Firefox patterns when `isFirefox()` returns true
- Document that Firefox aggressively cancels requests during navigation (normal behavior)
- Test that Firefox tests pass with this filter in place

### 8. Address Backend Type Error - FrontendWorkerAgent

**File:** Backend code (location TBD - related to issue #251)

Fix the FrontendWorkerAgent type error where it receives dict instead of Task object:

- Locate the FrontendWorkerAgent initialization code
- Verify that Task objects are being passed, not dictionaries
- Add type checking/validation to catch this error earlier
- Update any test setup code that might be passing incorrect types
- Verify the fix resolves test failures related to task operations

### 9. Fix Task Approval Button Visibility

**File:** Related to issue #254 - Task approval button not visible in planning phase projects

Investigate and fix the task approval button visibility issue:

- Verify that projects in `planning` phase should show task approval buttons
- Check the UI component that renders the approval button
- Verify the button's visibility conditions (phase, task status, permissions)
- Update seed data if needed to ensure test projects have the correct phase
- Test that the approval button is visible in planning phase projects

### 10. Fix Discovery Stuck State on New Project Creation

**File:** Related to issue #255 - Discovery enters stuck state on new project creation

Investigate and fix the discovery stuck state issue:

- Verify that new projects transition from `discovery` to `planning` phase correctly
- Check the discovery completion logic
- Verify that the LeadAgent completes discovery and transitions the project
- Test that new projects don't get stuck in discovery phase
- Update test expectations if the phase transition behavior has changed

### 11. Create Browser-Specific Configuration Module

**File:** `tests/e2e/browser-config.ts` (new file)

Centralize browser-specific settings:

```typescript
export const BROWSER_TIMEOUTS = {
  chromium: { action: 10000, expect: 5000, navigation: 30000 },
  firefox: { action: 15000, expect: 8000, navigation: 45000 },
  webkit: { action: 15000, expect: 8000, navigation: 45000 },
  mobile: { action: 15000, expect: 10000, navigation: 60000 }
};

export const BROWSER_QUIRKS = {
  firefox: { needsFormValidationWait: true, hasNSBindingAborted: true },
  webkit: { needsStableElementWait: true, hasDelayedRendering: true },
  mobile: { needsTouchEvents: true, requiresScrollIntoView: true }
};
```

### 12. Update Playwright Configuration with Browser-Specific Settings

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

Enhance the configuration with targeted browser-specific settings:

- Add Firefox project with `timeout: 45000` and `expect.timeout: 8000`
- Add WebKit project with `timeout: 45000` and `expect.timeout: 8000`
- Add Mobile Chrome project with `timeout: 60000` and `expect.timeout: 10000`
- Add Mobile Safari project with `timeout: 60000` and `expect.timeout: 10000`
- Add `retries: 1` for Firefox and WebKit projects (not just CI)
- Add `use.contextOptions` with `reducedMotion: 'reduce'` for all projects
- Document the timeout rationale in comments

### 13. Add Mobile-Specific Smoke Tests

**File:** `tests/e2e/test_mobile_smoke.spec.ts` (new file)

Create dedicated mobile smoke tests to verify mobile functionality:

- Test mobile navigation menu (hamburger icon)
- Verify responsive layout breakpoints
- Test touch gestures (tap, swipe)
- Verify mobile viewport meta tag
- Test mobile keyboard interactions
- Verify mobile-specific UI elements (bottom navigation, etc.)
- Ensure these tests pass on both Mobile Chrome and Mobile Safari

### 14. Update Test Documentation

**File:** `tests/e2e/README.md`

Document browser-specific testing patterns and known issues:

- Add "Cross-Browser Testing" section explaining browser differences
- Document mobile testing best practices (use tap, scroll into view, etc.)
- Add Firefox troubleshooting section for NS_BINDING_ABORTED
- Document WebKit quirks (delayed rendering, timing issues)
- Add examples of browser-aware test patterns
- Include browser-specific timeout recommendations
- Document the mobile click interception fix and how to verify it

### 15. Create Browser Compatibility Test Report

**File:** `tests/e2e/browser-compatibility-report.md` (new file)

Track progress toward acceptance criteria:

- Document current failure counts per browser (as of 2026-01-13)
- List specific failing tests with root cause analysis
- Track progress toward acceptance criteria (<10 mobile, <5 Firefox, <20 WebKit)
- Document known issues and workarounds
- Provide browser-specific test execution commands
- Update this report after each fix to track progress

## Visual Representation

```mermaid
flowchart TD
    A[E2E Test Execution] --> B{Detect Browser}
    B -->|Chromium| C[Standard Config]
    B -->|Firefox| D[Firefox Config]
    B -->|WebKit| E[WebKit Config]
    B -->|Mobile| F[Mobile Config]
    
    D --> D1[+50% Timeouts]
    D --> D2[NS_BINDING_ABORTED Filter]
    
    E --> E1[+50% Timeouts]
    E --> E2[Delayed Rendering Wait]
    
    F --> F1[Touch Events]
    F --> F2[Viewport Ready Wait]
    F --> F3[Scroll Into View]
    F --> F4[Header Z-Index Fix]
    
    C --> G[Execute Test]
    D1 --> G
    D2 --> G
    E1 --> G
    E2 --> G
    F1 --> G
    F2 --> G
    F3 --> G
    F4 --> G
    
    G --> H{Test Result}
    H -->|Pass| I[Report Success]
    H -->|Fail| J{Root Cause}
    J -->|Mobile Click| K[Verify Z-Index Fix]
    J -->|Viewport| L[Verify Detection Logic]
    J -->|Phase| M[Verify Seed Data]
    J -->|Timing| N[Increase Timeout]
    K --> O[Retry Test]
    L --> O
    M --> O
    N --> O
    O --> P{Retry Result}
    P -->|Pass| I
    P -->|Fail| Q[Report Failure with Browser Context]
```

## Acceptance Criteria Validation

After implementation, validate against ticket requirements:

- **Mobile Chrome**: Run `npm run test:mobile -- --project='Mobile Chrome'` and verify <10 failures (currently 17)
- **Mobile Safari**: Run `npm run test:mobile -- --project='Mobile Safari'` and verify <10 failures (currently 6, ✅ met)
- **Firefox**: Run `npm run test:firefox` and verify <5 failures (currently 5, ⚠️ at threshold)
- **WebKit**: Run `npm run test:webkit` and verify <20 failures (currently 5, ✅ met)
- **Smoke Tests**: Run `npm run test:smoke` across all browsers and verify 8/8 pass (currently passing)

## Priority Order

1. **Fix Mobile Click Interception** (15+ failures) - Dashboard header z-index issue
2. **Fix Seed Data Phase Mismatch** (10+ failures) - Projects in wrong phase
3. **Fix Mobile Viewport Detection** (2 failures) - Playwright config logic
4. **Increase WebKit Timeouts** (13 flaky tests) - Timing-sensitive operations
5. **Address Backend Issues** (#251, #254, #255) - Type errors and visibility issues
6. **Add Mobile-Specific Utilities** - Support mobile testing patterns
7. **Update Documentation** - Document fixes and patterns

---

Execution Information

Branch: main
Commit: 2e66ed3

---

💡 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.

[frankbria]

E2E Test Results Update (2026-01-13)

Significant progress has been made since this issue was created. Updated test results:

Current vs Original Results

Browser	Original (Failed)	Current (Failed)	Status
Chromium	2	1	✅ Improved
Firefox	32	5	✅ -84%
WebKit	79	5	✅ -94%
Mobile Chrome	99	17	⚠️ -83%, target <10
Mobile Safari	99	6	✅ Target met (<10)

Acceptance Criteria Progress

Criterion	Target	Current	Status
Mobile Chrome	<10	17	❌ Not met
Mobile Safari	<10	6	✅ Met
Firefox	<5	5	⚠️ At threshold
WebKit	<20	5	✅ Met

Related Issues (Cross-References)

The following issues have been identified as contributing to remaining E2E failures:

• [P1] FrontendWorkerAgent receives dict instead of Task object #251 - FrontendWorkerAgent receives dict instead of Task object (backend type error in tests)
• [P1] Task approval button not visible in planning phase projects #254 - Task approval button not visible in planning phase projects (E2E test failures)
• [P1] Discovery enters stuck state on new project creation - no current question #255 - Discovery enters stuck state on new project creation (E2E test failures)

Remaining Root Causes

1. Mobile Click Interception - Dashboard header/nav elements overlap clickable tabs on mobile viewport (z-index issue) - 15+ failures
2. Mobile Viewport Detection - Test incorrectly detects Mobile Chrome/Safari as desktop - 2 failures
3. Seed Data Phase Mismatch - Projects in active phase instead of planning - 10+ failures
4. Flaky webkit tests - 13 tests flaky on webkit/Safari (timing issues)

Next Steps

1. Fix mobile CSS z-index stacking in Dashboard header
2. Fix mobile detection logic in playwright config
3. Update seed data script to maintain planning phase for appropriate projects
4. Increase timeouts for webkit-specific timing issues