E2E Testing Automation Skill

E2E Testing Automation

Overview
When to Use
Quick Start
Reference Guides
Best Practices

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

Agent Skills: E2E Testing Automation

Install this agent skill to your local

Skill Files