Tools Quick Reference

Tool install/run commands, capability matrix, and Vitest/Playwright config snippets by testing level.

Tools by Testing Level

Level	Tools	Install	Run Command
1	vitest	`pnpm add -D vitest`	`pnpm vitest run`
1	jest	`pnpm add -D jest`	`pnpm jest`
1	vitest + Miniflare (backend/Workers)	`pnpm add -D vitest miniflare`	`pnpm vitest run`
1	vitest + @cloudflare/vitest-pool-workers (in-worker/Workers)	`pnpm add -D vitest @cloudflare/vitest-pool-workers`	`pnpm vitest run`
2	vitest + jsdom	`pnpm add -D vitest jsdom`	`pnpm vitest run`
2	vitest + happy-dom	`pnpm add -D vitest happy-dom`	`pnpm vitest run`
2	@testing-library/react	`pnpm add -D @testing-library/react`	(used in tests)
2	vitest browser mode (@vitest/browser + Playwright)	`pnpm add -D vitest @vitest/browser playwright`	`pnpm vitest run --project browser`
3	vitest (reading built files)	`pnpm add -D vitest`	`pnpm build && pnpm vitest run --project build`
3	cheerio + fs/path	`pnpm add -D cheerio`	(used in tests)
3 / 4	link check + html-validate (site-integrity gates)	`pnpm add -D html-validate`	`pnpm build && pnpm check:html && pnpm check:links`
4	Playwright	`pnpm add -D @playwright/test` then `npx playwright install --with-deps`	`npx playwright test`
4	headless-browser	(Claude Code skill)	`/headless-browser`
5	verify-ui	(Claude Code skill)	`/verify-ui`
5	headless-browser	(Claude Code skill)	`/headless-browser`
5	Playwright `toHaveScreenshot()` (visual regression baselines)	`pnpm add -D @playwright/test`	`npx playwright test --update-snapshots` (baseline) / `npx playwright test` (verify)
6	verify-ui-ai (final resort, not for CI)	(Claude Code skill)	`/verify-ui-ai`

Bare vitest starts watch mode and never exits -- use vitest run for one-shot/CI/agent runs. The @playwright/test package alone does not include browser binaries; playwright install --with-deps downloads them plus their OS-level dependencies.

Tool Capabilities Matrix

Capability	vitest	vitest+jsdom	Playwright	verify-ui	headless-browser
Pure function testing	Yes	Yes	--	--	--
DOM structure	--	Yes	Yes	--	--
User events	--	Yes	Yes	--	--
CSS computed styles	--	--	Yes	Yes	--
Visual screenshots	--	--	Yes	Yes	Yes
Console errors	--	--	Yes	--	Yes
Multi-page navigation	--	--	Yes	--	Yes
Build output	Yes	--	--	--	--
Responsive viewports	--	--	Yes	Yes	Yes

Vitest Configuration Quick Reference

Minimal unit test setup

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

export default defineConfig({
  test: {
    include: ["src/**/*.test.ts"],
  },
});

Component test setup (jsdom)

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

export default defineConfig({
  test: {
    environment: "jsdom",
    include: ["src/**/*.test.tsx"],
    setupFiles: ["./test-setup.ts"],
  },
});

Projects setup (multiple test types)

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

export default defineConfig({
  test: {
    projects: [
      {
        test: { name: "unit", include: ["src/**/*.test.ts"], environment: "node" },
      },
      {
        test: {
          name: "component",
          include: ["src/**/*.test.tsx"],
          environment: "jsdom",
        },
      },
      {
        test: {
          name: "build",
          include: ["tests/build/**/*.test.ts"],
          environment: "node",
        },
      },
    ],
  },
});

Playwright Configuration Quick Reference

Basic setup

// playwright.config.ts
import { defineConfig } from "@playwright/test";

export default defineConfig({
  testDir: "./e2e",
  use: {
    baseURL: "http://localhost:3000",
  },
  webServer: {
    command: "pnpm dev",
    port: 3000,
    reuseExistingServer: !process.env.CI,
  },
});

WebKit-only (for Tauri)

// playwright.config.ts
import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  projects: [
    { name: "webkit", use: { ...devices["Desktop Safari"] } },
  ],
});

Production build testing

// playwright.config.ts
import { defineConfig } from "@playwright/test";

export default defineConfig({
  webServer: {
    command: "pnpm build && pnpm preview",
    port: 4173,
    reuseExistingServer: !process.env.CI,
  },
});

Claude Code Skill Commands

Command	Level	Purpose
`/headless-browser`	4, 5	Take screenshots, check console errors, interact with pages
`/verify-ui`	5	Assert computed CSS values deterministically
`/verify-ui-ai`	6	AI-judged visual verdict when L4 is intractable AND L5 cannot reach the assertion -- never for CI
`/test-wisdom`	--	Get guidance on which testing level to use