메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
DEPRECATED — use the `linear` skill instead. "Manage Linear issues, projects, and teams"
DEPRECATED — use the `linear` skill instead. Create Linear issues. Use when creating bugs, tasks, or feature requests.
DEPRECATED — use the `linear` skill instead. Manage Linear documents. Use for creating and viewing documentation.
DEPRECATED — use the `linear` skill instead. Manage Linear labels. Use when creating, listing, or deleting labels.
DEPRECATED — use the `linear` skill instead. View Linear metrics. Use for velocity, burndown, and progress tracking.
DEPRECATED — use the `linear` skill instead. Manage project milestones - create, update, track target dates. Use when planning project deliverables.
| 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.*"] |
test-driven-development skilltroubleshooting skillPick 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 |
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| 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) |
npm run test (run once) / npm run test:watchnpm run dev)| 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 |
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
| 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.
examples/ — console logging, element discovery, static HTML automation snippetsscripts/with_server.py — wrap test runs around a dev servertemplates/ — dogfood session templatesAuthored using skill-creator conventions: thin SKILL.md, progressive disclosure via references/, explicit anti-triggers in YAML description.