browser-testing-with-screenshots
starsforks
How to install browser-testing-with-screenshots?
agentworkforce/relay/browser-testing-with-screenshots
$npx -y skills add AgentWorkforce/relay --skill browser-testing-with-screenshotsUse when testing web applications with visual verification - automates Chrome browser interactions, element selection, and screenshot capture for confirming UI functionality
SKILL.md
| 1 | # Browser Testing with Screenshots |
| 2 | |
| 3 | ## Overview |
| 4 | |
| 5 | **Automate Chrome browser testing with visual verification using browser-tools.** Connect to Chrome DevTools Protocol for navigation, interaction, and screenshot capture to confirm application functionality. |
| 6 | |
| 7 | ## Prerequisites |
| 8 | |
| 9 | **REQUIRED:** Install agent-tools from https://github.com/badlogic/agent-tools |
| 10 | |
| 11 | ```bash |
| 12 | # Clone and install agent-tools |
| 13 | git clone https://github.com/badlogic/agent-tools.git |
| 14 | cd agent-tools |
| 15 | # Follow installation instructions in the repository |
| 16 | # Ensure all executables (browser-start.js, browser-nav.js, etc.) are in your PATH |
| 17 | ``` |
| 18 | |
| 19 | **Verify installation:** |
| 20 | |
| 21 | ```bash |
| 22 | # Check that browser tools are available |
| 23 | which browser-start.js |
| 24 | which browser-nav.js |
| 25 | which browser-screenshot.js |
| 26 | ``` |
| 27 | |
| 28 | All browser-\* commands referenced in this skill come from the agent-tools repository and must be properly installed and accessible in your system PATH. |
| 29 | |
| 30 | ## When to Use |
| 31 | |
| 32 | **Use this skill when:** |
| 33 | |
| 34 | - Testing web application UI flows |
| 35 | - Verifying visual changes or layouts |
| 36 | - Automating repetitive browser interactions |
| 37 | - Documenting application behavior with screenshots |
| 38 | - Testing localhost applications during development |
| 39 | - Need to interact with elements that require human-like selection |
| 40 | |
| 41 | **Don't use for:** |
| 42 | |
| 43 | - API testing (use direct HTTP calls) |
| 44 | - Headless testing where visuals don't matter |
| 45 | - Simple page content validation (use curl/wget) |
| 46 | |
| 47 | ## Quick Reference |
| 48 | |
| 49 | | Task | Command | Purpose | |
| 50 | | --------------- | ------------------------------------------------ | ----------------------------- | |
| 51 | | Start browser | `browser-start.js` | Launch Chrome with debugging | |
| 52 | | Navigate | `browser-nav.js http://localhost:5172/dashboard` | Go to specific URL | |
| 53 | | Take screenshot | `browser-screenshot.js` | Capture current viewport | |
| 54 | | Pick elements | `browser-pick.js "Select the login button"` | Interactive element selection | |
| 55 | | Run JavaScript | `browser-eval.js 'document.title'` | Execute code in page context | |
| 56 | | Extract content | `browser-content.js` | Get readable page content | |
| 57 | | View cookies | `browser-cookies.js` | List session cookies | |
| 58 | |
| 59 | ## Setup and Basic Workflow |
| 60 | |
| 61 | ### 1. Start Chrome with Remote Debugging |
| 62 | |
| 63 | ```bash |
| 64 | # Launch Chrome with debugging enabled (preserves user profile) |
| 65 | browser-start.js |
| 66 | |
| 67 | # Or start fresh (no cookies, clean state) |
| 68 | browser-start.js --fresh |
| 69 | ``` |
| 70 | |
| 71 | **Expected Result**: Chrome opens on port 9222 with DevTools Protocol enabled |
| 72 | |
| 73 | ### 2. Navigate to Application |
| 74 | |
| 75 | ```bash |
| 76 | # Go to your application starting point |
| 77 | browser-nav.js http://localhost:5172/dashboard |
| 78 | ``` |
| 79 | |
| 80 | **Verify**: Browser navigates to dashboard page |
| 81 | |
| 82 | ### 3. Capture Baseline Screenshot |
| 83 | |
| 84 | ```bash |
| 85 | # Take initial screenshot to confirm page loaded |
| 86 | browser-screenshot.js |
| 87 | ``` |
| 88 | |
| 89 | **Output**: Returns path to screenshot file (e.g., `screenshot_20231203_141532.png`) |
| 90 | |
| 91 | ## Testing Workflow with Screenshots |
| 92 | |
| 93 | ### Complete Test Scenario Example |
| 94 | |
| 95 | ```bash |
| 96 | #!/bin/bash |
| 97 | # Test login and dashboard functionality |
| 98 | |
| 99 | echo "🚀 Starting browser test..." |
| 100 | |
| 101 | # 1. Launch browser |
| 102 | browser-start.js --fresh |
| 103 | |
| 104 | # 2. Navigate to login page |
| 105 | browser-nav.js http://localhost:5172/login |
| 106 | sleep 2 |
| 107 | |
| 108 | # 3. Take screenshot of login page |
| 109 | LOGIN_SHOT=$(browser-screenshot.js) |
| 110 | echo "📸 Login page: $LOGIN_SHOT" |
| 111 | |
| 112 | # 4. Fill login form (interactive element picking) |
| 113 | browser-pick.js "Click the username field" |
| 114 | browser-eval.js 'document.activeElement.value = "testuser"' |
| 115 | |
| 116 | browser-pick.js "Click the password field" |
| 117 | browser-eval.js 'document.activeElement.value = "password123"' |
| 118 | |
| 119 | # 5. Screenshot filled form |
| 120 | FORM_SHOT=$(browser-screenshot.js) |
| 121 | echo "📸 Filled form: $FORM_SHOT" |
| 122 | |
| 123 | # 6. Submit form |
| 124 | browser-pick.js "Click the login button" |
| 125 | sleep 3 |
| 126 | |
| 127 | # 7. Verify dashboard loaded |
| 128 | browser-nav.js http://localhost:5172/dashboard |
| 129 | DASHBOARD_SHOT=$(browser-screenshot.js) |
| 130 | echo "📸 Dashboard: $DASHBOARD_SHOT" |
| 131 | |
| 132 | # 8. Verify specific dashboard elements |
| 133 | browser-pick.js "Select the navigation menu" |
| 134 | browser-eval.js 'console.log("Navigation found:", !!document.querySelector(".nav"))' |
| 135 | |
| 136 | echo "✅ Test complete. Screenshots saved." |
| 137 | ``` |
| 138 | |
| 139 | ### Element Interaction Pattern |
| 140 | |
| 141 | ```bash |
| 142 | # Interactive element selection (best for dynamic content) |
| 143 | browser-pick.js "Select the submit button" |
| 144 | # User clicks element in browser → returns CSS selector |
| 145 | |
| 146 | # Use returned selector for automation |
| 147 | SELECTOR=$(browser-pick.js "Select the submit button" | grep "selector:") |
| 148 | browser-eval.js "document.querySelector('$SELECTOR').click()" |
| 149 | |
| 150 | # Take screenshot to verify action |
| 151 | browser-screenshot.js |
| 152 | ``` |
| 153 | |
| 154 | ## Advanced Usage |
| 155 | |
| 156 | ### JavaScript Evaluation for Complex Interactions |
| 157 | |
| 158 | ```ba |
People who liked this also viewed
6 picksType
- tddSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- test-driven-developmentUse when implementing any feature or bugfix, before writing implementation codeSkillsJul 2026
- qaSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- verification-before-completionUse when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidenceSkillsJul 2026
- webapp-testingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser lSkillsJul 2026
- playwright-best-practicesUse when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, teSkillsJul 2026
