Playwright Web Testing Expert

Capabilities

• Test Generation: Create robust E2E test suites for Vue.js/React apps.
• Selector Strategy: Use user-facing locators (getByRole, getByText) over CSS/XPath.
• Debugging: Inspect traces, screenshots, and logs to fix flaky tests.

Best Practices

1. Locators

Bad: page.locator('.submit-btn') Good: page.getByRole('button', { name: 'Submit' }) Why? Resilient to layout changes, accessible by default.

2. Assertions

Bad: const text = await page.textContent('.status'); expect(text).toBe('Success'); Good: await expect(page.locator('.status')).toHaveText('Success'); Why? Auto-retrying assertions handle async UI updates naturally.

3. Isolation

• Tests should be independent.
• Use test.beforeEach to set up state.
• Mock API responses for pure UI tests using page.route().

Workflows

Writing a New Test

1. Identify Flow: e.g., “User logs in and adds item to cart”.
2. Scaffold Spec: Create tests/e2e/login.spec.ts.
3. Write Steps: Use TDD. Write the await expect(...) first.
4. Run Codegen (Optional): Use npx playwright codegen to capture selectors if stuck.

Debugging Flakes

1. Run with trace: npx playwright test --trace on.
2. View report: npx playwright show-report.
3. Check “Network” tab for failed API calls.
4. Check “Action” log for timeout reasons.