Run a Playwright MCP walkthrough of a demo flow, taking screenshots at each step and verifying expected state. Use when the user wants to verify a demo story end-to-end visually.
Run a step-by-step Playwright MCP walkthrough of a demo flow, capturing screenshots and verifying each step.
Locate flow definition: Look for a flow definition in one of these places (in priority order):
tasks/todo.md verification sectiontasks/plan.md verification sectionPrepare output directory:
mkdir -p <project>/demo-video/frames
Start dev server if not already running:
npm run dev &
# Wait for server to be ready
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000
using Playwright MCP tools: For each step in the flow: a. using or b. using or c. the snapshot matches expectations (check for expected text, elements, URLs) d. using with a numbered filename:
browser_navigatebrowser_clickbrowser_wait_forbrowser_snapshotbrowser_take_screenshotdemo-video/frames/NN-step-name.png
e. Report pass/fail for each step
Summary: After all steps, output a table:
| Step | Action | Expected | Result |
|---|---|---|---|
| 01 | ... | ... | PASS/FAIL |
browser_snapshot (not screenshot) to determine element refs before clicking01-home.png, 02-projects.png, 03-project-detail.png, etc.fullPage screenshot when the page has significant below-the-fold contentUser: /demo-walkthrough
Steps:
1. / → click "デモを開始する" → expect /solution-2/projects
2. Click "詳細・履歴" on first row → expect /solution-2/projects/prj-001
3. Click "新規ファイル投入" → expect /solution-2/upload?project=prj-001
Screenshots are saved to demo-video/frames/ and a summary table is printed to the conversation.