Quality Engineering

Ship reliable, accessible, performant software.

Quick Reference

Testing Stack (2026)

Type	Tool	Purpose
Unit	Vitest	Fast, Vite-native
Component	Testing Library	User-centric
E2E	Playwright	Cross-browser
API	Playwright API	Request testing
Visual	Playwright + Percy	Screenshot comparison
A11y	Axe-core	WCAG compliance
Performance	Lighthouse CI	Core Web Vitals

Vitest Setup

// vitest.config.ts
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./tests/setup.ts"],
    coverage: {
      provider: "v8",
      reporter: ["text", "json", "html"],
      exclude: ["node_modules", "tests"],
    },
  },
});

Writing Tests:

import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { UserProfile } from './UserProfile';

describe('UserProfile', () => {
  it('displays user name', () => {
    render(<UserProfile user={{ name: 'Alice' }} />);
    expect(screen.getByText('Alice')).toBeInTheDocument();
  });

  it('calls onEdit when button clicked', async () => {
    const onEdit = vi.fn();
    render(<UserProfile user={{ name: 'Alice' }} onEdit={onEdit} />);
    await userEvent.click(screen.getByRole('button', { name: /edit/i }));
    expect(onEdit).toHaveBeenCalledTimes(1);
  });
});

Playwright E2E

// tests/auth.spec.ts
import { test, expect } from "@playwright/test";

test.describe("Authentication", () => {
  test("user can log in", async ({ page }) => {
    await page.goto("/login");
    await page.getByLabel("Email").fill("user@example.com");
    await page.getByLabel("Password").fill("password123");
    await page.getByRole("button", { name: "Log in" }).click();

    await expect(page).toHaveURL("/dashboard");
    await expect(page.getByText("Welcome back")).toBeVisible();
  });
});

Page Object Pattern:

// pages/LoginPage.ts
export class LoginPage {
  constructor(private page: Page) {}

  async login(email: string, password: string) {
    await this.page.goto("/login");
    await this.page.getByLabel("Email").fill(email);
    await this.page.getByLabel("Password").fill(password);
    await this.page.getByRole("button", { name: "Log in" }).click();
  }
}

Accessibility Testing

Automated (catches ~50% of issues):

import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test("page should be accessible", async ({ page }) => {
  await page.goto("/");

  const results = await new AxeBuilder({ page }).withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"]).analyze();

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

WCAG Checklist:

## Perceivable

- [ ] All images have alt text
- [ ] Color is not the only indicator
- [ ] Contrast ratio ≥ 4.5:1 (text), ≥ 3:1 (large)
- [ ] Text can be resized to 200%

## Operable

- [ ] All functionality via keyboard
- [ ] No keyboard traps
- [ ] Skip links for navigation
- [ ] Focus indicators visible

## Understandable

- [ ] Language declared
- [ ] Error messages clear
- [ ] Labels on form inputs

## Robust

- [ ] Valid HTML
- [ ] ARIA used correctly
- [ ] Works with assistive tech

Core Web Vitals

Targets:

• LCP < 2.5s (Largest Contentful Paint)
• INP < 200ms (Interaction to Next Paint)
• CLS < 0.1 (Cumulative Layout Shift)

Lighthouse CI:

# lighthouserc.js
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000/', 'http://localhost:3000/about'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.9 }],
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'interactive': ['error', { maxNumericValue: 3500 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

CI Integration

# .github/workflows/quality.yml
name: Quality Gates
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4

      - name: Install
        run: pnpm install

      - name: Lint
        run: pnpm lint

      - name: Type Check
        run: pnpm typecheck

      - name: Unit Tests
        run: pnpm test:unit --coverage

      - name: E2E Tests
        run: pnpm test:e2e

      - name: Accessibility
        run: pnpm test:a11y

      - name: Upload Coverage
        uses: codecov/codecov-action@v4

Test Organization

tests/
├── unit/           # Fast, isolated
│   └── utils.test.ts
├── integration/    # Multiple units
│   └── api.test.ts
├── e2e/           # Full user flows
│   └── checkout.spec.ts
├── a11y/          # Accessibility
│   └── pages.a11y.ts
└── fixtures/      # Test data
    └── users.json

Code Review Checklist

## Functionality

- [ ] Code does what it's supposed to
- [ ] Edge cases handled
- [ ] Error handling appropriate

## Security

- [ ] No secrets in code
- [ ] Input validated
- [ ] Output escaped

## Performance

- [ ] No N+1 queries
- [ ] Expensive operations cached
- [ ] Bundle size acceptable

## Maintainability

- [ ] Code is readable
- [ ] Tests included
- [ ] Types correct

Agents

• test-writer-fixer - Test creation, maintenance, CI integration
• accessibility-specialist - WCAG compliance, inclusive design

Deep Dives

• references/testing-patterns.md
• references/playwright-guide.md
• references/accessibility-testing.md
• references/performance-optimization.md

Examples

• examples/vitest-setup/
• examples/playwright-suite/
• examples/a11y-testing/