e2e-testing

Create a class per page that exposes locators as readonly properties and actions as async methods, then instantiate it in test.beforeEach. This keeps selectors centralized so UI changes require updates in only one place.

Replace arbitrary waitForTimeout calls with auto-waiting locators and waitForResponse assertions on specific API calls. Identify flaky tests by running with --repeat-each=10, then quarantine them with test.fixme while fixing the underlying race condition.

Use a workflow that checks out the repo, installs dependencies with npm ci, runs npx playwright install --with-deps, then executes npx playwright test. Upload the playwright-report folder as an artifact with actions/upload-artifact so results persist after the run.

Yes, Playwright projects in the config file run the same tests against chromium, firefox, webkit, and mobile device profiles like Pixel 5. Each project can have its own device settings and viewport configuration.

Timeouts usually occur when clicking elements during animations or before network requests complete. Fix this by waiting for element visibility, waiting for load state networkidle, or asserting on specific API responses before interacting.

Set screenshot to 'only-on-failure', video to 'retain-on-failure', and trace to 'on-first-retry' in the use block of playwright.config.ts. Artifacts are saved automatically and can be uploaded as CI artifacts for debugging.