E2e Testing

E2E Testing

End-to-end testing with Playwright and Cypress.

Tool Choice

Playwright Patterns

Selector Strategy (Priority Order)

1. getByRole() — best for accessibility
2. getByText() — for text content
3. getByTestId() — for complex components
4. getByLabel() — for form fields
5. locator(CSS) — last resort

Test Structure

test.describe('Checkout Flow', () => {
  test('completes purchase with valid card', async ({ page }) => {
    await page.goto('/products');
    await page.getByText('Add to Cart').first().click();
    await page.getByRole('button', { name: 'Checkout' }).click();
    await page.getByLabel('Card Number').fill('4242424242424242');
    await page.getByRole('button', { name: 'Pay' }).click();
    await expect(page.getByText('Thank you')).toBeVisible();
  });
});

Visual Testing

• Use await expect(page).toHaveScreenshot()
• Maintain baseline screenshots in version control
• Run visual tests on CI with 1% threshold
• Use percy.io or Chromatic for cloud-based visual review

CI Integration

# GitHub Actions
- name: E2E Tests
  run: npx playwright test
- uses: actions/upload-artifact
  if: failure()
  with:
    name: playwright-report
    path: playwright-report/