ReddRadar
Agent skill
hands-on-test
Performs manual hands-on testing of a web application using playwright-cli. Spawns the dev server if needed, navigates to pages, performs browser actions, captures screenshots, checks outcomes, and produces a structured test report. Use when the user wants to visually verify a web feature, perform exploratory testing, or validate UI behavior.
Install this agent skill to your Project
npx add-skill https://github.com/ktnyt/cclsp/tree/main/.claude/skills/hands-on-test
SKILL.md
Hands-On Testing with playwright-cli
Perform manual browser-based testing of a web application and produce a structured test report with screenshots and console output.
Workflow
Phase 1: Environment Setup
1.1 Create the test output directory
Generate a timestamp-based output directory for this test run:
TEST_OUTPUT_DIR="$CLAUDE_PROJECT_DIR/test-output/$(date +%Y%m%d%H%M)"
mkdir -p "$TEST_OUTPUT_DIR"
All screenshots and the report for this run will be saved under this directory.
1.2 Check if the dev server is running
# Check if something is listening on the expected port
lsof -i :3000 -sTCP:LISTEN
# or
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000
1.3 Start the dev server if not running
Detect the project's dev server command from project files (compose.yml, package.json, Makefile, etc.) and start it in the background.
# Example: Docker Compose project
docker compose up -d
# Example: Node.js project
# npm run dev &
Wait for the server to become ready:
# Poll until the server responds
for i in $(seq 1 30); do
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000 | grep -q "200" && break
sleep 1
done
Phase 2: Browser Session
2.1 Open the browser and navigate
playwright-cli open http://localhost:3000
Or navigate to a specific page to test:
playwright-cli open http://localhost:3000/path/to/test
2.2 Take a snapshot to understand the page structure
playwright-cli snapshot
Use the snapshot output to identify element refs (e.g., e1, e5, e12) for subsequent interactions.
2.3 Perform test actions
Interact with the page based on the test scenario. Common actions:
# Click elements
playwright-cli click e3
# Fill form fields
playwright-cli fill e5 "test input"
# Type text (simulates keystrokes)
playwright-cli type "search query"
# Press keys
playwright-cli press Enter
# Select dropdown options
playwright-cli select e9 "option-value"
# Check/uncheck checkboxes
playwright-cli check e12
playwright-cli uncheck e12
# Hover
playwright-cli hover e4
# Navigate
playwright-cli goto http://localhost:3000/other-page
After each significant action, take a snapshot to verify the page state:
playwright-cli snapshot
2.4 Capture screenshots
Save screenshots to $TEST_OUTPUT_DIR/ with descriptive filenames:
# Full page screenshot
playwright-cli screenshot --filename=$TEST_OUTPUT_DIR/<test-name>-<step>.png
# Screenshot of a specific element
playwright-cli screenshot e5 --filename=$TEST_OUTPUT_DIR/<test-name>-<element>.png
Naming convention: <test-name>-<step-number>-<description>.png
Examples:
login-01-initial.pnglogin-02-filled-form.pnglogin-03-after-submit.pngdashboard-01-loaded.png
2.5 Collect console messages
playwright-cli console
Check for errors, warnings, or relevant log output.
2.6 Collect network activity (if relevant)
playwright-cli network
Phase 3: Outcome Verification
After performing actions and capturing state:
- Read the screenshot using the Read tool to visually inspect the result
- Review the snapshot to verify DOM state matches expectations
- Check console output for errors or unexpected warnings
- Compare the actual outcome against the intended behavior described in the test scenario
Phase 4: Cleanup
playwright-cli close
Phase 5: Report Generation
Write a structured test report to $TEST_OUTPUT_DIR/REPORT.md:
# Hands-On Test Report
**Date**: YYYY-MM-DD HH:MM
**Tester**: <agent-name>
**Target**: <URL tested>
## Test Scenario
<Brief description of what was being tested>
## Steps Performed
| # | Action | Target | Details |
|---|--------|--------|---------|
| 1 | Navigate | http://localhost:3000/page | Initial page load |
| 2 | Fill | e5 (Email field) | Entered "user@example.com" |
| 3 | Click | e8 (Submit button) | Submitted form |
## Screenshots
| Step | Screenshot | Description |
|------|-----------|-------------|
| 1 |  | Page after initial load |
| 2 |  | Form with data entered |
| 3 |  | Result after submission |
## Console Output
<relevant console messages, warnings, or errors>
## Result
**Status**: PASS / FAIL
<Explanation of whether the outcome matched expectations.
If FAIL, describe the discrepancy between expected and actual behavior.>
Example: Full Test Session
# Phase 1: Setup
TEST_OUTPUT_DIR="$CLAUDE_PROJECT_DIR/test-output/$(date +%Y%m%d%H%M)"
mkdir -p "$TEST_OUTPUT_DIR"
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000
# If not running:
docker compose up -d
# Wait for ready
for i in $(seq 1 30); do
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000 | grep -q "200" && break
sleep 1
done
# Phase 2: Test
playwright-cli open http://localhost:3000/login
playwright-cli snapshot
playwright-cli screenshot --filename=$TEST_OUTPUT_DIR/login-01-initial.png
playwright-cli fill e5 "user@example.com"
playwright-cli fill e8 "password123"
playwright-cli screenshot --filename=$TEST_OUTPUT_DIR/login-02-filled.png
playwright-cli click e10
playwright-cli snapshot
playwright-cli screenshot --filename=$TEST_OUTPUT_DIR/login-03-result.png
playwright-cli console
# Phase 3: Verify
# Read screenshots to visually verify
# Check snapshot for expected DOM state
# Review console for errors
# Phase 4: Cleanup
playwright-cli close
# Phase 5: Write report to $TEST_OUTPUT_DIR/REPORT.md
Tips
- Always take a snapshot before interacting to identify correct element refs
- Capture screenshots at meaningful checkpoints, not after every micro-action
- Include both "before" and "after" screenshots for state-changing actions
- Check console output after actions that trigger API calls or state changes
- Use
playwright-cli resize 1280 720for consistent screenshot dimensions - If a page takes time to load, use
playwright-cli run-code "async page => { await page.waitForLoadState('networkidle'); }"before capturing
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
ktnyt/cclsp
architecture
Guides the design of safely disposable code through contracts (traits/interfaces) and dependency inversion. Use when designing new modules, refactoring existing code, or making architectural decisions about component boundaries.
ktnyt/cclsp
security-review
Request a security expert assessment for code changes that touch child process spawning, file system access, configuration loading, or environment variable handling. Use when the Reviewer identifies security-sensitive changes in the MCP-LSP bridge.
ktnyt/cclsp
playwright-cli
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
davila7/claude-code-templates
verl-rl-training
Provides guidance for training LLMs with reinforcement learning using verl (Volcano Engine RL). Use when implementing RLHF, GRPO, PPO, or other RL algorithms for LLM post-training at scale with flexible infrastructure backends.
davila7/claude-code-templates
openrlhf-training
High-performance RLHF framework with Ray+vLLM acceleration. Use for PPO, GRPO, RLOO, DPO training of large models (7B-70B+). Built on Ray, vLLM, ZeRO-3. 2× faster than DeepSpeedChat with distributed architecture and GPU resource sharing.
davila7/claude-code-templates
gguf-quantization
GGUF format and llama.cpp quantization for efficient CPU/GPU inference. Use when deploying models on consumer hardware, Apple Silicon, or when needing flexible quantization from 2-8 bit without GPU requirements.
Didn't find tool you were looking for?