Page MenuHomePhabricator

Frontend Testing Suite (Comprehensive)
Closed, ResolvedPublic

Description

Domain: Coding

Difficulty: Difficult

Description:
The application requires a complete End-to-End (E2E) testing suite to verify that all routes and critical user interactions function correctly before release. This ticket involves writing Playwright specs for every page in the application, ensuring that navigation, data loading, and interactive elements (such as graphs and forms) function as expected.

  • Configuration: Finalize playwright.config.ts for multi-browser support (Chromium, Firefox, WebKit).
  • Scope: Create test files for all application routes:
  • Home (/): Verify load and search redirection.
  • Actor List (/actors): Verify search inputs, filtering, and list rendering.
  • Actor Details (/actors/[id]): Verify profile data, "Network Graph" rendering, and "Career Stats" loading.
  • Production List (/productions): Verify search inputs and grid layout.
  • Production Details (/productions/[id]): Verify cast list and metadata.
  • Compare (/compare): Verify the dual-search interaction and results generation.
  • Clusters (/clusters): Verify the clusters grid loads real data.
  • 404 Page: Verify that invalid URLs render the custom "Scene Not Found" page.
  • Navigation: Verify Header and Footer links work across all pages.

Expected Outcome:

  • A tests/e2e/ directory containing at least 8 distinct test spec files.
  • npx playwright test runs successfully with 0 failures.

Setup Steps:

  1. Global Setup:
  2. Verify playwright.config.ts uses the correct baseURL.
  1. Implement Test Specs:
  2. home.spec.ts: Test search bar functionality.
  3. actors.spec.ts: Test infinite scroll (if implemented) and search filtering.
  4. actor-details.spec.ts: Wait for canvas/graph to be visible.
  5. productions.spec.ts: Test switching between Production types (Movie/TV).
  6. compare.spec.ts: Automate selecting Actor A and Actor B.
  7. clusters.spec.ts: Verify cluster cards are present.
  8. navigation.spec.ts: Test Header/Footer links and the "Skip to Content" link.
  1. Run Suite:
  2. Execute the full suite locally to catch regressions.

Links/References:

Details

Related Changes in Gerrit:

Related Objects

Event Timeline

Essa237 updated the task description. (Show Details)

Change #1219729 had a related patch set uploaded (by Bovimacoco; author: Bovimacoco):

[labs/tools/WdTmCollab@main] Frontend Testing Suite (Comprehensive)

https://gerrit.wikimedia.org/r/1219729

Change #1219729 merged by jenkins-bot:

[labs/tools/WdTmCollab@main] Frontend Testing Suite (Comprehensive)

https://gerrit.wikimedia.org/r/1219729