end-to-end-testing

End-to-End Testing – DynamoHome

Playwright configuration

• Config file: playwright.config.js (testDir: './tests/e2e')
• Browser: Chromium only (Desktop Chrome profile)
• Base URL: http://localhost:8080 (dev server must be running)
• Timeouts: 30s per test, 5s for expect assertions
• Retries: 2 on CI, 0 locally
• Run tests: npm run test:e2e (targets all *.spec.ts files in tests/e2e/)
• Prerequisite: npm run start must be running (or configure the webServer in config which auto-starts it)

Required folder structure

tests/
  e2e/
    navigation.spec.ts       # Navigation tests — NO selectors, NO page.locator()
    sidebar.spec.ts          # Sidebar dropdown tests
    recent.spec.ts           # Recent page tests
    samples.spec.ts          # Samples page tests
    learning.spec.ts         # Learning page and carousel tests
    pages/
      RecentPage.ts          # Page class for Recent files page
      SamplesPage.ts         # Page class for Samples page
      LearningPage.ts        # Page class for Learning page
    components/
      Sidebar.ts             # Sidebar navigation component class
  unit/
    App.test.tsx             # Unit tests — separate from e2e
  jest.setup.ts              # Jest setup (not used by Playwright)
  __mocks__/                 # Jest mocks (not used by Playwright)

Page Object Model — mandatory pattern

Page class

// tests/e2e/pages/RecentPage.ts
import { Page, Locator } from '@playwright/test';

export class RecentPage {
  private readonly gridViewToggle: Locator;
  private readonly listViewToggle: Locator;
  private readonly graphCards: Locator;

  constructor(private page: Page) {
    this.gridViewToggle = page.locator('[data-testid="grid-view-toggle"]');
    this.listViewToggle = page.locator('[data-testid="list-view-toggle"]');
    this.graphCards = page.locator('[data-testid="graph-card"]');
  }

  async switchToGridView(): Promise<void> {
    await this.gridViewToggle.click();
  }

  async switchToListView(): Promise<void> {
    await this.listViewToggle.click();
  }

  async getGraphCount(): Promise<number> {
    return this.graphCards.count();
  }

  async openGraphByName(name: string): Promise<void> {
    await this.graphCards.filter({ hasText: name }).dblclick();
  }
}