playwright-e2e-testing

Install @playwright/test, create *.spec.ts files, and import test and expect from @playwright/test. Use role-based locators like getByRole and getByLabel, then assert with web-first assertions such as toBeVisible and toHaveURL that auto-retry.

Use page.route() with a glob pattern like '**/api/users' and call route.fulfill() with a custom status and JSON body. This intercepts network requests before they reach the server, enabling deterministic tests of error and loading states.

Prioritize getByRole with accessible names, then getByLabel, getByPlaceholder, getByText, and getByTestId. Avoid CSS selectors for interactive elements because they break when styles or markup are refactored.

Flakiness usually comes from race conditions, animations, or manual waits like page.waitForTimeout(). Replace fixed waits with web-first assertions and specific waitFor conditions, structure flows with test.step(), and disable animations in test environments.

Yes. Set viewport sizes with page.setViewportSize() or use device descriptors like devices['Pixel 5'] in playwright.config.ts projects. You can loop over mobile, tablet, and desktop dimensions to verify responsive behavior such as hamburger menus.

Run with PWDEBUG=1 or npx playwright test --debug to open the Inspector and step through actions. Enable trace: 'on-first-retry' in the config, then inspect traces, screenshots, and videos captured on failure.