[Future] E2E: Mobile viewport detection incorrectly identifies Mobile Chrome/Safari as desktop

[frankbria]

Problem

The E2E test test_mobile_smoke.spec.ts:50 incorrectly detects Mobile Chrome and Mobile Safari browsers as desktop, causing viewport assertions to fail.

Failing Tests

• [Mobile Chrome] › test_mobile_smoke.spec.ts:50:7 › should have correct mobile viewport @smoke
• [Mobile Safari] › test_mobile_smoke.spec.ts:50:7 › should have correct mobile viewport @smoke

Error

Error: expect(received).toBeGreaterThan(expected)
Expected: > 800
Received:   393  (Mobile Chrome)
Received:   390  (Mobile Safari)

Root Cause

The test logs show:

Running mobile test on: chromium (mobile: false)
ℹ️ Desktop viewport: 1280x720 (not a mobile test)

When running on Mobile Chrome/Safari projects, the test incorrectly:

1. Detects mobile: false
2. Branches to desktop viewport assertion (width > 800)
3. Fails because actual viewport is mobile-sized (~390px)

Location

• tests/e2e/test_mobile_smoke.spec.ts:50-64
• Possibly tests/e2e/playwright.config.ts (project configuration)

Expected Behavior

When running on "Mobile Chrome" or "Mobile Safari" projects:

1. Test should detect mobile: true
2. Assert mobile viewport width (< 500px)
3. Pass with actual width of ~390px

Suggested Fix

Check the mobile detection logic in the test or playwright config:

// Current (broken)
const isMobile = page.context().isMobile; // Returns false incorrectly

// Fix option 1: Check project name
const isMobile = test.info().project.name.includes('Mobile');

// Fix option 2: Check viewport directly
const viewport = page.viewportSize();
const isMobile = viewport && viewport.width < 500;

Impact

• 2 smoke test failures
• Blocks mobile testing confidence

Related

• [P3] E2E Tests: Fix mobile browser and Firefox compatibility issues #230 - E2E Tests: Fix mobile browser and Firefox compatibility issues

[traycerai]

Plan

Observations

The E2E test suite has Mobile Chrome and Mobile Safari projects configured in file:tests/e2e/playwright.config.ts (lines 82-89) using Playwright's device descriptors (Pixel 5 and iPhone 12). However, the test file test_mobile_smoke.spec.ts mentioned in the issue doesn't exist in the codebase. The issue describes a mobile viewport detection problem where tests incorrectly identify mobile browsers as desktop, causing viewport assertions to fail with actual mobile widths (~390px) being compared against desktop expectations (>800px).

The root cause is that page.context().isMobile returns false even when running on Mobile Chrome/Safari projects, likely because Playwright's context API doesn't properly reflect the device configuration. The fix requires checking the project name from test.info().project.name instead, which reliably identifies mobile projects by matching against "Mobile Chrome" and "Mobile Safari" strings.

Approach

Create a new mobile smoke test file that properly detects mobile projects using Playwright's test info API. The test will check the project name to determine if it's a mobile configuration, then assert appropriate viewport dimensions. This approach is more reliable than checking page.context().isMobile which appears to return false incorrectly. The implementation will follow existing E2E test patterns from file:tests/e2e/test_dashboard.spec.ts and use utilities from file:tests/e2e/test-utils.ts.

This is a future enhancement to improve mobile testing confidence and ensure viewport assertions work correctly across all project configurations.

Implementation Steps

1. Create Mobile Smoke Test File

Create file:tests/e2e/test_mobile_smoke.spec.ts with the following structure:

Test Setup:

• Import necessary Playwright test utilities and helpers from test-utils.ts
• Set up error monitoring in beforeEach hook using setupErrorMonitoring()
• Perform user login using loginUser() helper
• Navigate to a test project dashboard using E2E_TEST_PROJECT_ID environment variable

Mobile Detection Logic:

• Use test.info().project.name to check if the current project is mobile
• Detect mobile by checking if project name includes 'Mobile' (matches "Mobile Chrome" and "Mobile Safari" from config)
• Log the detected browser and mobile status for debugging
• This approach is more reliable than page.context().isMobile which returns false incorrectly

Viewport Assertions:

