QA Automation Engineer

test('login works', async ({ page }) => {
  await page.fill('#email', '[email protected]');
  await page.fill('#password', 'pass123');
  await page.click('.btn-primary');
});

class LoginPage {
  constructor(private page: Page) {}
  
  async login(email: string, password: string) {
    await this.page.fill('[data-testid="email"]', email);
    await this.page.fill('[data-testid="password"]', password);
    await this.page.click('[data-testid="login-button"]');
  }
}

test('login works', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.login('[email protected]', 'pass123');
  await expect(page).toHaveURL('/dashboard');
});

test('user can update profile', async ({ page }) => {
  // Create fresh user for this test
  const user = await createTestUser();
  
  await loginPage.login(user.email, user.password);
  await profilePage.updateName('New Name');
  
  // Cleanup
  await deleteTestUser(user.id);
});

// ❌ BAD
await page.click('button');
await page.waitForTimeout(2000);

// ✅ GOOD
await page.click('button');
await expect(page.locator('.success-message')).toBeVisible();

Requirement: Test full checkout process

[QA Automation Engineer builds]

```typescript
import { test, expect } from '@playwright/test';
import { ProductPage } from './pages/ProductPage';
import { CartPage } from './pages/CartPage';
import { CheckoutPage } from './pages/CheckoutPage';

test.describe('Checkout Flow', () => {
  test('complete purchase with valid card', async ({ page }) => {
    // Arrange: Create test user and product
    const user = await createTestUser();
    const product = await createTestProduct({ price: 50 });
    
    // Act: Navigate and add to cart
    const productPage = new ProductPage(page);
    await productPage.goto(product.id);
    await productPage.addToCart();
    
    // Proceed to checkout
    const cartPage = new CartPage(page);
    await cartPage.proceedToCheckout();
    
    // Fill checkout form
    const checkoutPage = new CheckoutPage(page);
    await checkoutPage.fillShippingInfo({
      name: 'Test User',
      address: '123 Test St',
      city: 'TestCity',
      zip: '12345'
    });
    
    await checkoutPage.fillPaymentInfo({
      cardNumber: '4242424242424242',
      expiry: '12/25',
      cvc: '123'
    });
    
    await checkoutPage.submitOrder();
    
    // Assert: Order confirmation
    await expect(page.locator('.order-success')).toBeVisible();
    await expect(page.locator('.order-number')).toContainText('ORDER-');
    
    // Cleanup
    await deleteTestUser(user.id);
  });
  
  test('shows error for invalid card', async ({ page }) => {
    // ... similar setup
    
    await checkoutPage.fillPaymentInfo({
      cardNumber: '0000000000000000', // Invalid
      expiry: '12/25',
      cvc: '123'
    });
    
    await checkoutPage.submitOrder();
    
    await expect(page.locator('.error-message'))
      .toContainText('Invalid card number');
  });
  
  test('handles slow network gracefully', async ({ page }) => {
    // Simulate slow 3G
    await page.route('**/*', route => {
      setTimeout(() => route.continue(), 2000);
    });
    
    // Test should still work, just slower
    await checkoutPage.submitOrder();
    await expect(page.locator('.loading')).toBeVisible();
    await expect(page.locator('.order-success')).toBeVisible({ timeout: 10000 });
  });
});

### Use Case 2: Setting Up CI Pipeline

# .github/workflows/e2e-tests.yml
name: E2E Tests

on:
  pull_request:
    branches: [main]
  push:
    branches: [main]

jobs:
  e2e:
    runs-on: ubuntu-latest
    
    services:
      postgres:
        image: postgres:15
        env:
          POSTGRES_PASSWORD: postgres
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Install Playwright browsers
        run: npx playwright install --with-deps
      
      - name: Run migrations
        run: npm run db:migrate
        env:
          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/test
      
      - name: Build application
        run: npm run build
      
      - name: Run E2E tests
        run: npm run test:e2e
        env:
          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/test
      
      - name: Upload test results
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: playwright-report
          path: playwright-report/

## Interaction with Other Agents

| Agent | You Ask Them For | They Ask You For |
|-------|------------------|------------------|
| `test-engineer` | Unit test gaps | E2E coverage reports |
| `devops-engineer` | Pipeline resources | Pipeline scripts |
| `backend-specialist` | Test data APIs | Bug reproduction steps |

## Review Checklist

- [ ] Tests use Page Object Model
- [ ] Data isolation (no shared state)
- [ ] Deterministic waits (no arbitrary timeouts)
- [ ] Happy and unhappy paths covered
- [ ] Visual regression configured
- [ ] CI pipeline runs tests automatically
- [ ] Flaky tests identified and fixed

## Best Practices

<CardGroup cols={2}>
  <Card title="Page Object Model" icon="sitemap">
    Abstract selectors into reusable page classes
  </Card>
  <Card title="Data Isolation" icon="vial">
    Each test creates and cleans up its own data
  </Card>
  <Card title="Deterministic Waits" icon="clock">
    Wait for conditions, not arbitrary timeouts
  </Card>
  <Card title="Test the Chaos" icon="tornado">
    Simulate errors, slow networks, and edge cases
  </Card>
</CardGroup>

## Automatic Selection Triggers

QA Automation Engineer is automatically selected when:
- User mentions "e2e", "playwright", "cypress", "automated test"
- CI/CD pipeline work is needed
- User asks about "regression", "visual testing"
- Complex user flow testing required

## Related Agents

<CardGroup cols={2}>
  <Card title="Test Engineer" icon="vial" href="/agents/test-engineer">
    Focuses on unit and integration tests
  </Card>
  <Card title="DevOps Engineer" icon="server" href="/agents/devops-engineer">
    Sets up CI/CD infrastructure
  </Card>
</CardGroup>