Playwright test for navigation flow

[Onibenjo]

Done

Add e2e playwright test flow for navigation

[Driveby]:

• README file added with some docs about the tests

QA

• Check out the workflow and see it passes
• You can also checkout the branch and run the test locally with yarn test-e2e
• Run through the following QA steps
• [List additional steps to QA the new features or prove the bug has been resolved]

Issue / Card

Fixes # https://warthogs.atlassian.net/browse/WD-24182

Screenshots

[if relevant, include a screenshot]

[webteam-app]

Demo

Jenkins

demos.haus

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 77.20%. Comparing base (15dd033) to head (7ed9f73).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2114   +/-   ##
=======================================
  Coverage   77.20%   77.20%           
=======================================
  Files          16       16           
  Lines        1676     1676           
=======================================
  Hits         1294     1294           
  Misses        382      382           

Flag	Coverage Δ
python	77.20% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

This PR adds comprehensive end-to-end Playwright tests for the Canonical.com navigation system, covering primary navigation, dropdowns, search functionality, secondary navigation, mobile behavior, responsive design, and accessibility features.

Key Changes

• Added 426 lines of navigation test coverage across multiple test suites (structure, interactions, search, mobile, responsive, accessibility)
• Created reusable navigation helper functions and constants for test maintainability
• Enhanced HTML navigation template with accessibility improvements (aria-labels) and test-friendly IDs
• Updated Playwright configuration to support multiple test projects with separate test directories

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
tests/playwright/tests/navigation/navigation-flows.spec.ts	Main test file containing comprehensive E2E test suites for navigation flows, covering primary navigation structure, dropdown interactions, search functionality, secondary navigation, cross-linking, mobile behavior, responsive design, and accessibility
tests/playwright/helpers/navigation-helpers.ts	Helper functions and constants for navigation testing including viewport configurations, navigation items, and utility functions for interactions
tests/playwright/tests/navigation/README.md	Documentation describing test coverage, helper functions, viewport testing, and maintenance guidelines
templates/navigation/navigation.html	Added IDs to search buttons (mobile/desktop) and aria-labels to search form buttons for improved accessibility and testability
playwright.config.ts	Updated test directory from forms-specific to general tests directory and added separate projects for forms and navigation test suites
package.json	Added test-e2e npm script for running Playwright tests

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[samhotep]

@Onibenjo works well! I've just left a few comments

[samhotep]

LGTM!