• For mobile projects: Assert viewport width < 500px (typical mobile range, actual: 390-393px)
• For desktop projects: Assert viewport width > 800px (typical desktop range, actual: 1280px)
• Get viewport using page.viewportSize() which returns { width, height } or null
• Handle null viewport case defensively (shouldn't occur but good practice)

Error Handling:

• Use checkTestErrors() in afterEach to verify no network errors occurred
• Filter expected errors like net::ERR_ABORTED and Failed to fetch RSC payload
• Follow error filtering pattern from file:tests/e2e/test_dashboard.spec.ts (lines 145-148)

2. Test Implementation Details

Test Case: "should have correct mobile viewport @smoke"

The test will execute the following sequence:

1. Get test project info using test.info()
2. Extract project name from test.info().project.name
3. Determine if mobile: projectName.includes('Mobile')
4. Get viewport size: page.viewportSize()
5. Handle null viewport case (shouldn't happen but defensive)
6. Log detection results for debugging
7. Branch on mobile detection:
   • If mobile: expect(viewport.width).toBeLessThan(500) (passes with actual 390-393px)
   • If desktop: expect(viewport.width).toBeGreaterThan(800) (passes with actual 1280px)

Logging Pattern:

• Log format: "Running mobile test on: {browserName} (mobile: {isMobile})"
• Log viewport: "Mobile viewport: {width}x{height}" or "Desktop viewport: {width}x{height}"
• Include project name in logs for debugging: "Project: {projectName}"

Test Tagging:

• Mark test with @smoke tag to include in smoke test runs
• Test will run on all projects: chromium, firefox, webkit, Mobile Chrome, Mobile Safari

3. Integration with Existing Test Infrastructure

Use Existing Patterns:

• Follow the test structure from file:tests/e2e/test_dashboard.spec.ts (lines 80-150)
• Use setupErrorMonitoring() and checkTestErrors() from file:tests/e2e/test-utils.ts (lines 64-216)
• Use loginUser() for authentication (lines 483-500)
• Navigate to project using environment variable E2E_TEST_PROJECT_ID (defaults to '1')

Configuration:

• Test will automatically run on all projects defined in file:tests/e2e/playwright.config.ts (lines 65-90)
• Mobile Chrome project uses devices['Pixel 5'] (viewport: 393x851)
• Mobile Safari project uses devices['iPhone 12'] (viewport: 390x844)
• Desktop projects (chromium, firefox, webkit) use standard desktop viewports (1280x720)

Test Execution:

• Test runs on all projects by default (no project filtering)
• Can be run with npm run test:mobile to test only mobile projects
• Can be run with npm run test:smoke to run all smoke tests
• Can be run with npm test to run on all projects

4. Verification Strategy

The test should pass when:

• Running on Mobile Chrome project: detects mobile=true, asserts width < 500px (actual: 393px) ✅
• Running on Mobile Safari project: detects mobile=true, asserts width < 500px (actual: 390px) ✅
• Running on desktop projects (chromium, firefox, webkit): detects mobile=false, asserts width > 800px (actual: 1280px) ✅

The test should fail with clear error messages if:

• Mobile project incorrectly detected as desktop (current bug)
• Viewport size doesn't match expected range
• Navigation or login fails

5. Test Execution

The test can be run using existing npm scripts:

• npm run test:mobile - Run only on Mobile Chrome and Mobile Safari
• npm run test:smoke - Run all smoke tests including this one on chromium
• npm test - Run on all projects (desktop + mobile)

6. Code Implementation

The test file will be structured as follows:

import { test, expect } from '@playwright/test';
import {
  loginUser,
  setupErrorMonitoring,
  checkTestErrors,
  ExtendedPage
} from './test-utils';

const FRONTEND_URL = process.env.FRONTEND_URL || 'http://localhost:3001';
const PROJECT_ID = process.env.E2E_TEST_PROJECT_ID || '1';

test.describe('Mobile Viewport Detection', () => {
  test.beforeEach(async ({ page }) => {
    // Setup error monitoring
    const errorMonitor = setupErrorMonitoring(page);
    (page as ExtendedPage).__errorMonitor = errorMonitor;

    // Login user
    await loginUser(page);

    // Navigate to project dashboard
    await page.goto(`${FRONTEND_URL}/projects/${PROJECT_ID}`);
    await page.waitForLoadState('networkidle');
  });

  test.afterEach(async ({ page }) => {
    // Check for network errors (filter expected ones)
    checkTestErrors(page, 'Mobile viewport test', [
      'net::ERR_ABORTED',
      'Failed to fetch RSC payload'
    ]);
  });

  test('should have correct mobile viewport @smoke', async ({ page }, testInfo) => {
    // Get project name from test info
    const projectName = testInfo.project.name;
    const isMobile = projectName.includes('Mobile');

    // Get viewport size
    const viewport = page.viewportSize();
    if (!viewport) {
      throw new Error('Viewport size is null');
    }

    // Log detection results
    console.log(`Running mobile test on: ${projectName} (mobile: ${isMobile})`);
    console.log(`Viewport: ${viewport.width}x${viewport.height}`);

    // Assert viewport based on project type
    if (isMobile) {
      console.log(`ℹ️ Mobile viewport: ${viewport.width}x${viewport.height}`);
      expect(viewport.width).toBeLessThan(500);
    } else {
      console.log(`ℹ️ Desktop viewport: ${viewport.width}x${viewport.height}`);
      expect(viewport.width).toBeGreaterThan(800);
    }
  });
});

This implementation:

• Uses testInfo.project.name to reliably detect mobile projects
• Follows existing test patterns from test_dashboard.spec.ts
• Includes proper error monitoring and cleanup
• Provides clear logging for debugging
• Handles both mobile and desktop projects correctly
• Fixes the root cause (incorrect mobile detection) rather than working around it

Visual Flow

sequenceDiagram
    participant Test as Mobile Smoke Test
    participant Playwright as Playwright Test Info
    participant Page as Browser Page
    participant Assertion as Test Assertion

    Test->>Playwright: test.info().project.name
    Playwright-->>Test: "Mobile Chrome" or "chromium"
    
    Test->>Test: Check if name includes 'Mobile'
    
    Test->>Page: page.viewportSize()
    Page-->>Test: { width: 393, height: 851 }
    
    alt Mobile Project
        Test->>Assertion: expect(width).toBeLessThan(500)
        Assertion-->>Test: ✅ Pass (393 < 500)
    else Desktop Project
        Test->>Assertion: expect(width).toBeGreaterThan(800)
        Assertion-->>Test: ✅ Pass (1280 > 800)
    end

Loading

Key Files Referenced

• file:tests/e2e/playwright.config.ts - Mobile project configuration (lines 82-89)
• file:tests/e2e/test-utils.ts - Authentication and error monitoring utilities
• file:tests/e2e/test_dashboard.spec.ts - Reference for test structure patterns
• file:tests/e2e/package.json - Test scripts including test:mobile

Import In IDE

🤖 Prompt for AI Agents

## Observations

The E2E test suite has Mobile Chrome and Mobile Safari projects configured in `file:tests/e2e/playwright.config.ts` (lines 82-89) using Playwright's device descriptors (`Pixel 5` and `iPhone 12`). However, the test file `test_mobile_smoke.spec.ts` mentioned in the issue doesn't exist in the codebase. The issue describes a mobile viewport detection problem where tests incorrectly identify mobile browsers as desktop, causing viewport assertions to fail with actual mobile widths (~390px) being compared against desktop expectations (>800px).

The root cause is that `page.context().isMobile` returns false even when running on Mobile Chrome/Safari projects, likely because Playwright's context API doesn't properly reflect the device configuration. The fix requires checking the project name from `test.info().project.name` instead, which reliably identifies mobile projects by matching against "Mobile Chrome" and "Mobile Safari" strings.

## Approach

Create a new mobile smoke test file that properly detects mobile projects using Playwright's test info API. The test will check the project name to determine if it's a mobile configuration, then assert appropriate viewport dimensions. This approach is more reliable than checking `page.context().isMobile` which appears to return false incorrectly. The implementation will follow existing E2E test patterns from `file:tests/e2e/test_dashboard.spec.ts` and use utilities from `file:tests/e2e/test-utils.ts`.

This is a future enhancement to improve mobile testing confidence and ensure viewport assertions work correctly across all project configurations.

## Implementation Steps

### 1. Create Mobile Smoke Test File

Create `file:tests/e2e/test_mobile_smoke.spec.ts` with the following structure:

**Test Setup:**
- Import necessary Playwright test utilities and helpers from `test-utils.ts`
- Set up error monitoring in `beforeEach` hook using `setupErrorMonitoring()`
- Perform user login using `loginUser()` helper
- Navigate to a test project dashboard using `E2E_TEST_PROJECT_ID` environment variable

**Mobile Detection Logic:**
- Use `test.info().project.name` to check if the current project is mobile
- Detect mobile by checking if project name includes 'Mobile' (matches "Mobile Chrome" and "Mobile Safari" from config)
- Log the detected browser and mobile status for debugging
- This approach is more reliable than `page.context().isMobile` which returns false incorrectly

**Viewport Assertions:**
- For mobile projects: Assert viewport width < 500px (typical mobile range, actual: 390-393px)
- For desktop projects: Assert viewport width > 800px (typical desktop range, actual: 1280px)
- Get viewport using `page.viewportSize()` which returns `{ width, height }` or null
- Handle null viewport case defensively (shouldn't occur but good practice)

**Error Handling:**
- Use `checkTestErrors()` in `afterEach` to verify no network errors occurred
- Filter expected errors like `net::ERR_ABORTED` and `Failed to fetch RSC payload`
- Follow error filtering pattern from `file:tests/e2e/test_dashboard.spec.ts` (lines 145-148)

### 2. Test Implementation Details

**Test Case: "should have correct mobile viewport @smoke"**

The test will execute the following sequence:

1. Get test project info using `test.info()`
2. Extract project name from `test.info().project.name`
3. Determine if mobile: `projectName.includes('Mobile')`
4. Get viewport size: `page.viewportSize()`
5. Handle null viewport case (shouldn't happen but defensive)
6. Log detection results for debugging
7. Branch on mobile detection:
   - If mobile: `expect(viewport.width).toBeLessThan(500)` (passes with actual 390-393px)
   - If desktop: `expect(viewport.width).toBeGreaterThan(800)` (passes with actual 1280px)

**Logging Pattern:**
- Log format: `"Running mobile test on: {browserName} (mobile: {isMobile})"`
- Log viewport: `"Mobile viewport: {width}x{height}"` or `"Desktop viewport: {width}x{height}"`
- Include project name in logs for debugging: `"Project: {projectName}"`

**Test Tagging:**
- Mark test with `@smoke` tag to include in smoke test runs
- Test will run on all projects: chromium, firefox, webkit, Mobile Chrome, Mobile Safari

### 3. Integration with Existing Test Infrastructure

**Use Existing Patterns:**
- Follow the test structure from `file:tests/e2e/test_dashboard.spec.ts` (lines 80-150)
- Use `setupErrorMonitoring()` and `checkTestErrors()` from `file:tests/e2e/test-utils.ts` (lines 64-216)
- Use `loginUser()` for authentication (lines 483-500)
- Navigate to project using environment variable `E2E_TEST_PROJECT_ID` (defaults to '1')

**Configuration:**
- Test will automatically run on all projects defined in `file:tests/e2e/playwright.config.ts` (lines 65-90)
- Mobile Chrome project uses `devices['Pixel 5']` (viewport: 393x851)
- Mobile Safari project uses `devices['iPhone 12']` (viewport: 390x844)
- Desktop projects (chromium, firefox, webkit) use standard desktop viewports (1280x720)

**Test Execution:**
- Test runs on all projects by default (no project filtering)
- Can be run with `npm run test:mobile` to test only mobile projects
- Can be run with `npm run test:smoke` to run all smoke tests
- Can be run with `npm test` to run on all projects

### 4. Verification Strategy

The test should pass when:
- Running on Mobile Chrome project: detects mobile=true, asserts width < 500px (actual: 393px) ✅
- Running on Mobile Safari project: detects mobile=true, asserts width < 500px (actual: 390px) ✅
- Running on desktop projects (chromium, firefox, webkit): detects mobile=false, asserts width > 800px (actual: 1280px) ✅

The test should fail with clear error messages if:
- Mobile project incorrectly detected as desktop (current bug)
- Viewport size doesn't match expected range
- Navigation or login fails

### 5. Test Execution

The test can be run using existing npm scripts:
- `npm run test:mobile` - Run only on Mobile Chrome and Mobile Safari
- `npm run test:smoke` - Run all smoke tests including this one on chromium
- `npm test` - Run on all projects (desktop + mobile)

### 6. Code Implementation

The test file will be structured as follows:

```typescript
import { test, expect } from '@playwright/test';
import {
  loginUser,
  setupErrorMonitoring,
  checkTestErrors,
  ExtendedPage
} from './test-utils';

const FRONTEND_URL = process.env.FRONTEND_URL || 'http://localhost:3001';
const PROJECT_ID = process.env.E2E_TEST_PROJECT_ID || '1';

test.describe('Mobile Viewport Detection', () => {
  test.beforeEach(async ({ page }) => {
    // Setup error monitoring
    const errorMonitor = setupErrorMonitoring(page);
    (page as ExtendedPage).__errorMonitor = errorMonitor;

    // Login user
    await loginUser(page);

    // Navigate to project dashboard
    await page.goto(`${FRONTEND_URL}/projects/${PROJECT_ID}`);
    await page.waitForLoadState('networkidle');
  });

  test.afterEach(async ({ page }) => {
    // Check for network errors (filter expected ones)
    checkTestErrors(page, 'Mobile viewport test', [
      'net::ERR_ABORTED',
      'Failed to fetch RSC payload'
    ]);
  });

  test('should have correct mobile viewport @smoke', async ({ page }, testInfo) => {
    // Get project name from test info
    const projectName = testInfo.project.name;
    const isMobile = projectName.includes('Mobile');

    // Get viewport size
    const viewport = page.viewportSize();
    if (!viewport) {
      throw new Error('Viewport size is null');
    }

    // Log detection results
    console.log(`Running mobile test on: ${projectName} (mobile: ${isMobile})`);
    console.log(`Viewport: ${viewport.width}x${viewport.height}`);

    // Assert viewport based on project type
    if (isMobile) {
      console.log(`ℹ️ Mobile viewport: ${viewport.width}x${viewport.height}`);
      expect(viewport.width).toBeLessThan(500);
    } else {
      console.log(`ℹ️ Desktop viewport: ${viewport.width}x${viewport.height}`);
      expect(viewport.width).toBeGreaterThan(800);
    }
  });
});
```

This implementation:
- Uses `testInfo.project.name` to reliably detect mobile projects
- Follows existing test patterns from `test_dashboard.spec.ts`
- Includes proper error monitoring and cleanup
- Provides clear logging for debugging
- Handles both mobile and desktop projects correctly
- Fixes the root cause (incorrect mobile detection) rather than working around it

## Visual Flow

```mermaid
sequenceDiagram
    participant Test as Mobile Smoke Test
    participant Playwright as Playwright Test Info
    participant Page as Browser Page
    participant Assertion as Test Assertion

    Test->>Playwright: test.info().project.name
    Playwright-->>Test: "Mobile Chrome" or "chromium"
    
    Test->>Test: Check if name includes 'Mobile'
    
    Test->>Page: page.viewportSize()
    Page-->>Test: { width: 393, height: 851 }
    
    alt Mobile Project
        Test->>Assertion: expect(width).toBeLessThan(500)
        Assertion-->>Test: ✅ Pass (393 < 500)
    else Desktop Project
        Test->>Assertion: expect(width).toBeGreaterThan(800)
        Assertion-->>Test: ✅ Pass (1280 > 800)
    end
```

## Key Files Referenced

- `file:tests/e2e/playwright.config.ts` - Mobile project configuration (lines 82-89)
- `file:tests/e2e/test-utils.ts` - Authentication and error monitoring utilities
- `file:tests/e2e/test_dashboard.spec.ts` - Reference for test structure patterns
- `file:tests/e2e/package.json` - Test scripts including `test:mobile`

---

Execution Information

Branch: main
Commit: 1260477

---

💡 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

---

🔗 Related PRs

#93 - fix(e2e): Fix dashboard and metrics tests for tab-based UI rendering [merged]
#182 - fix(checkpoints): Unwrap API response to prevent sort error on empty projects [merged]
#188 - feat(e2e): Add comprehensive error monitoring and strict verification [merged]
#191 - feat(e2e): Enable conditional tests and fix discovery startup [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]

I have updated the Implementation Plan to reflect the recent changes in the ticket.

Previous Plan

Observations

The E2E test suite has Mobile Chrome and Mobile Safari projects configured in file:tests/e2e/playwright.config.ts (lines 82-89) using Playwright's device descriptors (Pixel 5 and iPhone 12). However, the test file test_mobile_smoke.spec.ts mentioned in the issue doesn't exist in the codebase. The issue describes a mobile viewport detection problem where tests incorrectly identify mobile browsers as desktop, causing viewport assertions to fail with actual mobile widths (~390px) being compared against desktop expectations (>800px).

Approach

Create a new mobile smoke test file that properly detects mobile projects using Playwright's test info API. The test will check the project name to determine if it's a mobile configuration, then assert appropriate viewport dimensions. This approach is more reliable than checking page.context().isMobile which appears to return false incorrectly. The implementation will follow existing E2E test patterns from file:tests/e2e/test_dashboard.spec.ts and use utilities from file:tests/e2e/test-utils.ts.

Implementation Steps

1. Create Mobile Smoke Test File

Create file:tests/e2e/test_mobile_smoke.spec.ts with the following structure:

Test Setup:

• Import necessary Playwright test utilities and helpers from test-utils.ts
• Set up error monitoring in beforeEach hook using setupErrorMonitoring()
• Perform user login using loginUser() helper
• Navigate to a test project dashboard

Mobile Detection Logic:

• Use test.info().project.name to check if the current project is mobile
• Detect mobile by checking if project name includes 'Mobile' (matches "Mobile Chrome" and "Mobile Safari" from config)
• Log the detected browser and mobile status for debugging

Viewport Assertions:

• For mobile projects: Assert viewport width < 500px (typical mobile range)
• For desktop projects: Assert viewport width > 800px (typical desktop range)
• Get viewport using page.viewportSize() which returns { width, height } or null

Error Handling:

• Use checkTestErrors() in afterEach to verify no network errors occurred
• Filter expected errors like net::ERR_ABORTED and Failed to fetch RSC payload

2. Test Implementation Details

Test Case: "should have correct mobile viewport @smoke"

Sequence:
1. Get test project info using test.info()
2. Extract project name from test.info().project.name
3. Determine if mobile: projectName.includes('Mobile')
4. Get viewport size: page.viewportSize()
5. Handle null viewport case (shouldn't happen but defensive)
6. Log detection results for debugging
7. Branch on mobile detection:
   - If mobile: expect(viewport.width).toBeLessThan(500)
   - If desktop: expect(viewport.width).toBeGreaterThan(800)

Logging Pattern:

• Log format: "Running mobile test on: {browserName} (mobile: {isMobile})"
• Log viewport: "Mobile viewport: {width}x{height}" or "Desktop viewport: {width}x{height}"

3. Integration with Existing Test Infrastructure

Use Existing Patterns:

• Follow the test structure from file:tests/e2e/test_dashboard.spec.ts
• Use setupErrorMonitoring() and checkTestErrors() from file:tests/e2e/test-utils.ts
• Use loginUser() for authentication
• Navigate to project using environment variable E2E_TEST_PROJECT_ID

Configuration:

• Test will automatically run on all projects defined in file:tests/e2e/playwright.config.ts
• Mobile Chrome project uses devices['Pixel 5'] (viewport: 393x851)
• Mobile Safari project uses devices['iPhone 12'] (viewport: 390x844)
• Desktop projects use standard desktop viewports (1280x720)

4. Verification Strategy

The test should pass when:

• Running on Mobile Chrome project: detects mobile=true, asserts width < 500px (actual: 393px)
• Running on Mobile Safari project: detects mobile=true, asserts width < 500px (actual: 390px)
• Running on desktop projects: detects mobile=false, asserts width > 800px (actual: 1280px)

5. Test Execution

The test can be run using existing npm scripts:

• npm run test:mobile - Run only on Mobile Chrome and Mobile Safari
• npm run test:smoke - Run all smoke tests including this one on chromium
• npm test - Run on all projects (desktop + mobile)

Visual Flow

sequenceDiagram
    participant Test as Mobile Smoke Test
    participant Playwright as Playwright Test Info
    participant Page as Browser Page
    participant Assertion as Test Assertion

    Test->>Playwright: test.info().project.name
    Playwright-->>Test: "Mobile Chrome" or "chromium"
    
    Test->>Test: Check if name includes 'Mobile'
    
    Test->>Page: page.viewportSize()
    Page-->>Test: { width: 393, height: 851 }
    
    alt Mobile Project
        Test->>Assertion: expect(width).toBeLessThan(500)
        Assertion-->>Test: ✅ Pass (393 < 500)
    else Desktop Project
        Test->>Assertion: expect(width).toBeGreaterThan(800)
        Assertion-->>Test: ✅ Pass (1280 > 800)
    end

Loading

Key Files Referenced

• file:tests/e2e/playwright.config.ts - Mobile project configuration (lines 82-89)
• file:tests/e2e/test-utils.ts - Authentication and error monitoring utilities
• file:tests/e2e/test_dashboard.spec.ts - Reference for test structure patterns
• file:tests/e2e/package.json - Test scripts including test:mobile

Import In IDE

🤖 Prompt for AI Agents

## Observations

The E2E test suite has Mobile Chrome and Mobile Safari projects configured in `file:tests/e2e/playwright.config.ts` (lines 82-89) using Playwright's device descriptors (`Pixel 5` and `iPhone 12`). However, the test file `test_mobile_smoke.spec.ts` mentioned in the issue doesn't exist in the codebase. The issue describes a mobile viewport detection problem where tests incorrectly identify mobile browsers as desktop, causing viewport assertions to fail with actual mobile widths (~390px) being compared against desktop expectations (>800px).

## Approach

Create a new mobile smoke test file that properly detects mobile projects using Playwright's test info API. The test will check the project name to determine if it's a mobile configuration, then assert appropriate viewport dimensions. This approach is more reliable than checking `page.context().isMobile` which appears to return false incorrectly. The implementation will follow existing E2E test patterns from `file:tests/e2e/test_dashboard.spec.ts` and use utilities from `file:tests/e2e/test-utils.ts`.

## Implementation Steps

### 1. Create Mobile Smoke Test File

Create `file:tests/e2e/test_mobile_smoke.spec.ts` with the following structure:

**Test Setup:**
- Import necessary Playwright test utilities and helpers from `test-utils.ts`
- Set up error monitoring in `beforeEach` hook using `setupErrorMonitoring()`
- Perform user login using `loginUser()` helper
- Navigate to a test project dashboard

**Mobile Detection Logic:**
- Use `test.info().project.name` to check if the current project is mobile
- Detect mobile by checking if project name includes 'Mobile' (matches "Mobile Chrome" and "Mobile Safari" from config)
- Log the detected browser and mobile status for debugging

**Viewport Assertions:**
- For mobile projects: Assert viewport width < 500px (typical mobile range)
- For desktop projects: Assert viewport width > 800px (typical desktop range)
- Get viewport using `page.viewportSize()` which returns `{ width, height }` or null

**Error Handling:**
- Use `checkTestErrors()` in `afterEach` to verify no network errors occurred
- Filter expected errors like `net::ERR_ABORTED` and `Failed to fetch RSC payload`

### 2. Test Implementation Details

**Test Case: "should have correct mobile viewport @smoke"**

```
Sequence:
1. Get test project info using test.info()
2. Extract project name from test.info().project.name
3. Determine if mobile: projectName.includes('Mobile')
4. Get viewport size: page.viewportSize()
5. Handle null viewport case (shouldn't happen but defensive)
6. Log detection results for debugging
7. Branch on mobile detection:
   - If mobile: expect(viewport.width).toBeLessThan(500)
   - If desktop: expect(viewport.width).toBeGreaterThan(800)
```

**Logging Pattern:**
- Log format: `"Running mobile test on: {browserName} (mobile: {isMobile})"`
- Log viewport: `"Mobile viewport: {width}x{height}"` or `"Desktop viewport: {width}x{height}"`

### 3. Integration with Existing Test Infrastructure

**Use Existing Patterns:**
- Follow the test structure from `file:tests/e2e/test_dashboard.spec.ts`
- Use `setupErrorMonitoring()` and `checkTestErrors()` from `file:tests/e2e/test-utils.ts`
- Use `loginUser()` for authentication
- Navigate to project using environment variable `E2E_TEST_PROJECT_ID`

**Configuration:**
- Test will automatically run on all projects defined in `file:tests/e2e/playwright.config.ts`
- Mobile Chrome project uses `devices['Pixel 5']` (viewport: 393x851)
- Mobile Safari project uses `devices['iPhone 12']` (viewport: 390x844)
- Desktop projects use standard desktop viewports (1280x720)

### 4. Verification Strategy

The test should pass when:
- Running on Mobile Chrome project: detects mobile=true, asserts width < 500px (actual: 393px)
- Running on Mobile Safari project: detects mobile=true, asserts width < 500px (actual: 390px)
- Running on desktop projects: detects mobile=false, asserts width > 800px (actual: 1280px)

### 5. Test Execution

The test can be run using existing npm scripts:
- `npm run test:mobile` - Run only on Mobile Chrome and Mobile Safari
- `npm run test:smoke` - Run all smoke tests including this one on chromium
- `npm test` - Run on all projects (desktop + mobile)

## Visual Flow

```mermaid
sequenceDiagram
    participant Test as Mobile Smoke Test
    participant Playwright as Playwright Test Info
    participant Page as Browser Page
    participant Assertion as Test Assertion

    Test->>Playwright: test.info().project.name
    Playwright-->>Test: "Mobile Chrome" or "chromium"
    
    Test->>Test: Check if name includes 'Mobile'
    
    Test->>Page: page.viewportSize()
    Page-->>Test: { width: 393, height: 851 }
    
    alt Mobile Project
        Test->>Assertion: expect(width).toBeLessThan(500)
        Assertion-->>Test: ✅ Pass (393 < 500)
    else Desktop Project
        Test->>Assertion: expect(width).toBeGreaterThan(800)
        Assertion-->>Test: ✅ Pass (1280 > 800)
    end
```

## Key Files Referenced

- `file:tests/e2e/playwright.config.ts` - Mobile project configuration (lines 82-89)
- `file:tests/e2e/test-utils.ts` - Authentication and error monitoring utilities
- `file:tests/e2e/test_dashboard.spec.ts` - Reference for test structure patterns
- `file:tests/e2e/package.json` - Test scripts including `test:mobile`

---

Execution Information

Branch: main
Commit: 9b4790f

New Plan

Observations

The E2E test suite has Mobile Chrome and Mobile Safari projects configured in file:tests/e2e/playwright.config.ts (lines 82-89) using Playwright's device descriptors (Pixel 5 and iPhone 12). However, the test file test_mobile_smoke.spec.ts mentioned in the issue doesn't exist in the codebase. The issue describes a mobile viewport detection problem where tests incorrectly identify mobile browsers as desktop, causing viewport assertions to fail with actual mobile widths (~390px) being compared against desktop expectations (>800px).

The root cause is that page.context().isMobile returns false even when running on Mobile Chrome/Safari projects, likely because Playwright's context API doesn't properly reflect the device configuration. The fix requires checking the project name from test.info().project.name instead, which reliably identifies mobile projects by matching against "Mobile Chrome" and "Mobile Safari" strings.

Approach

Create a new mobile smoke test file that properly detects mobile projects using Playwright's test info API. The test will check the project name to determine if it's a mobile configuration, then assert appropriate viewport dimensions. This approach is more reliable than checking page.context().isMobile which appears to return false incorrectly. The implementation will follow existing E2E test patterns from file:tests/e2e/test_dashboard.spec.ts and use utilities from file:tests/e2e/test-utils.ts.

This is a future enhancement to improve mobile testing confidence and ensure viewport assertions work correctly across all project configurations.

Implementation Steps

1. Create Mobile Smoke Test File

Create file:tests/e2e/test_mobile_smoke.spec.ts with the following structure:

Test Setup:

• Import necessary Playwright test utilities and helpers from test-utils.ts
• Set up error monitoring in beforeEach hook using setupErrorMonitoring()
• Perform user login using loginUser() helper
• Navigate to a test project dashboard using E2E_TEST_PROJECT_ID environment variable

Mobile Detection Logic:

• Use test.info().project.name to check if the current project is mobile
• Detect mobile by checking if project name includes 'Mobile' (matches "Mobile Chrome" and "Mobile Safari" from config)
• Log the detected browser and mobile status for debugging
• This approach is more reliable than page.context().isMobile which returns false incorrectly

Viewport Assertions:

• For mobile projects: Assert viewport width < 500px (typical mobile range, actual: 390-393px)
• For desktop projects: Assert viewport width > 800px (typical desktop range, actual: 1280px)
• Get viewport using page.viewportSize() which returns { width, height } or null
• Handle null viewport case defensively (shouldn't occur but good practice)

Error Handling:

• Use checkTestErrors() in afterEach to verify no network errors occurred
• Filter expected errors like net::ERR_ABORTED and Failed to fetch RSC payload
• Follow error filtering pattern from file:tests/e2e/test_dashboard.spec.ts (lines 145-148)

2. Test Implementation Details

Test Case: "should have correct mobile viewport @smoke"

The test will execute the following sequence:

1. Get test project info using test.info()
2. Extract project name from test.info().project.name
3. Determine if mobile: projectName.includes('Mobile')
4. Get viewport size: page.viewportSize()
5. Handle null viewport case (shouldn't happen but defensive)
6. Log detection results for debugging
7. Branch on mobile detection:
   • If mobile: expect(viewport.width).toBeLessThan(500) (passes with actual 390-393px)
   • If desktop: expect(viewport.width).toBeGreaterThan(800) (passes with actual 1280px)

Logging Pattern:

• Log format: "Running mobile test on: {browserName} (mobile: {isMobile})"
• Log viewport: "Mobile viewport: {width}x{height}" or "Desktop viewport: {width}x{height}"
• Include project name in logs for debugging: "Project: {projectName}"

Test Tagging:

• Mark test with @smoke tag to include in smoke test runs
• Test will run on all projects: chromium, firefox, webkit, Mobile Chrome, Mobile Safari

3. Integration with Existing Test Infrastructure

Use Existing Patterns:

• Follow the test structure from file:tests/e2e/test_dashboard.spec.ts (lines 80-150)
• Use setupErrorMonitoring() and checkTestErrors() from file:tests/e2e/test-utils.ts (lines 64-216)
• Use loginUser() for authentication (lines 483-500)
• Navigate to project using environment variable E2E_TEST_PROJECT_ID (defaults to '1')

Configuration:

• Test will automatically run on all projects defined in file:tests/e2e/playwright.config.ts (lines 65-90)
• Mobile Chrome project uses devices['Pixel 5'] (viewport: 393x851)
• Mobile Safari project uses devices['iPhone 12'] (viewport: 390x844)
• Desktop projects (chromium, firefox, webkit) use standard desktop viewports (1280x720)

Test Execution:

• Test runs on all projects by default (no project filtering)
• Can be run with npm run test:mobile to test only mobile projects
• Can be run with npm run test:smoke to run all smoke tests
• Can be run with npm test to run on all projects

4. Verification Strategy

The test should pass when:

• Running on Mobile Chrome project: detects mobile=true, asserts width < 500px (actual: 393px) ✅
• Running on Mobile Safari project: detects mobile=true, asserts width < 500px (actual: 390px) ✅
• Running on desktop projects (chromium, firefox, webkit): detects mobile=false, asserts width > 800px (actual: 1280px) ✅

The test should fail with clear error messages if:

• Mobile project incorrectly detected as desktop (current bug)
• Viewport size doesn't match expected range
• Navigation or login fails

5. Test Execution

The test can be run using existing npm scripts:

• npm run test:mobile - Run only on Mobile Chrome and Mobile Safari
• npm run test:smoke - Run all smoke tests including this one on chromium
• npm test - Run on all projects (desktop + mobile)

6. Code Implementation

The test file will be structured as follows:

import { test, expect } from '@playwright/test';
import {
  loginUser,
  setupErrorMonitoring,
  checkTestErrors,
  ExtendedPage
} from './test-utils';

const FRONTEND_URL = process.env.FRONTEND_URL || 'http://localhost:3001';
const PROJECT_ID = process.env.E2E_TEST_PROJECT_ID || '1';

test.describe('Mobile Viewport Detection', () => {
  test.beforeEach(async ({ page }) => {
    // Setup error monitoring
    const errorMonitor = setupErrorMonitoring(page);
    (page as ExtendedPage).__errorMonitor = errorMonitor;

    // Login user
    await loginUser(page);

    // Navigate to project dashboard
    await page.goto(`${FRONTEND_URL}/projects/${PROJECT_ID}`);
    await page.waitForLoadState('networkidle');
  });

  test.afterEach(async ({ page }) => {
    // Check for network errors (filter expected ones)
    checkTestErrors(page, 'Mobile viewport test', [
      'net::ERR_ABORTED',
      'Failed to fetch RSC payload'
    ]);
  });

  test('should have correct mobile viewport @smoke', async ({ page }, testInfo) => {
    // Get project name from test info
    const projectName = testInfo.project.name;
    const isMobile = projectName.includes('Mobile');

    // Get viewport size
    const viewport = page.viewportSize();
    if (!viewport) {
      throw new Error('Viewport size is null');
    }

    // Log detection results
    console.log(`Running mobile test on: ${projectName} (mobile: ${isMobile})`);
    console.log(`Viewport: ${viewport.width}x${viewport.height}`);

    // Assert viewport based on project type
    if (isMobile) {
      console.log(`ℹ️ Mobile viewport: ${viewport.width}x${viewport.height}`);
      expect(viewport.width).toBeLessThan(500);
    } else {
      console.log(`ℹ️ Desktop viewport: ${viewport.width}x${viewport.height}`);
      expect(viewport.width).toBeGreaterThan(800);
    }
  });
});

This implementation:

• Uses testInfo.project.name to reliably detect mobile projects
• Follows existing test patterns from test_dashboard.spec.ts
• Includes proper error monitoring and cleanup
• Provides clear logging for debugging
• Handles both mobile and desktop projects correctly
• Fixes the root cause (incorrect mobile detection) rather than working around it

Visual Flow

sequenceDiagram
    participant Test as Mobile Smoke Test
    participant Playwright as Playwright Test Info
    participant Page as Browser Page
    participant Assertion as Test Assertion

    Test->>Playwright: test.info().project.name
    Playwright-->>Test: "Mobile Chrome" or "chromium"
    
    Test->>Test: Check if name includes 'Mobile'
    
    Test->>Page: page.viewportSize()
    Page-->>Test: { width: 393, height: 851 }
    
    alt Mobile Project
        Test->>Assertion: expect(width).toBeLessThan(500)
        Assertion-->>Test: ✅ Pass (393 < 500)
    else Desktop Project
        Test->>Assertion: expect(width).toBeGreaterThan(800)
        Assertion-->>Test: ✅ Pass (1280 > 800)
    end

Loading

Key Files Referenced

• file:tests/e2e/playwright.config.ts - Mobile project configuration (lines 82-89)
• file:tests/e2e/test-utils.ts - Authentication and error monitoring utilities
• file:tests/e2e/test_dashboard.spec.ts - Reference for test structure patterns
• file:tests/e2e/package.json - Test scripts including test:mobile

Import In IDE

🤖 Prompt for AI Agents

## Observations

The E2E test suite has Mobile Chrome and Mobile Safari projects configured in `file:tests/e2e/playwright.config.ts` (lines 82-89) using Playwright's device descriptors (`Pixel 5` and `iPhone 12`). However, the test file `test_mobile_smoke.spec.ts` mentioned in the issue doesn't exist in the codebase. The issue describes a mobile viewport detection problem where tests incorrectly identify mobile browsers as desktop, causing viewport assertions to fail with actual mobile widths (~390px) being compared against desktop expectations (>800px).

The root cause is that `page.context().isMobile` returns false even when running on Mobile Chrome/Safari projects, likely because Playwright's context API doesn't properly reflect the device configuration. The fix requires checking the project name from `test.info().project.name` instead, which reliably identifies mobile projects by matching against "Mobile Chrome" and "Mobile Safari" strings.

## Approach

Create a new mobile smoke test file that properly detects mobile projects using Playwright's test info API. The test will check the project name to determine if it's a mobile configuration, then assert appropriate viewport dimensions. This approach is more reliable than checking `page.context().isMobile` which appears to return false incorrectly. The implementation will follow existing E2E test patterns from `file:tests/e2e/test_dashboard.spec.ts` and use utilities from `file:tests/e2e/test-utils.ts`.

This is a future enhancement to improve mobile testing confidence and ensure viewport assertions work correctly across all project configurations.

## Implementation Steps

### 1. Create Mobile Smoke Test File

Create `file:tests/e2e/test_mobile_smoke.spec.ts` with the following structure:

**Test Setup:**
- Import necessary Playwright test utilities and helpers from `test-utils.ts`
- Set up error monitoring in `beforeEach` hook using `setupErrorMonitoring()`
- Perform user login using `loginUser()` helper
- Navigate to a test project dashboard using `E2E_TEST_PROJECT_ID` environment variable

**Mobile Detection Logic:**
- Use `test.info().project.name` to check if the current project is mobile
- Detect mobile by checking if project name includes 'Mobile' (matches "Mobile Chrome" and "Mobile Safari" from config)
- Log the detected browser and mobile status for debugging
- This approach is more reliable than `page.context().isMobile` which returns false incorrectly

**Viewport Assertions:**
- For mobile projects: Assert viewport width < 500px (typical mobile range, actual: 390-393px)
- For desktop projects: Assert viewport width > 800px (typical desktop range, actual: 1280px)
- Get viewport using `page.viewportSize()` which returns `{ width, height }` or null
- Handle null viewport case defensively (shouldn't occur but good practice)

**Error Handling:**
- Use `checkTestErrors()` in `afterEach` to verify no network errors occurred
- Filter expected errors like `net::ERR_ABORTED` and `Failed to fetch RSC payload`
- Follow error filtering pattern from `file:tests/e2e/test_dashboard.spec.ts` (lines 145-148)

### 2. Test Implementation Details

**Test Case: "should have correct mobile viewport @smoke"**

The test will execute the following sequence:

1. Get test project info using `test.info()`
2. Extract project name from `test.info().project.name`
3. Determine if mobile: `projectName.includes('Mobile')`
4. Get viewport size: `page.viewportSize()`
5. Handle null viewport case (shouldn't happen but defensive)
6. Log detection results for debugging
7. Branch on mobile detection:
   - If mobile: `expect(viewport.width).toBeLessThan(500)` (passes with actual 390-393px)
   - If desktop: `expect(viewport.width).toBeGreaterThan(800)` (passes with actual 1280px)

**Logging Pattern:**
- Log format: `"Running mobile test on: {browserName} (mobile: {isMobile})"`
- Log viewport: `"Mobile viewport: {width}x{height}"` or `"Desktop viewport: {width}x{height}"`
- Include project name in logs for debugging: `"Project: {projectName}"`

**Test Tagging:**
- Mark test with `@smoke` tag to include in smoke test runs
- Test will run on all projects: chromium, firefox, webkit, Mobile Chrome, Mobile Safari

### 3. Integration with Existing Test Infrastructure

**Use Existing Patterns:**
- Follow the test structure from `file:tests/e2e/test_dashboard.spec.ts` (lines 80-150)
- Use `setupErrorMonitoring()` and `checkTestErrors()` from `file:tests/e2e/test-utils.ts` (lines 64-216)
- Use `loginUser()` for authentication (lines 483-500)
- Navigate to project using environment variable `E2E_TEST_PROJECT_ID` (defaults to '1')

**Configuration:**
- Test will automatically run on all projects defined in `file:tests/e2e/playwright.config.ts` (lines 65-90)
- Mobile Chrome project uses `devices['Pixel 5']` (viewport: 393x851)
- Mobile Safari project uses `devices['iPhone 12']` (viewport: 390x844)
- Desktop projects (chromium, firefox, webkit) use standard desktop viewports (1280x720)

**Test Execution:**
- Test runs on all projects by default (no project filtering)
- Can be run with `npm run test:mobile` to test only mobile projects
- Can be run with `npm run test:smoke` to run all smoke tests
- Can be run with `npm test` to run on all projects

### 4. Verification Strategy

The test should pass when:
- Running on Mobile Chrome project: detects mobile=true, asserts width < 500px (actual: 393px) ✅
- Running on Mobile Safari project: detects mobile=true, asserts width < 500px (actual: 390px) ✅
- Running on desktop projects (chromium, firefox, webkit): detects mobile=false, asserts width > 800px (actual: 1280px) ✅

The test should fail with clear error messages if:
- Mobile project incorrectly detected as desktop (current bug)
- Viewport size doesn't match expected range
- Navigation or login fails

### 5. Test Execution

The test can be run using existing npm scripts:
- `npm run test:mobile` - Run only on Mobile Chrome and Mobile Safari
- `npm run test:smoke` - Run all smoke tests including this one on chromium
- `npm test` - Run on all projects (desktop + mobile)

### 6. Code Implementation

The test file will be structured as follows:

```typescript
import { test, expect } from '@playwright/test';
import {
  loginUser,
  setupErrorMonitoring,
  checkTestErrors,
  ExtendedPage
} from './test-utils';

const FRONTEND_URL = process.env.FRONTEND_URL || 'http://localhost:3001';
const PROJECT_ID = process.env.E2E_TEST_PROJECT_ID || '1';

test.describe('Mobile Viewport Detection', () => {
  test.beforeEach(async ({ page }) => {
    // Setup error monitoring
    const errorMonitor = setupErrorMonitoring(page);
    (page as ExtendedPage).__errorMonitor = errorMonitor;

    // Login user
    await loginUser(page);

    // Navigate to project dashboard
    await page.goto(`${FRONTEND_URL}/projects/${PROJECT_ID}`);
    await page.waitForLoadState('networkidle');
  });

  test.afterEach(async ({ page }) => {
    // Check for network errors (filter expected ones)
    checkTestErrors(page, 'Mobile viewport test', [
      'net::ERR_ABORTED',
      'Failed to fetch RSC payload'
    ]);
  });

  test('should have correct mobile viewport @smoke', async ({ page }, testInfo) => {
    // Get project name from test info
    const projectName = testInfo.project.name;
    const isMobile = projectName.includes('Mobile');

    // Get viewport size
    const viewport = page.viewportSize();
    if (!viewport) {
      throw new Error('Viewport size is null');
    }

    // Log detection results
    console.log(`Running mobile test on: ${projectName} (mobile: ${isMobile})`);
    console.log(`Viewport: ${viewport.width}x${viewport.height}`);

    // Assert viewport based on project type
    if (isMobile) {
      console.log(`ℹ️ Mobile viewport: ${viewport.width}x${viewport.height}`);
      expect(viewport.width).toBeLessThan(500);
    } else {
      console.log(`ℹ️ Desktop viewport: ${viewport.width}x${viewport.height}`);
      expect(viewport.width).toBeGreaterThan(800);
    }
  });
});
```

This implementation:
- Uses `testInfo.project.name` to reliably detect mobile projects
- Follows existing test patterns from `test_dashboard.spec.ts`
- Includes proper error monitoring and cleanup
- Provides clear logging for debugging
- Handles both mobile and desktop projects correctly
- Fixes the root cause (incorrect mobile detection) rather than working around it

## Visual Flow

```mermaid
sequenceDiagram
    participant Test as Mobile Smoke Test
    participant Playwright as Playwright Test Info
    participant Page as Browser Page
    participant Assertion as Test Assertion

    Test->>Playwright: test.info().project.name
    Playwright-->>Test: "Mobile Chrome" or "chromium"
    
    Test->>Test: Check if name includes 'Mobile'
    
    Test->>Page: page.viewportSize()
    Page-->>Test: { width: 393, height: 851 }
    
    alt Mobile Project
        Test->>Assertion: expect(width).toBeLessThan(500)
        Assertion-->>Test: ✅ Pass (393 < 500)
    else Desktop Project
        Test->>Assertion: expect(width).toBeGreaterThan(800)
        Assertion-->>Test: ✅ Pass (1280 > 800)
    end
```

## Key Files Referenced

- `file:tests/e2e/playwright.config.ts` - Mobile project configuration (lines 82-89)
- `file:tests/e2e/test-utils.ts` - Authentication and error monitoring utilities
- `file:tests/e2e/test_dashboard.spec.ts` - Reference for test structure patterns
- `file:tests/e2e/package.json` - Test scripts including `test:mobile`

---

Execution Information

Branch: main
Commit: 1260477

[frankbria]

Closing as part of v2 roadmap cleanup. This v1-specific issue is retained with the v1-legacy label as reference material for Phase 3 (Web UI rebuild). See the v2 strategic roadmap for current priorities.