| name | testing |
| description | mdeai testing: Vitest, Playwright, browser MCP, smoke, CI, evals. Use routing table. NOT for: TDD-only workflow (test-driven-development), MCP server failures (troubleshooting), dedicated load-test design. |
| title | Testing — mdeai.co toolchain + Claude-assisted layers |
| impact | HIGH |
| impactDescription | Vitest/Playwright/MCP recipes + generic layers + evals |
| tags | testing, vitest, playwright, evals, claude-code, e2e, mdeai |
| paths | ["src/**","tests/**","**/*.test.*","**/*.spec.*","playwright/**","e2e/**","vitest.config.*"] |
testing — mdeai.co + cross-stack test layers
When NOT to use
- Pure TDD discipline as the only goal →
test-driven-development skill
- Chrome DevTools MCP won’t connect →
troubleshooting skill
- Load / soak testing as the primary ask (no mdeai harness yet)—keep scope to shipped gates in CLAUDE.md
Pick the topic that matches the work, then load it.
| Intent | Read |
|---|
| Component tests, unit tests, jsdom, Vitest config, mocks | vitest.md |
| Playwright e2e, real browser, login flow, multi-step | playwright.md |
| Chrome DevTools MCP — traces, network panel, real-browser inspection | chrome-devtools skill + MCP (chrome-devtools-mcp @latest via claude mcp / plugin) |
| LCP / Core Web Vitals tuning under DevTools | debug-optimize-lcp skill when installed |
| MCP-driven preview-server browser testing (Claude Preview) | preview-mcp.md |
| Manual exploratory testing, dogfood session, bug discovery | exploratory.md |
| Choosing what to test (pyramid, ROI, coverage strategy) | references/testing-strategy.md |
| Common bug patterns / triage taxonomy | references/issue-taxonomy.md |
| Map of layers (unit → E2E → visual → mobile → agentic → evals) | references/testing-layers.md |
| Curated external links (subagents, marketplace, Anthropic eval docs) | references/resource-hub.md |
| MCP server itself failing to connect | troubleshooting skill |
Browser surfaces — pick one
Three distinct browser-control systems are available in this repo. They are NOT interchangeable; pick by the question being asked.
| Surface | Tool namespace | When to pick |
|---|
| chrome-devtools-mcp (Google's Chrome team, 29 tools) | requires install: claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest (or /plugin install chrome-devtools-mcp) | Numbers/perf required: performance traces, Lighthouse audits, network panel inspection, console error capture during a navigation, memory snapshots, repeatable headless flows that don't need login. |
Claude in Chrome (--chrome flag + browser extension) | mcp__Claude_in_Chrome__* | Real signed-in browser state required: Supabase auth, Google OAuth, Stripe Link wallet, Gmail/Notion drafting, anything behind a login or CAPTCHA. |
| Claude Preview MCP | mcp__Claude_Preview__* | Stateless preview-server smoke tests during a Vite feature loop — the four-state pattern, the 3-panel layout, mobile collapse, AI proposal cards. |
Picking rule: state required → Claude in Chrome · numbers/perf required → chrome-devtools-mcp · stateless verify → Claude Preview.
Claude in Chrome docs: Use Claude Code with Chrome (beta) — prerequisites (claude --chrome, extension), VS Code, troubleshooting.
Specialists for each surface (install separately — paths vary by Claude plugins / global skills):
chrome-devtools / chrome-devtools-cli — same MCP server; CLI variant for bash/CItroubleshooting — when an MCP server fails to start
mdeai recipes
| Job | Surface | Owner skill |
|---|
LCP regression on /coffee | chrome-devtools-mcp (performance_start_trace → performance_analyze_insight LCPBreakdown) | debug-optimize-lcp |
| Lighthouse audit on a Vercel preview URL | chrome-devtools-mcp (lighthouse_audit --mode navigation --device mobile) | mde-vercel |
| Bundle / Core Web Vitals trace | chrome-devtools-mcp | mde-vercel, debug-optimize-lcp |
| Supabase email/OAuth sign-in regression | Claude in Chrome | testing → playwright.md |
| Stripe Link checkout end-to-end | Claude in Chrome | mde-stripe, create-payment-credential |
| Shopify cart → checkout smoke | Claude in Chrome | mde-stripe (plus mdeai-commerce.md) |
| AI-proposal card four-state visual verify | Claude Preview MCP | testing → preview-mcp.md |
| RLS / 403 debugging during a UI flow | chrome-devtools-mcp (list_console_messages --types error + list_network_requests --resourceTypes Fetch) | mde-supabase, systematic-debugging |
| Console-error sweep before commit | chrome-devtools-cli inside /ship step 3 | testing (this skill) |
Repo-specific pointers (mdeai.co)
- Vitest entry:
npm run test (run once) / npm run test:watch
- Playwright is configured but no e2e tests exist yet (see CLAUDE.md "Known Issues")
- Required-states pattern in .claude/rules/style-guide.md: every data-fetching component handles loading/error/empty/success — tests must cover all four
- Preview server runs on port 8080 (
npm run dev)
Route by intent (task lifecycle)
| User need | Open |
|---|
| Task lifecycle Phase 4 routing | mde-task-lifecycle/testing.md |
| TDD discipline (red/green/refactor) | test-driven-development skill |
| Ship checklist + deploy gates | mde-task-lifecycle + /deploy-check command |
Decision tree (thin)
Goal
├─ Only choosing framework / layer / CI shape for a greenfield app → testing-layers.md
├─ External guides + subagent checklist → resource-hub.md
├─ This repo (Vitest, Playwright, Preview MCP, npm scripts) → vitest.md / playwright.md / preview-mcp.md
└─ Ship checklist + deploy gates → mde-task-lifecycle + /deploy-check
Principles (always)
- Fast feedback first — unit + lint before heavy E2E.
- One golden runner per layer per repo; don't mix incompatible assertion styles.
- Flakes are defects — fix or quarantine; don't mask with infinite retries.
- Agentic loops need fresh context — long chains degrade quality; reset or compact between batches (workflow notes).
- LLM evals need frozen rubrics — version the judge prompt and golden set like code.
- Security "light sweeps" ≠ pentest — escalate real assurance to specialists.
Quick framework peek
| Layer | Typical tools |
|---|
| Unit | Vitest, Jest, JUnit, XCTest |
| Web UI | Playwright, Cypress |
| Mobile | Detox, Appium, Espresso, XCUITest |
| API | Supertest, REST Assured, contract checks |
Full table + workflows → testing-layers.md.
Resources in this folder
examples/ — console logging, element discovery, static HTML automation snippetsscripts/with_server.py — wrap test runs around a dev servertemplates/ — dogfood session templates
Skill composition note
Authored using skill-creator conventions: thin SKILL.md, progressive disclosure via references/, explicit anti-triggers in YAML description.
