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
- Locators
Bad: page.locator('.submit-btn')
Good: page.getByRole('button', { name: 'Submit' })
Why? Resilient to layout changes, accessible by default.
- 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.
- 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
-
Identify Flow: e.g., "User logs in and adds item to cart".
-
Scaffold Spec: Create tests/e2e/login.spec.ts .
-
Write Steps: Use TDD. Write the await expect(...) first.
-
Run Codegen (Optional): Use npx playwright codegen to capture selectors if stuck.
Debugging Flakes
-
Run with trace: npx playwright test --trace on .
-
View report: npx playwright show-report .
-
Check "Network" tab for failed API calls.
-
Check "Action" log for timeout reasons.