cclsp: Skill for Claude Code

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