Browser Testing With Screenshots

This wraps the browser-tools CLI suite from agent-tools into a visual testing workflow. You get Chrome DevTools Protocol commands for navigating, screenshotting, and interacting with web apps during development. The interactive element picker (browser-pick.js) is the standout here since it lets you click elements in the actual browser instead of hunting for selectors. Most useful when you're testing localhost apps and need visual confirmation that UI changes work, not just that the DOM exists. The setup requires cloning and installing agent-tools separately, so it's more dependency overhead than a pure Node testing framework, but the screenshot-driven approach makes it easier to debug what's actually rendering versus what you expected.

GitHub stars: 719
last updated: Jun 11, 2026

View on GitHub

Install

$ npx -y skills add agentworkforce/relay --skill browser-testing-with-screenshots --agent claude-code

Installs into .claude/skills of the current project.

Files

Browser Testing with Screenshots

Overview

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.

Prerequisites

REQUIRED: Install agent-tools from https://github.com/badlogic/agent-tools

# Clone and install agent-tools
git clone https://github.com/badlogic/agent-tools.git
cd agent-tools
# Follow installation instructions in the repository
# Ensure all executables (browser-start.js, browser-nav.js, etc.) are in your PATH

Verify installation:

# Check that browser tools are available
which browser-start.js
which browser-nav.js
which browser-screenshot.js

All browser-* commands referenced in this skill come from the agent-tools repository and must be properly installed and accessible in your system PATH.