skills.rest
AgentWorkforce
AgentWorkforceOFFICIAL
Explore all skills by this author →
Website𝕏@agent_relayGitHub

browser-testing-with-screenshots

Automates Chrome browser interactions and screenshot capture for visual UI verification.

812|65|Updated Dec 17, 2025
Search Tags:#screenshots#web testing#Browser Testing#Automation#Chrome#UI verification#DevTools Protocol
One-click install
npx skills add https://github.com/AgentWorkforce/relay --skill browser-testing-with-screenshots
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-screenshots
Source: https://github.com/AgentWorkforce/relay/tree/main/.claude/skills/browser-testing-with-screenshots
Command: npx skills add https://github.com/AgentWorkforce/relay --skill browser-testing-with-screenshots

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agent-tools.

What problem does it solve?

Manually verifying web application UI behavior is slow and error-prone, especially when testing localhost applications during development. This Skill automates Chrome browser navigation, element interaction, and screenshot capture so you can visually confirm that pages, forms, and flows work as expected.

Core Features & Use Cases

  • Chrome DevTools Protocol Automation: Launch Chrome with remote debugging, navigate to URLs, and execute JavaScript in the page context using browser-tools commands.
  • Interactive Element Selection: Use browser-pick.js to let a human select dynamic elements once, then reuse the returned CSS selectors for reliable automation.
  • Screenshot-Based Verification: Capture timestamped screenshots at each test step to document UI state and catch visual regressions.
  • Use Case: While developing a dashboard on localhost:5172, run a scripted flow that logs in, navigates to the dashboard, and captures screenshots of each page to confirm the UI renders correctly after a code change.

Quick Start

Use the browser-testing-with-screenshots skill to start Chrome, navigate to my local app, and take screenshots verifying the login and dashboard pages work.

Frequently Asked Questions about browser-testing-with-screenshots

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate Chrome browser testing with screenshots?▼

Install the agent-tools repository, run browser-start.js to launch Chrome with remote debugging on port 9222, then use browser-nav.js to navigate and browser-screenshot.js to capture the viewport. Chain these commands in a shell script for repeatable test flows.

How to select dynamic elements for browser automation?▼

Use browser-pick.js with a natural language prompt like "Select the login button" to interactively click the element in Chrome. It returns a CSS selector you can reuse with browser-eval.js for automated clicks and form filling.

What prerequisites are needed for browser-tools automation?▼

You must clone and install the agent-tools repository from GitHub and ensure executables like browser-start.js, browser-nav.js, and browser-screenshot.js are in your system PATH. Chrome must be launchable with DevTools Protocol enabled on port 9222.

Why do my browser screenshots show a loading page?▼

Screenshots taken immediately after browser-nav.js capture the page before content finishes loading. Add a sleep of 2-5 seconds after navigation, or use browser-eval.js to wait for a specific element to appear before capturing.

When should I not use browser automation for testing?▼

Avoid browser automation for API testing, where direct HTTP calls are faster, and for simple content validation, where curl or wget suffices. It is designed for visual UI verification and interactions requiring human-like element selection.

Related Skills

Explore More Software Engineering Skills→
sluongngsluongng
6

chrome-devtools

Attach to a live Chrome session via the Chrome DevTools MCP server.

Community
Intermediate
kayroalexandrekayroalexandre

testing-test-results-analyzer

Analyze test result data to identify failure patterns and coverage gaps.

Community
Advanced
dachentdachent
18

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

Community
Advanced
limzivectorlimzivector

browse

Automate web page navigation, interactions, and visual regression tests with Playwright.

Community
Advanced