playwright-automation

Use Playwright's locator priority: getByRole first, then getByLabel, getByPlaceholder, getByTestId, and getByText. Avoid CSS classes and deep XPath chains, which break when the design system or DOM structure changes.

Enable trace: 'on-first-retry' in playwright.config.ts, download the trace.zip artifact from CI, and open it with npx playwright show-trace. The trace shows the timeline, network calls, DOM snapshots, and console output at the failure point.

Use page.route with route.fulfill to return stubbed JSON for backend endpoints, isolating the UI from flaky services. Use route.continue to modify live traffic, and waitForResponse to assert the app called an API correctly.

Yes. Save the authenticated session once with page.context().storageState({ path: 'auth.json' }), then set storageState in playwright.config.ts so every test starts logged in without repeating the login flow.

Snapshot diffs usually come from dynamic content like timestamps or animations. Mask dynamic regions with the mask option, fix the viewport size, set reducedMotion: 'reduce', and run snapshot tests in a consistent CI container.

Do not mock the routes of the application under test itself — that defeats the purpose of end-to-end testing. Mock only external third-party dependencies and widgets you do not control.