Agent skills
browser-testing

Agent skill

browser-testing

Browser automation, testing, and debugging using Chrome DevTools. Use when users want to take screenshots, test websites, debug UI, inspect network requests, check console errors, or automate browser interactions.

View SKILL.md on GitHub Repository

Stars 0

Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/syz51/claude-code-settings/tree/main/skills/browser-testing

SKILL.md

Browser Testing

Browser automation via Chrome DevTools Protocol using chrome-devtools-mcp.

Prerequisites

Bun: curl -fsSL https://bun.sh/install | bash
uv: Already installed

Important: UID-Based Interactions

This tool uses element UIDs from snapshots for interactions (click, fill, hover), NOT CSS selectors.

Workflow:

Navigate to page
Take snapshot to get element UIDs
Use UIDs for click/fill/hover

Usage

bash

cd /Users/roy/.claude/skills/browser-testing
uv run python scripts/browser.py <command> [args]

Commands

Navigation

bash

# Navigate to URL
uv run python scripts/browser.py navigate --url https://example.com

# Back/forward/reload
uv run python scripts/browser.py navigate --back
uv run python scripts/browser.py navigate --forward
uv run python scripts/browser.py navigate --reload --ignore-cache

# New page
uv run python scripts/browser.py new-page https://google.com

# List/select/close pages
uv run python scripts/browser.py list-pages
uv run python scripts/browser.py select-page 1 --bring-to-front
uv run python scripts/browser.py close-page 0

# Wait for text
uv run python scripts/browser.py wait-for "Success" --timeout 5000

Debug

bash

# Screenshot
uv run python scripts/browser.py screenshot --save-path ./shot.png
uv run python scripts/browser.py screenshot --full-page --save-path ./full.png

# Snapshot (get element UIDs for interactions)
uv run python scripts/browser.py snapshot
uv run python scripts/browser.py snapshot --verbose

# Eval JavaScript (must be function syntax)
uv run python scripts/browser.py eval "() => document.title"
uv run python scripts/browser.py eval "() => document.querySelectorAll('a').length"

# Console messages
uv run python scripts/browser.py list-console --types error,warn
uv run python scripts/browser.py get-console 123

Input (requires UIDs from snapshot)

bash

# Get UIDs first
uv run python scripts/browser.py snapshot
# Output: uid=1_3 link "Learn more" ...

# Then interact using UIDs
uv run python scripts/browser.py click 1_3
uv run python scripts/browser.py click 1_3 --dbl-click
uv run python scripts/browser.py fill 1_5 "test@example.com"
uv run python scripts/browser.py hover 1_2

# Form filling
uv run python scripts/browser.py fill-form --elements '[{"uid":"1_5","value":"test"},{"uid":"1_6","value":"pass"}]'

# Keyboard
uv run python scripts/browser.py press-key Enter
uv run python scripts/browser.py press-key "Control+A"
uv run python scripts/browser.py press-key "Control+Shift+R"

# Drag and drop
uv run python scripts/browser.py drag 1_10 1_20

# File upload
uv run python scripts/browser.py upload-file 1_15 ./document.pdf

# Dialog handling
uv run python scripts/browser.py handle-dialog accept
uv run python scripts/browser.py handle-dialog dismiss --prompt-text "input"

Emulation

bash

# Network throttling
uv run python scripts/browser.py emulate --network "Slow 3G"
uv run python scripts/browser.py emulate --network "Offline"
uv run python scripts/browser.py emulate --network "No emulation"

# CPU throttling (1-20, 1=normal)
uv run python scripts/browser.py emulate --cpu 4

# Geolocation
uv run python scripts/browser.py emulate --geo "37.7749,-122.4194"
uv run python scripts/browser.py emulate --geo clear

# Viewport resize
uv run python scripts/browser.py resize 1920 1080
uv run python scripts/browser.py resize 375 667

Network

bash

uv run python scripts/browser.py list-network
uv run python scripts/browser.py list-network --types xhr,fetch
uv run python scripts/browser.py get-network --reqid 5

Performance

bash

uv run python scripts/browser.py perf-start --reload --auto-stop
uv run python scripts/browser.py perf-stop
uv run python scripts/browser.py perf-analyze <insight-set-id> DocumentLatency

Session Note

Each CLI command spawns a fresh browser. For multi-step workflows, use Python directly:

python

from fastmcp import Client
from fastmcp.client.transports import StdioTransport
import asyncio

async def test_flow():
    transport = StdioTransport(command="bunx", args=["chrome-devtools-mcp@latest"])
    async with Client(transport) as client:
        await client.call_tool("navigate_page", {"type": "url", "url": "https://example.com"})
        r = await client.call_tool("take_snapshot", {})
        print(r.content[0].text)  # Get UIDs
        await client.call_tool("click", {"uid": "1_3"})

asyncio.run(test_flow())

Maintainer

syz51 Core maintainer

Source details

Full Name: syz51/claude-code-settings
Branch: main
Path in repo: skills/browser-testing

Featured Tools

Join Our Newsletter

Stay updated with the latest AI tools, news, and offers by subscribing to our weekly newsletter.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

syz51/claude-code-settings

context7-docs

PRIMARY tool for fetching library/framework documentation. PROACTIVELY use instead of WebFetch/WebSearch when user requests docs, API references, setup guides, or code examples for any programming library or framework. Use this skill immediately when detecting queries like "show me X docs", "how do I use Y", "get Z documentation", etc. Token-efficient alternative to MCP servers.

syz51/claude-code-settings

arxiv-research

Download and analyze academic papers from arXiv. Use when users want to download a specific paper by ID (e.g., "download paper arxiv:1234.5678") or read/analyze papers they've already downloaded.

mattpocock/skills

obsidian-vault

Search, create, and manage notes in the Obsidian vault with wikilinks and index notes. Use when user wants to find, create, or organize notes in Obsidian.

mattpocock/skills

handoff

Compact the current conversation into a handoff document for another agent to pick up.

mattpocock/skills

setup-pre-commit

Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.

mattpocock/skills

edit-article

Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.

Didn't find tool you were looking for?