Menu
Browser automation and visual testing for web development using Playwright MCP
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Analyze a project repository and add it to the Arkadian documentation registry with standardized structure. Use when: user provides a path to a new project to onboard.
Analyse an Arkadian orchestrator session - read transcripts, logs, and artifacts to understand what happened and suggest improvements. Use when: user wants to debug or review a past session.
Generate validated operational SOPs for Ark ecosystem projects by testing commands before documenting them. Use when: user wants to create or audit SOPs for a project.
Remove a project from the Arkadian documentation registry and delete all associated documentation files. Use when: user wants to deregister a project.
Update project documentation based on new commits and changes in the repository. Use when: user wants to sync docs after project changes.
Self-improvement loop for arkadian. Launches arkadian -d with a GitHub issue, polls until done, evaluates per-agent criteria, reads transcripts on failure, improves prompts, deletes worktree, and relaunches. Loops until passing or max iterations.
| name | browser-testing |
| description | Browser automation and visual testing for web development using Playwright MCP |
This skill provides browser automation through Playwright MCP:
All Playwright MCP tools are prefixed with mcp__playwright_*. Common tools include:
# Navigate to a page and capture screenshot
mcp__playwright_navigate --url "https://example.com"
mcp__playwright_screenshot --selector "body" --output "page.png"
# Screenshot specific element
mcp__playwright_screenshot --selector "#dashboard" --output "dashboard.png"
# Click an element
mcp__playwright_click --selector "#submit-button"
# Fill form fields
mcp__playwright_fill --selector "input[name='email']" --value "test@example.com"
mcp__playwright_fill --selector "input[name='password']" --value "testpass123"
# Press keyboard keys
mcp__playwright_press --selector "input[name='search']" --key "Enter"
# Get page content
mcp__playwright_content --selector "body"
# Get element text
mcp__playwright_text_content --selector ".error-message"
# Get element attributes
mcp__playwright_get_attribute --selector "a.link" --attribute "href"
# Evaluate JavaScript
mcp__playwright_evaluate --script "document.querySelector('.price').innerText"
# Set viewport for mobile testing
mcp__playwright_set_viewport --width 375 --height 667 # iPhone SE
# Set viewport for tablet
mcp__playwright_set_viewport --width 768 --height 1024 # iPad
# Set viewport for desktop
mcp__playwright_set_viewport --width 1920 --height 1080 # Full HD
# 1. Navigate to login page
mcp__playwright_navigate --url "https://app.example.com/login"
# 2. Take initial screenshot
mcp__playwright_screenshot --selector "body" --output "login-page.png"
# 3. Fill credentials
mcp__playwright_fill --selector "input[name='email']" --value "test@example.com"
mcp__playwright_fill --selector "input[name='password']" --value "password123"
# 4. Click login button
mcp__playwright_click --selector "button[type='submit']"
# 5. Wait and verify redirect (check URL or dashboard element)
mcp__playwright_screenshot --selector ".dashboard" --output "logged-in.png"
# 6. Report success
echo "✅ Login flow completed successfully"
# 1. Navigate to page with issue
mcp__playwright_navigate --url "https://app.example.com/profile"
# 2. Capture desktop view
mcp__playwright_screenshot --selector ".profile-card" --output "desktop-view.png"
# 3. Switch to mobile viewport
mcp__playwright_set_viewport --width 375 --height 667
# 4. Capture mobile view
mcp__playwright_screenshot --selector ".profile-card" --output "mobile-view.png"
# 5. Inspect element styles
mcp__playwright_evaluate --script "getComputedStyle(document.querySelector('.profile-card')).display"
# 6. Report findings
echo "📊 Desktop shows correctly, mobile has display: none issue"
# 1. Navigate to form
mcp__playwright_navigate --url "https://app.example.com/contact"
# 2. Fill all fields
mcp__playwright_fill --selector "#name" --value "Test User"
mcp__playwright_fill --selector "#email" --value "test@example.com"
mcp__playwright_fill --selector "#message" --value "This is a test message"
# 3. Submit form
mcp__playwright_click --selector "button.submit"
# 4. Check for success message
mcp__playwright_text_content --selector ".success-message"
# 5. Capture confirmation
mcp__playwright_screenshot --selector "body" --output "form-success.png"
# 1. Navigate to page
mcp__playwright_navigate --url "https://explorer.arkd.com/vtxos"
# 2. Get all vtxo IDs
mcp__playwright_evaluate --script "Array.from(document.querySelectorAll('.vtxo-id')).map(el => el.textContent)"
# 3. Get table data
mcp__playwright_content --selector "table.vtxos"
# 4. Export to file or process in code
# Good: Explicit navigation
mcp__playwright_navigate --url "https://app.example.com/page"
mcp__playwright_click --selector "#button"
# Bad: Assuming page is already loaded
mcp__playwright_click --selector "#button" # May fail if page not loaded
# Good: Specific, unique selector
mcp__playwright_click --selector "#submit-form-button"
mcp__playwright_click --selector "button[data-testid='login']"
# Bad: Generic selector that may match multiple elements
mcp__playwright_click --selector "button" # Which button?
# Always capture before and after states for debugging
mcp__playwright_screenshot --selector "body" --output "before-action.png"
mcp__playwright_click --selector "#delete-button"
mcp__playwright_screenshot --selector "body" --output "after-action.png"
# Test key breakpoints
viewports=(
"375x667" # Mobile
"768x1024" # Tablet
"1920x1080" # Desktop
)
for viewport in "${viewports[@]}"; do
width=${viewport%x*}
height=${viewport#*x}
mcp__playwright_set_viewport --width $width --height $height
mcp__playwright_screenshot --selector "body" --output "view-${viewport}.png"
done
# Good: Wait for content to load after interaction
mcp__playwright_click --selector "#load-data-button"
sleep 2 # Give time for data to load
mcp__playwright_screenshot --selector ".data-table" --output "loaded-data.png"
# Better: Check for element visibility/content before proceeding
mcp__playwright_click --selector "#load-data-button"
mcp__playwright_wait_for_selector --selector ".data-table" # If this tool exists
# Solution: Verify selector with content inspection first
mcp__playwright_content --selector "body" # See full page HTML
# Then find correct selector in the output
# Solution: Ensure element is visible and not covered
mcp__playwright_screenshot --selector "body" --output "before-click.png"
# Check if element is visible in screenshot, adjust selector if needed
# Solution: Set viewport BEFORE navigation
mcp__playwright_set_viewport --width 375 --height 667
mcp__playwright_navigate --url "https://app.example.com"
When the ark-developer or ark-tester agents receive tasks involving web UIs:
Use the browser-testing skill# Test dashboard loads and displays data
mcp__playwright_navigate --url "http://localhost:8080/admin"
mcp__playwright_screenshot --selector "body" --output "dashboard.png"
mcp__playwright_text_content --selector ".vtxo-count"
echo "Dashboard shows 42 VTXOs"
# Reproduce mobile menu bug
mcp__playwright_set_viewport --width 375 --height 667
mcp__playwright_navigate --url "http://localhost:8080"
mcp__playwright_click --selector ".hamburger-menu"
mcp__playwright_screenshot --selector "body" --output "mobile-menu-open.png"
echo "Bug confirmed: Menu overlaps content"
# Test email validation
mcp__playwright_navigate --url "http://localhost:8080/signup"
mcp__playwright_fill --selector "#email" --value "invalid-email"
mcp__playwright_click --selector "#submit"
mcp__playwright_screenshot --selector ".error" --output "validation-error.png"
mcp__playwright_text_content --selector ".error"
echo "✅ Email validation working: 'Please enter a valid email'"
Remember: This skill gives you "eyes" on the browser. Use it whenever you need to see what users see, test what users do, or debug what users experience.