End-to-End Testing#

// tests/e2e/checkout.spec.js
import { test, expect } from '@playwright/test';

test('user can complete checkout flow', async ({ page }) => {
  // Navigate and add item to cart
  await page.goto('/products');
  await page.click('[data-testid="product-widget"]');
  await page.click('button:text("Add to Cart")');

  // 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('button:text("Checkout")');

  // Fill shipping information
  await page.fill('[name="address"]', '123 Test Street');
  await page.fill('[name="city"]', 'Barcelona');
  await page.fill('[name="zip"]', '08001');

  // Submit order
  await page.click('button:text("Place Order")');

  // Verify confirmation
  await expect(page.locator('.order-confirmation')).toBeVisible();
  await expect(page.locator('.order-id')).toContainText(/ORD-/);
});

// cypress/e2e/login.cy.js
describe('Login Flow', () => {
  beforeEach(() => {
    cy.visit('/login');
  });

  it('logs in with valid credentials', () => {
    cy.get('[data-testid="email-input"]').type('alice@example.com');
    cy.get('[data-testid="password-input"]').type('secure123');
    cy.get('[data-testid="login-button"]').click();

    cy.url().should('include', '/dashboard');
    cy.get('[data-testid="welcome-message"]')
      .should('contain', 'Welcome, Alice');
  });

  it('shows error for invalid credentials', () => {
    cy.get('[data-testid="email-input"]').type('alice@example.com');
    cy.get('[data-testid="password-input"]').type('wrong');
    cy.get('[data-testid="login-button"]').click();

    cy.get('[data-testid="error-message"]')
      .should('be.visible')
      .and('contain', 'Invalid credentials');
    cy.url().should('include', '/login');
  });
});

import requests

BASE_URL = "https://api.staging.example.com"

def test_full_order_lifecycle():
    # Create a user
    user = requests.post(f"{BASE_URL}/users", json={
        "name": "Test User",
        "email": f"test_{uuid4().hex[:8]}@example.com",
    }).json()

    # Create an order
    order = requests.post(f"{BASE_URL}/orders", json={
        "user_id": user["id"],
        "items": [{"sku": "WIDGET-001", "quantity": 2}],
    }).json()
    assert order["status"] == "pending"

    # Confirm payment
    payment = requests.post(f"{BASE_URL}/orders/{order['id']}/pay", json={
        "method": "card",
        "token": "tok_test_visa",
    }).json()
    assert payment["status"] == "confirmed"

    # Verify order updated
    updated = requests.get(f"{BASE_URL}/orders/{order['id']}").json()
    assert updated["status"] == "paid"

    # Cleanup
    requests.delete(f"{BASE_URL}/users/{user['id']}")

// test-helpers/seed.js
async function seedTestData() {
  const admin = await createUser({ role: 'admin', email: 'admin@test.com' });
  const product = await createProduct({ name: 'Widget', price: 9.99 });
  return { admin, product };
}

async function cleanupTestData({ admin, product }) {
  await deleteProduct(product.id);
  await deleteUser(admin.id);
}

// In tests
test.beforeEach(async () => {
  testData = await seedTestData();
});

test.afterEach(async () => {
  await cleanupTestData(testData);
});

# Before test suite: restore a known snapshot
pg_restore --clean --dbname=testdb ./fixtures/baseline.dump

# After test suite: no cleanup needed (next run restores again)

// Playwright — auto-waiting handles most timing issues
await page.click('button');  // Automatically waits for button to be clickable

// Explicit waits when needed
await page.waitForResponse('**/api/orders');
await expect(page.locator('.result')).toBeVisible({ timeout: 10000 });

// Retry flaky assertions
await expect(async () => {
  const response = await page.request.get('/api/status');
  expect(response.status()).toBe(200);
}).toPass({ timeout: 30000 });

# Python — retry decorator for API e2e tests
from tenacity import retry, stop_after_attempt, wait_fixed

@retry(stop=stop_after_attempt(3), wait=wait_fixed(2))
def wait_for_order_status(order_id, expected_status):
    response = requests.get(f"{BASE_URL}/orders/{order_id}")
    assert response.json()["status"] == expected_status

// Playwright visual comparison
test('homepage matches snapshot', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage.png', {
    maxDiffPixelRatio: 0.01,  // Allow 1% pixel difference
  });
});

test('dashboard renders correctly', async ({ page }) => {
  await page.goto('/dashboard');
  // Mask dynamic content (dates, counts)
  await expect(page.locator('.dashboard')).toHaveScreenshot({
    mask: [page.locator('.timestamp'), page.locator('.live-count')],
  });
});

// Playwright with axe-core
import AxeBuilder from '@axe-core/playwright';

test('homepage has no accessibility violations', async ({ page }) => {
  await page.goto('/');

  const results = await new AxeBuilder({ page }).analyze();

  expect(results.violations).toEqual([]);
});

test('form has proper labels', async ({ page }) => {
  await page.goto('/signup');

  const results = await new AxeBuilder({ page })
    .include('[data-testid="signup-form"]')
    .analyze();

  expect(results.violations).toEqual([]);
});

// Cypress with cypress-axe
describe('Accessibility', () => {
  it('home page passes a11y checks', () => {
    cy.visit('/');
    cy.injectAxe();
    cy.checkA11y();
  });

  it('navigation is keyboard accessible', () => {
    cy.visit('/');
    cy.get('nav a').first().focus();
    cy.focused().should('have.attr', 'href');
    cy.realPress('Tab');
    cy.focused().should('exist');
  });
});