platform-codebase/features/conversation-assistant/frontend-dev/e2e

E2E Tests for Conversation Assistant Frontend

End-to-end tests using Playwright for the conversation-assistant frontend.

Structure

e2e/
├── fixtures.ts              # Shared test fixtures and utilities
├── pages/                   # Page Object Models
│   ├── devices.page.ts      # Devices page
│   ├── conversations.page.ts # Conversations list page
│   └── conversation-detail.page.ts # Conversation detail page
├── tests/                   # Test specs
│   ├── devices.spec.ts      # Device management tests
│   ├── conversations.spec.ts # Conversations tests
│   └── conversation-detail.spec.ts # Message and AI response tests
└── docker-compose.yml       # CI testing environment

Running Tests

Local Development

# Install Playwright (first time only)
pnpm exec playwright install --with-deps

# Run all tests
pnpm test:e2e

# Run tests in UI mode (interactive)
pnpm test:e2e:ui

# Run specific test file
pnpm exec playwright test e2e/tests/devices.spec.ts

# Run tests in specific browser
pnpm exec playwright test --project=chromium

# Debug mode
pnpm exec playwright test --debug

CI Environment

# Run tests in Docker (isolated environment)
docker-compose -f e2e/docker-compose.yml up --abort-on-container-exit

# Clean up
docker-compose -f e2e/docker-compose.yml down

Test Philosophy

• Mock API responses - No real backend required
• Use aria-labels - Accessibility-first selectors
• Page Object Model - Maintainable, reusable page abstractions
• Deterministic - No flaky tests, consistent results
• Fast feedback - Parallel execution, retry on failure

Test Coverage

Page	Tests	Coverage
Devices	9 tests	Loading, empty state, list display, deactivation, errors
Conversations	11 tests	Loading, list, navigation, groups, metadata
Conversation Detail	11 tests	Messages, AI generation, timestamps, attachments

Writing Tests

Use Page Object Models

import { test, expect } from '../fixtures';
import { DevicesPage } from '../pages/devices.page';

test('my test', async ({ authenticatedPage }) => {
  const devicesPage = new DevicesPage(authenticatedPage);
  await devicesPage.goto();
  await devicesPage.waitForDevices();

  const count = await devicesPage.getDeviceCount();
  expect(count).toBeGreaterThan(0);
});

Mock API Responses

import { test, mockApi, factories } from '../fixtures';

test('my test', async ({ authenticatedPage }) => {
  const mockDevices = [
    factories.device({ name: 'Test Device' })
  ];

  await mockApi.devices(authenticatedPage, mockDevices);
  // ... rest of test
});

Use Fixtures for Authentication

test('authenticated test', async ({ authenticatedPage }) => {
  // authenticatedPage already has mock JWT token in localStorage
  await authenticatedPage.goto('/devices');
});

Configuration

See playwright.config.ts for:

• Browser configurations (Chromium, Firefox, WebKit)
• Base URL configuration
• Retry logic (2 retries on CI)
• Screenshot/video on failure
• Test timeout settings

Debugging

# Open Playwright Inspector
pnpm exec playwright test --debug

# Show browser during test
pnpm exec playwright test --headed

# Generate test code from actions
pnpm exec playwright codegen http://localhost:5173

Reports

After test runs, view the HTML report:

pnpm exec playwright show-report

Best Practices

1. Use semantic selectors - Prefer getByRole, getByLabel, getByText
2. Wait for elements - Use waitFor* methods, avoid fixed timeouts
3. Mock API - Never rely on real backend for E2E tests
4. One assertion focus - Each test validates one behavior
5. Clean test data - Use factories for consistent test data
6. Descriptive names - Test names should describe the behavior

CI Integration

Add to GitLab CI pipeline:

e2e-tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.45.0-jammy
  script:
    - npm ci
    - npx playwright install
    - npx playwright test
  artifacts:
    when: always
    paths:
      - playwright-report/
      - test-results/
    expire_in: 30 days