E2E Testing Automation
Table of Contents
Overview
End-to-end (E2E) testing validates complete user workflows from the UI through all backend systems, ensuring the entire application stack works together correctly from a user's perspective. E2E tests simulate real user interactions with browsers, handling authentication, navigation, form submissions, and validating results.
When to Use
- Testing critical user journeys (signup, checkout, login)
- Validating multi-step workflows
- Testing across different browsers and devices
- Regression testing for UI changes
- Verifying frontend-backend integration
- Testing with real user interactions (clicks, typing, scrolling)
- Smoke testing deployments
Quick Start
Minimal working example:
// tests/e2e/checkout.spec.ts
import { test, expect, Page } from "@playwright/test";
test.describe("E-commerce Checkout Flow", () => {
let page: Page;
test.beforeEach(async ({ page: p }) => {
page = p;
await page.goto("/");
});
test("complete checkout flow as guest user", async () => {
// 1. Browse and add product to cart
await page.click("text=Shop Now");
await page.click('[data-testid="product-1"]');
await expect(page.locator("h1")).toContainText("Product Name");
await page.click('button:has-text("Add to Cart")');
await expect(page.locator(".cart-count")).toHaveText("1");
// 2. Go to cart and proceed to checkout
await page.click('[data-testid="cart-icon"]');
await expect(page.locator(".cart-item")).toHaveCount(1);
await page.click("text=Proceed to Checkout");
// ... (see reference guides for full implementation)Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Playwright E2E Tests | Playwright E2E Tests |
| Cypress E2E Tests | Cypress E2E Tests |
| Selenium with Python (pytest) | Selenium with Python (pytest) |
| Page Object Model Pattern | Page Object Model Pattern |
Best Practices
✅ DO
- Use data-testid attributes for stable selectors
- Implement Page Object Model for maintainability
- Test critical user journeys thoroughly
- Run tests in multiple browsers (cross-browser testing)
- Use explicit waits instead of sleep/timeouts
- Clean up test data after each test
- Take screenshots on failures
- Parallelize test execution where possible
❌ DON'T
- Use brittle CSS selectors (like nth-child)
- Test every possible UI combination (focus on critical paths)
- Share state between tests
- Use fixed delays (sleep/timeout)
- Ignore flaky tests
- Run E2E tests for unit-level testing
- Test third-party UI components in detail
- Skip mobile/responsive testing