E2E Testing#

End-to-end testing with Playwright and Cypress.

Tool Choice#

Factor	Playwright	Cypress
Language	JS/TS, Python, C#, Java	JS/TS only
Browser support	Chromium, Firefox, WebKit	Chromium, Firefox, WebKit
Iframe support	Native	Limited
Network mocking	Route API	intercept()
Parallel execution	Built-in	Dashboard required

Playwright Patterns#

Selector Strategy (Priority Order)#

getByRole() — best for accessibility
getByText() — for text content
getByTestId() — for complex components
getByLabel() — for form fields
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/

E2E Testing

E2E Testing#

Tool Choice#

Playwright Patterns#

Selector Strategy (Priority Order)#

Test Structure#

Visual Testing#

CI Integration#

More in Testing & QA

Test Strategy

Accessibility Testing

API Testing