[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6H96CJD1JRJSDAJ2DZX0S3E":3,"skill-same:01M6H96CJD1JRJSDAJ2DZX0S3E":63},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":36,"linkOnly":37,"markdownContent":38,"markdownBody":39,"frontMatter":40,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":14,"repositoryHtmlUrl":45,"repositoryHomepageUrl":6,"ownerHtmlUrl":46,"ownerBlogUrl":6,"ownerDescription":47,"updatedAt":48,"install":49,"resources":62},"01M6H96CJD1JRJSDAJ2DZX0S3E","test-browser",null,"Run browser tests on pages affected by current PR or branch","drhazemibclc\u002Fplate","drhazemibclc","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F153584232?v=4","01M6H8X67MYG903V4N92MKWKYK","Hazem Ali Abd Elraouf","01M6H8X6C5TSX21P7HJVZVNFNQ",0,"MIT","https:\u002F\u002Fgithub.com\u002Fdrhazemibclc\u002Fplate\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Ftest-browser\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35],"test","browser","test browser","pr","run","branch","tests","pages","name","port","affected","number","2026-11-10 10:12:30",false,"---\nname: test-browser\ndescription: Run browser tests on pages affected by current PR or branch\nargument-hint: '[PR number, branch name, ''current'', or --port PORT]'\n---\n\n# Browser Test Command\n\n\u003Ccommand_purpose>Run end-to-end browser tests on pages affected by a PR or branch changes using agent-browser CLI.\u003C\u002Fcommand_purpose>\n\n## CRITICAL: Use agent-browser CLI Only\n\n**DO NOT use Chrome MCP tools (mcp__claude-in-chrome__*).**\n\nThis command uses the `agent-browser` CLI exclusively. The agent-browser CLI is a Bash-based tool from Vercel that runs headless Chromium. It is NOT the same as Chrome browser automation via MCP.\n\nIf you find yourself calling `mcp__claude-in-chrome__*` tools, STOP. Use `agent-browser` Bash commands instead.\n\n## Introduction\n\n\u003Crole>QA Engineer specializing in browser-based end-to-end testing\u003C\u002Frole>\n\nThis command tests affected pages in a real browser, catching issues that unit tests miss:\n- JavaScript integration bugs\n- CSS\u002Flayout regressions\n- User workflow breakages\n- Console errors\n\n## Prerequisites\n\n\u003Crequirements>\n- Local development server running (e.g., `bin\u002Fdev`, `rails server`, `npm run dev`)\n- agent-browser CLI installed (see Setup below)\n- Git repository with changes to test\n\u003C\u002Frequirements>\n\n## Setup\n\n**Check installation:**\n```bash\ncommand -v agent-browser >\u002Fdev\u002Fnull 2>&1 && echo \"Installed\" || echo \"NOT INSTALLED\"\n```\n\n**Install if needed:**\n```bash\nnpm install -g agent-browser\nagent-browser install  # Downloads Chromium (~160MB)\n```\n\nSee the `agent-browser` skill for detailed usage.\n\n## Main Tasks\n\n### 0. Verify agent-browser Installation\n\nBefore starting ANY browser testing, verify agent-browser is installed:\n\n```bash\ncommand -v agent-browser >\u002Fdev\u002Fnull 2>&1 && echo \"Ready\" || (echo \"Installing...\" && npm install -g agent-browser && agent-browser install)\n```\n\nIf installation fails, inform the user and stop.\n\n### 1. Ask Browser Mode\n\n\u003Cask_browser_mode>\n\nBefore starting tests, ask user if they want to watch the browser:\n\nUse AskUserQuestion with:\n- Question: \"Do you want to watch the browser tests run?\"\n- Options:\n  1. **Headed (watch)** - Opens visible browser window so you can see tests run\n  2. **Headless (faster)** - Runs in background, faster but invisible\n\nStore the choice and use `--headed` flag when user selects \"Headed\".\n\n\u003C\u002Fask_browser_mode>\n\n### 2. Determine Test Scope\n\n\u003Ctest_target> $ARGUMENTS \u003C\u002Ftest_target>\n\n\u003Cdetermine_scope>\n\n**If PR number provided:**\n```bash\ngh pr view [number] --json files -q '.files[].path'\n```\n\n**If 'current' or empty:**\n```bash\ngit diff --name-only main...HEAD\n```\n\n**If branch name provided:**\n```bash\ngit diff --name-only main...[branch]\n```\n\n\u003C\u002Fdetermine_scope>\n\n### 3. Map Files to Routes\n\n\u003Cfile_to_route_mapping>\n\nMap changed files to testable routes:\n\n| File Pattern | Route(s) |\n|-------------|----------|\n| `app\u002Fviews\u002Fusers\u002F*` | `\u002Fusers`, `\u002Fusers\u002F:id`, `\u002Fusers\u002Fnew` |\n| `app\u002Fcontrollers\u002Fsettings_controller.rb` | `\u002Fsettings` |\n| `app\u002Fjavascript\u002Fcontrollers\u002F*_controller.js` | Pages using that Stimulus controller |\n| `app\u002Fcomponents\u002F*_component.rb` | Pages rendering that component |\n| `app\u002Fviews\u002Flayouts\u002F*` | All pages (test homepage at minimum) |\n| `app\u002Fassets\u002Fstylesheets\u002F*` | Visual regression on key pages |\n| `app\u002Fhelpers\u002F*_helper.rb` | Pages using that helper |\n| `src\u002Fapp\u002F*` (Next.js) | Corresponding routes |\n| `src\u002Fcomponents\u002F*` | Pages using those components |\n\nBuild a list of URLs to test based on the mapping.\n\n\u003C\u002Ffile_to_route_mapping>\n\n### 4. Detect Dev Server Port\n\n\u003Cdetect_port>\n\nDetermine the dev server port using this priority order:\n\n**Priority 1: Explicit argument**\nIf the user passed a port number (e.g., `\u002Ftest-browser 5000` or `\u002Ftest-browser --port 5000`), use that port directly.\n\n**Priority 2: CLAUDE.md \u002F project instructions**\n```bash\n# Check CLAUDE.md for port references\ngrep -Eio '(port\\s*[:=]\\s*|localhost:)([0-9]{4,5})' CLAUDE.md 2>\u002Fdev\u002Fnull | grep -Eo '[0-9]{4,5}' | head -1\n```\n\n**Priority 3: package.json scripts**\n```bash\n# Check dev\u002Fstart scripts for --port flags\ngrep -Eo '\\-\\-port[= ]+[0-9]{4,5}' package.json 2>\u002Fdev\u002Fnull | grep -Eo '[0-9]{4,5}' | head -1\n```\n\n**Priority 4: Environment files**\n```bash\n# Check .env, .env.local, .env.development for PORT=\ngrep -h '^PORT=' .env .env.local .env.development 2>\u002Fdev\u002Fnull | tail -1 | cut -d= -f2\n```\n\n**Priority 5: Default fallback**\nIf none of the above yields a port, default to `3000`.\n\nStore the result in a `PORT` variable for use in all subsequent steps.\n\n```bash\n# Combined detection (run this)\nPORT=\"${EXPLICIT_PORT:-}\"\nif [ -z \"$PORT\" ]; then\n  PORT=$(grep -Eio '(port\\s*[:=]\\s*|localhost:)([0-9]{4,5})' CLAUDE.md 2>\u002Fdev\u002Fnull | grep -Eo '[0-9]{4,5}' | head -1)\nfi\nif [ -z \"$PORT\" ]; then\n  PORT=$(grep -Eo '\\-\\-port[= ]+[0-9]{4,5}' package.json 2>\u002Fdev\u002Fnull | grep -Eo '[0-9]{4,5}' | head -1)\nfi\nif [ -z \"$PORT\" ]; then\n  PORT=$(grep -h '^PORT=' .env .env.local .env.development 2>\u002Fdev\u002Fnull | tail -1 | cut -d= -f2)\nfi\nPORT=\"${PORT:-3000}\"\necho \"Using dev server port: $PORT\"\n```\n\n\u003C\u002Fdetect_port>\n\n### 5. Verify Server is Running\n\n\u003Ccheck_server>\n\nBefore testing, verify the local server is accessible using the detected port:\n\n```bash\nagent-browser open http:\u002F\u002Flocalhost:${PORT}\nagent-browser snapshot -i\n```\n\nIf server is not running, inform user:\n```markdown\n**Server not running on port ${PORT}**\n\nPlease start your development server:\n- Rails: `bin\u002Fdev` or `rails server`\n- Node\u002FNext.js: `npm run dev`\n- Custom port: `\u002Ftest-browser --port \u003Cyour-port>`\n\nThen run `\u002Ftest-browser` again.\n```\n\n\u003C\u002Fcheck_server>\n\n### 6. Test Each Affected Page\n\n\u003Ctest_pages>\n\nFor each affected route, use agent-browser CLI commands (NOT Chrome MCP):\n\n**Step 1: Navigate and capture snapshot**\n```bash\nagent-browser open \"http:\u002F\u002Flocalhost:${PORT}\u002F[route]\"\nagent-browser snapshot -i\n```\n\n**Step 2: For headed mode (visual debugging)**\n```bash\nagent-browser --headed open \"http:\u002F\u002Flocalhost:${PORT}\u002F[route]\"\nagent-browser --headed snapshot -i\n```\n\n**Step 3: Verify key elements**\n- Use `agent-browser snapshot -i` to get interactive elements with refs\n- Page title\u002Fheading present\n- Primary content rendered\n- No error messages visible\n- Forms have expected fields\n\n**Step 4: Test critical interactions**\n```bash\nagent-browser click @e1  # Use ref from snapshot\nagent-browser snapshot -i\n```\n\n**Step 5: Take screenshots**\n```bash\nagent-browser screenshot page-name.png\nagent-browser screenshot --full page-name-full.png  # Full page\n```\n\n\u003C\u002Ftest_pages>\n\n### 7. Human Verification (When Required)\n\n\u003Chuman_verification>\n\nPause for human input when testing touches:\n\n| Flow Type | What to Ask |\n|-----------|-------------|\n| OAuth | \"Please sign in with [provider] and confirm it works\" |\n| Email | \"Check your inbox for the test email and confirm receipt\" |\n| Payments | \"Complete a test purchase in sandbox mode\" |\n| SMS | \"Verify you received the SMS code\" |\n| External APIs | \"Confirm the [service] integration is working\" |\n\nUse AskUserQuestion:\n```markdown\n**Human Verification Needed**\n\nThis test touches the [flow type]. Please:\n1. [Action to take]\n2. [What to verify]\n\nDid it work correctly?\n1. Yes - continue testing\n2. No - describe the issue\n```\n\n\u003C\u002Fhuman_verification>\n\n### 8. Handle Failures\n\n\u003Cfailure_handling>\n\nWhen a test fails:\n\n1. **Document the failure:**\n   - Screenshot the error state: `agent-browser screenshot error.png`\n   - Note the exact reproduction steps\n\n2. **Ask user how to proceed:**\n   ```markdown\n   **Test Failed: [route]**\n\n   Issue: [description]\n   Console errors: [if any]\n\n   How to proceed?\n   1. Fix now - I'll help debug and fix\n   2. Create todo - Add to todos\u002F for later\n   3. Skip - Continue testing other pages\n   ```\n\n3. **If \"Fix now\":**\n   - Investigate the issue\n   - Propose a fix\n   - Apply fix\n   - Re-run the failing test\n\n4. **If \"Create todo\":**\n   - Create `{id}-pending-p1-browser-test-{description}.md`\n   - Continue testing\n\n5. **If \"Skip\":**\n   - Log as skipped\n   - Continue testing\n\n\u003C\u002Ffailure_handling>\n\n### 9. Test Summary\n\n\u003Ctest_summary>\n\nAfter all tests complete, present summary:\n\n```markdown\n## Browser Test Results\n\n**Test Scope:** PR #[number] \u002F [branch name]\n**Server:** http:\u002F\u002Flocalhost:${PORT}\n\n### Pages Tested: [count]\n\n| Route | Status | Notes |\n|-------|--------|-------|\n| `\u002Fusers` | Pass | |\n| `\u002Fsettings` | Pass | |\n| `\u002Fdashboard` | Fail | Console error: [msg] |\n| `\u002Fcheckout` | Skip | Requires payment credentials |\n\n### Console Errors: [count]\n- [List any errors found]\n\n### Human Verifications: [count]\n- OAuth flow: Confirmed\n- Email delivery: Confirmed\n\n### Failures: [count]\n- `\u002Fdashboard` - [issue description]\n\n### Created Todos: [count]\n- `005-pending-p1-browser-test-dashboard-error.md`\n\n### Result: [PASS \u002F FAIL \u002F PARTIAL]\n```\n\n\u003C\u002Ftest_summary>\n\n## Quick Usage Examples\n\n```bash\n# Test current branch changes (auto-detects port)\n\u002Ftest-browser\n\n# Test specific PR\n\u002Ftest-browser 847\n\n# Test specific branch\n\u002Ftest-browser feature\u002Fnew-dashboard\n\n# Test on a specific port\n\u002Ftest-browser --port 5000\n```\n\n## agent-browser CLI Reference\n\n**ALWAYS use these Bash commands. NEVER use mcp__claude-in-chrome__* tools.**\n\n```bash\n# Navigation\nagent-browser open \u003Curl>           # Navigate to URL\nagent-browser back                 # Go back\nagent-browser close                # Close browser\n\n# Snapshots (get element refs)\nagent-browser snapshot -i          # Interactive elements with refs (@e1, @e2, etc.)\nagent-browser snapshot -i --json   # JSON output\n\n# Interactions (use refs from snapshot)\nagent-browser click @e1            # Click element\nagent-browser fill @e1 \"text\"      # Fill input\nagent-browser type @e1 \"text\"      # Type without clearing\nagent-browser press Enter          # Press key\n\n# Screenshots\nagent-browser screenshot out.png       # Viewport screenshot\nagent-browser screenshot --full out.png # Full page screenshot\n\n# Headed mode (visible browser)\nagent-browser --headed open \u003Curl>      # Open with visible browser\nagent-browser --headed click @e1       # Click in visible browser\n\n# Wait\nagent-browser wait @e1             # Wait for element\nagent-browser wait 2000            # Wait milliseconds\n```\n","# Browser Test Command\n\n\u003Ccommand_purpose>Run end-to-end browser tests on pages affected by a PR or branch changes using agent-browser CLI.\u003C\u002Fcommand_purpose>\n\n## CRITICAL: Use agent-browser CLI Only\n\n**DO NOT use Chrome MCP tools (mcp__claude-in-chrome__*).**\n\nThis command uses the `agent-browser` CLI exclusively. The agent-browser CLI is a Bash-based tool from Vercel that runs headless Chromium. It is NOT the same as Chrome browser automation via MCP.\n\nIf you find yourself calling `mcp__claude-in-chrome__*` tools, STOP. Use `agent-browser` Bash commands instead.\n\n## Introduction\n\n\u003Crole>QA Engineer specializing in browser-based end-to-end testing\u003C\u002Frole>\n\nThis command tests affected pages in a real browser, catching issues that unit tests miss:\n- JavaScript integration bugs\n- CSS\u002Flayout regressions\n- User workflow breakages\n- Console errors\n\n## Prerequisites\n\n\u003Crequirements>\n- Local development server running (e.g., `bin\u002Fdev`, `rails server`, `npm run dev`)\n- agent-browser CLI installed (see Setup below)\n- Git repository with changes to test\n\u003C\u002Frequirements>\n\n## Setup\n\n**Check installation:**\n```bash\ncommand -v agent-browser >\u002Fdev\u002Fnull 2>&1 && echo \"Installed\" || echo \"NOT INSTALLED\"\n```\n\n**Install if needed:**\n```bash\nnpm install -g agent-browser\nagent-browser install  # Downloads Chromium (~160MB)\n```\n\nSee the `agent-browser` skill for detailed usage.\n\n## Main Tasks\n\n### 0. Verify agent-browser Installation\n\nBefore starting ANY browser testing, verify agent-browser is installed:\n\n```bash\ncommand -v agent-browser >\u002Fdev\u002Fnull 2>&1 && echo \"Ready\" || (echo \"Installing...\" && npm install -g agent-browser && agent-browser install)\n```\n\nIf installation fails, inform the user and stop.\n\n### 1. Ask Browser Mode\n\n\u003Cask_browser_mode>\n\nBefore starting tests, ask user if they want to watch the browser:\n\nUse AskUserQuestion with:\n- Question: \"Do you want to watch the browser tests run?\"\n- Options:\n  1. **Headed (watch)** - Opens visible browser window so you can see tests run\n  2. **Headless (faster)** - Runs in background, faster but invisible\n\nStore the choice and use `--headed` flag when user selects \"Headed\".\n\n\u003C\u002Fask_browser_mode>\n\n### 2. Determine Test Scope\n\n\u003Ctest_target> $ARGUMENTS \u003C\u002Ftest_target>\n\n\u003Cdetermine_scope>\n\n**If PR number provided:**\n```bash\ngh pr view [number] --json files -q '.files[].path'\n```\n\n**If 'current' or empty:**\n```bash\ngit diff --name-only main...HEAD\n```\n\n**If branch name provided:**\n```bash\ngit diff --name-only main...[branch]\n```\n\n\u003C\u002Fdetermine_scope>\n\n### 3. Map Files to Routes\n\n\u003Cfile_to_route_mapping>\n\nMap changed files to testable routes:\n\n| File Pattern | Route(s) |\n|-------------|----------|\n| `app\u002Fviews\u002Fusers\u002F*` | `\u002Fusers`, `\u002Fusers\u002F:id`, `\u002Fusers\u002Fnew` |\n| `app\u002Fcontrollers\u002Fsettings_controller.rb` | `\u002Fsettings` |\n| `app\u002Fjavascript\u002Fcontrollers\u002F*_controller.js` | Pages using that Stimulus controller |\n| `app\u002Fcomponents\u002F*_component.rb` | Pages rendering that component |\n| `app\u002Fviews\u002Flayouts\u002F*` | All pages (test homepage at minimum) |\n| `app\u002Fassets\u002Fstylesheets\u002F*` | Visual regression on key pages |\n| `app\u002Fhelpers\u002F*_helper.rb` | Pages using that helper |\n| `src\u002Fapp\u002F*` (Next.js) | Corresponding routes |\n| `src\u002Fcomponents\u002F*` | Pages using those components |\n\nBuild a list of URLs to test based on the mapping.\n\n\u003C\u002Ffile_to_route_mapping>\n\n### 4. Detect Dev Server Port\n\n\u003Cdetect_port>\n\nDetermine the dev server port using this priority order:\n\n**Priority 1: Explicit argument**\nIf the user passed a port number (e.g., `\u002Ftest-browser 5000` or `\u002Ftest-browser --port 5000`), use that port directly.\n\n**Priority 2: CLAUDE.md \u002F project instructions**\n```bash\n# Check CLAUDE.md for port references\ngrep -Eio '(port\\s*[:=]\\s*|localhost:)([0-9]{4,5})' CLAUDE.md 2>\u002Fdev\u002Fnull | grep -Eo '[0-9]{4,5}' | head -1\n```\n\n**Priority 3: package.json scripts**\n```bash\n# Check dev\u002Fstart scripts for --port flags\ngrep -Eo '\\-\\-port[= ]+[0-9]{4,5}' package.json 2>\u002Fdev\u002Fnull | grep -Eo '[0-9]{4,5}' | head -1\n```\n\n**Priority 4: Environment files**\n```bash\n# Check .env, .env.local, .env.development for PORT=\ngrep -h '^PORT=' .env .env.local .env.development 2>\u002Fdev\u002Fnull | tail -1 | cut -d= -f2\n```\n\n**Priority 5: Default fallback**\nIf none of the above yields a port, default to `3000`.\n\nStore the result in a `PORT` variable for use in all subsequent steps.\n\n```bash\n# Combined detection (run this)\nPORT=\"${EXPLICIT_PORT:-}\"\nif [ -z \"$PORT\" ]; then\n  PORT=$(grep -Eio '(port\\s*[:=]\\s*|localhost:)([0-9]{4,5})' CLAUDE.md 2>\u002Fdev\u002Fnull | grep -Eo '[0-9]{4,5}' | head -1)\nfi\nif [ -z \"$PORT\" ]; then\n  PORT=$(grep -Eo '\\-\\-port[= ]+[0-9]{4,5}' package.json 2>\u002Fdev\u002Fnull | grep -Eo '[0-9]{4,5}' | head -1)\nfi\nif [ -z \"$PORT\" ]; then\n  PORT=$(grep -h '^PORT=' .env .env.local .env.development 2>\u002Fdev\u002Fnull | tail -1 | cut -d= -f2)\nfi\nPORT=\"${PORT:-3000}\"\necho \"Using dev server port: $PORT\"\n```\n\n\u003C\u002Fdetect_port>\n\n### 5. Verify Server is Running\n\n\u003Ccheck_server>\n\nBefore testing, verify the local server is accessible using the detected port:\n\n```bash\nagent-browser open http:\u002F\u002Flocalhost:${PORT}\nagent-browser snapshot -i\n```\n\nIf server is not running, inform user:\n```markdown\n**Server not running on port ${PORT}**\n\nPlease start your development server:\n- Rails: `bin\u002Fdev` or `rails server`\n- Node\u002FNext.js: `npm run dev`\n- Custom port: `\u002Ftest-browser --port \u003Cyour-port>`\n\nThen run `\u002Ftest-browser` again.\n```\n\n\u003C\u002Fcheck_server>\n\n### 6. Test Each Affected Page\n\n\u003Ctest_pages>\n\nFor each affected route, use agent-browser CLI commands (NOT Chrome MCP):\n\n**Step 1: Navigate and capture snapshot**\n```bash\nagent-browser open \"http:\u002F\u002Flocalhost:${PORT}\u002F[route]\"\nagent-browser snapshot -i\n```\n\n**Step 2: For headed mode (visual debugging)**\n```bash\nagent-browser --headed open \"http:\u002F\u002Flocalhost:${PORT}\u002F[route]\"\nagent-browser --headed snapshot -i\n```\n\n**Step 3: Verify key elements**\n- Use `agent-browser snapshot -i` to get interactive elements with refs\n- Page title\u002Fheading present\n- Primary content rendered\n- No error messages visible\n- Forms have expected fields\n\n**Step 4: Test critical interactions**\n```bash\nagent-browser click @e1  # Use ref from snapshot\nagent-browser snapshot -i\n```\n\n**Step 5: Take screenshots**\n```bash\nagent-browser screenshot page-name.png\nagent-browser screenshot --full page-name-full.png  # Full page\n```\n\n\u003C\u002Ftest_pages>\n\n### 7. Human Verification (When Required)\n\n\u003Chuman_verification>\n\nPause for human input when testing touches:\n\n| Flow Type | What to Ask |\n|-----------|-------------|\n| OAuth | \"Please sign in with [provider] and confirm it works\" |\n| Email | \"Check your inbox for the test email and confirm receipt\" |\n| Payments | \"Complete a test purchase in sandbox mode\" |\n| SMS | \"Verify you received the SMS code\" |\n| External APIs | \"Confirm the [service] integration is working\" |\n\nUse AskUserQuestion:\n```markdown\n**Human Verification Needed**\n\nThis test touches the [flow type]. Please:\n1. [Action to take]\n2. [What to verify]\n\nDid it work correctly?\n1. Yes - continue testing\n2. No - describe the issue\n```\n\n\u003C\u002Fhuman_verification>\n\n### 8. Handle Failures\n\n\u003Cfailure_handling>\n\nWhen a test fails:\n\n1. **Document the failure:**\n   - Screenshot the error state: `agent-browser screenshot error.png`\n   - Note the exact reproduction steps\n\n2. **Ask user how to proceed:**\n   ```markdown\n   **Test Failed: [route]**\n\n   Issue: [description]\n   Console errors: [if any]\n\n   How to proceed?\n   1. Fix now - I'll help debug and fix\n   2. Create todo - Add to todos\u002F for later\n   3. Skip - Continue testing other pages\n   ```\n\n3. **If \"Fix now\":**\n   - Investigate the issue\n   - Propose a fix\n   - Apply fix\n   - Re-run the failing test\n\n4. **If \"Create todo\":**\n   - Create `{id}-pending-p1-browser-test-{description}.md`\n   - Continue testing\n\n5. **If \"Skip\":**\n   - Log as skipped\n   - Continue testing\n\n\u003C\u002Ffailure_handling>\n\n### 9. Test Summary\n\n\u003Ctest_summary>\n\nAfter all tests complete, present summary:\n\n```markdown\n## Browser Test Results\n\n**Test Scope:** PR #[number] \u002F [branch name]\n**Server:** http:\u002F\u002Flocalhost:${PORT}\n\n### Pages Tested: [count]\n\n| Route | Status | Notes |\n|-------|--------|-------|\n| `\u002Fusers` | Pass | |\n| `\u002Fsettings` | Pass | |\n| `\u002Fdashboard` | Fail | Console error: [msg] |\n| `\u002Fcheckout` | Skip | Requires payment credentials |\n\n### Console Errors: [count]\n- [List any errors found]\n\n### Human Verifications: [count]\n- OAuth flow: Confirmed\n- Email delivery: Confirmed\n\n### Failures: [count]\n- `\u002Fdashboard` - [issue description]\n\n### Created Todos: [count]\n- `005-pending-p1-browser-test-dashboard-error.md`\n\n### Result: [PASS \u002F FAIL \u002F PARTIAL]\n```\n\n\u003C\u002Ftest_summary>\n\n## Quick Usage Examples\n\n```bash\n# Test current branch changes (auto-detects port)\n\u002Ftest-browser\n\n# Test specific PR\n\u002Ftest-browser 847\n\n# Test specific branch\n\u002Ftest-browser feature\u002Fnew-dashboard\n\n# Test on a specific port\n\u002Ftest-browser --port 5000\n```\n\n## agent-browser CLI Reference\n\n**ALWAYS use these Bash commands. NEVER use mcp__claude-in-chrome__* tools.**\n\n```bash\n# Navigation\nagent-browser open \u003Curl>           # Navigate to URL\nagent-browser back                 # Go back\nagent-browser close                # Close browser\n\n# Snapshots (get element refs)\nagent-browser snapshot -i          # Interactive elements with refs (@e1, @e2, etc.)\nagent-browser snapshot -i --json   # JSON output\n\n# Interactions (use refs from snapshot)\nagent-browser click @e1            # Click element\nagent-browser fill @e1 \"text\"      # Fill input\nagent-browser type @e1 \"text\"      # Type without clearing\nagent-browser press Enter          # Press key\n\n# Screenshots\nagent-browser screenshot out.png       # Viewport screenshot\nagent-browser screenshot --full out.png # Full page screenshot\n\n# Headed mode (visible browser)\nagent-browser --headed open \u003Curl>      # Open with visible browser\nagent-browser --headed click @e1       # Click in visible browser\n\n# Wait\nagent-browser wait @e1             # Wait for element\nagent-browser wait 2000            # Wait milliseconds\n```\n",{"name":5,"description":7,"argument-hint":41},"[PR number, branch name, 'current', or --port PORT]","main","2af107c35457ccaaa2c99d5478745496095d3cf7",".codex\u002Fskills\u002Ftest-browser","https:\u002F\u002Fgithub.com\u002Fdrhazemibclc\u002Fplate","https:\u002F\u002Fgithub.com\u002Fdrhazemibclc","Certified Pediatrician and IBCLC","2026-03-22 21:33:09",{"source":8,"skillName":5,"commands":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add drhazemibclc\u002Fplate --skill test-browser",{"tool":55,"command":56},"bunx","bunx skills add drhazemibclc\u002Fplate --skill test-browser",{"tool":58,"command":59},"pnpm","pnpm dlx skills add drhazemibclc\u002Fplate --skill test-browser","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdrhazemibclc\u002Fplate\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Ftest-browser\u002FSKILL.md",true,[],[64,83,95,109,122,133],{"skillNo":65,"name":66,"nameZh":6,"description":67,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":68,"categories":69,"keywords":70,"publishedAt":36},"01M6H97EF29WFNJJJH91670GQ1","workflows-work","[DEPRECATED] Use \u002Fce:work instead — renamed for clarity.","https:\u002F\u002Fgithub.com\u002Fdrhazemibclc\u002Fplate\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fworkflows-work\u002FSKILL.md",[],[71,72,73,74,75,76,77,78,79,80,81,82],"workflows","work","workflows work","file","for","path","true","todo","specification","use","clarity","plan",{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":36},"01M6H97C6CZMYST83WEJN87CVS","workflows-review","[DEPRECATED] Use \u002Fce:review instead — renamed for clarity.","https:\u002F\u002Fgithub.com\u002Fdrhazemibclc\u002Fplate\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fworkflows-review\u002FSKILL.md",[],[90,91,71,81,27,92,29,75,93,77,35,94,32,80],"workflows review","review","github","latest","URL",{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":36},"01M6H97A2P4ZE58BKMVQBYAK3M","workflows-plan","[DEPRECATED] Use \u002Fce:plan instead — renamed for clarity.","https:\u002F\u002Fgithub.com\u002Fdrhazemibclc\u002Fplate\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fworkflows-plan\u002FSKILL.md",[],[71,102,82,103,104,75,77,105,106,81,107,108,80],"workflows plan","bug","improvement","feature","idea","report","bug report",{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":36},"01M6H9780WX39EB980F69WFHEQ","workflows-compound","[DEPRECATED] Use \u002Fce:compound instead — renamed for clarity.","https:\u002F\u002Fgithub.com\u002Fdrhazemibclc\u002Fplate\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fworkflows-compound\u002FSKILL.md",[],[116,117,71,77,118,75,119,80,120,81,121],"workflows compound","compound","context","about","fix","brief",{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":128,"publishedAt":36},"01M6H9761C1HS173TW6P4ZMCY2","workflows-brainstorm","[DEPRECATED] Use \u002Fce:brainstorm instead — renamed for clarity.","https:\u002F\u002Fgithub.com\u002Fdrhazemibclc\u002Fplate\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fworkflows-brainstorm\u002FSKILL.md",[],[129,71,130,81,131,80,75,77,132,105,106],"brainstorm","workflows brainstorm","explore","problem",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":142,"publishedAt":36},"01M6H971R100F94DW8NGC93KQ6","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002Fdrhazemibclc\u002Fplate\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fvercel-react-best-practices\u002FSKILL.md",[139],{"categoryNo":140,"categoryName":141,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[143,144,145,146,147,148,149,150,31,151,152,153,154,155,156,157,158,159,160,161],"vercel","react best practices","best practices","vercel react best practices","react","Next.js","data fetching","triggers","next","performance optimization","refactoring","Optimization","code","tasks","guidelines","react components","components","performance","writing"]