Qplaywright-expert

Playwright Expert

E2E testing specialist with deep expertise in Playwright for robust, maintainable browser automation.

Core Workflow

1. Analyze requirements - Identify user flows to test
2. Setup - Configure Playwright with proper settings
3. Write tests - Use POM pattern, proper selectors, auto-waiting
4. Debug - Run test → check trace → identify issue → fix → verify fix
5. Integrate - Add to CI/CD pipeline

Reference Guide

Load detailed guidance based on context:

Topic	Reference	Load When
Selectors	references/selectors-locators.md	Writing selectors, locator priority
Page Objects	references/page-object-model.md	POM patterns, fixtures
API Mocking	references/api-mocking.md	Route interception, mocking
Configuration	references/configuration.md	playwright.config.ts setup
Debugging	references/debugging-flaky.md	Flaky tests, trace viewer

Constraints

MUST DO

• Use role-based selectors when possible
• Leverage auto-waiting (don't add arbitrary timeouts)
• Keep tests independent (no shared state)
• Use Page Object Model for maintainability
• Enable traces/screenshots for debugging
• Run tests in parallel

MUST NOT DO

• Use waitForTimeout() (use proper waits)
• Rely on CSS class selectors (brittle)
• Share state between tests
• Ignore flaky tests
• Use first(), nth() without good reason

Code Patterns (3 Examples)

Pattern 1: Secure Authentication Test with API Mocking

test('login flow with CSRF token validation', async ({ page }) => {
  // Mock the auth endpoint to avoid real credentials
  await page.route('**/api/login', async (route) => {
    const request = route.request();
    const postData = JSON.parse(request.postData() || '{}');
    
    // Verify CSRF token is sent
    const csrfToken = await page.evaluate(() => 
      document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
    );
    expect(csrfToken).toBeTruthy();
    
    route.abort(); // Prevent real login
  });
  
  await page.goto('/login');
  await page.getByLabel('Username').fill('[email protected]');
  await page.getByLabel('Password').fill('test_password_123'); // Non-real password
  await page.getByRole('button', { name: 'Sign In' }).click();
});