browser-test

name	browser-test
description	Run comprehensive Playwright browser tests across desktop, tablet, and mobile viewports. Auto-discovers pages and tests navigation, forms, auth, CRUD, responsive behavior, interactive elements, error states, user flows, and performance metrics.
hooks	{"SubagentStart":[{"matcher":".*","hooks":[{"type":"command","command":"echo \"\"\ncase \"$AGENT_TYPE\" in\n \"codebase-explorer\") echo \" 🔍 Discovering application routes and pages...\" ;;\n \"test-writer\") echo \" 🧪 Generating Playwright test scripts...\" ;;\n \"debugger\") echo \" 🐛 Debugging test failures...\" ;;\n *) echo \" 🤖 Running: $AGENT_TYPE\" ;;\nesac\n"}]}],"SubagentStop":[{"hooks":[{"type":"command","command":"echo ' ✓ Complete'"}]}],"Stop":[{"hooks":[{"type":"prompt","prompt":"Verify that /browser-test completed all required phases:\n\n1. Phase 1 (Setup):\n - Was Playwright installed or verified?\n - Was the playwright.config.ts generated?\n\n2. Phase 2 (Discovery):\n - Were application routes/pages discovered?\n - Were testable features identified?\n\n3. Phase 3 (Test Generation):\n - Were test spec files generated?\n\n4. Phase 4 (Execution):\n - Were tests run across all 3 viewports?\n - Were screenshots captured?\n\n5. Phase 5 (Report):\n - Was the test report generated?\n\nContext: $ARGUMENTS\n\nReturn {\"ok\": true} if all phases completed.\nReturn {\"ok\": false, \"reason\": \"specific issue\"} if incomplete.\n","timeout":30}]}]}

Browser Test Skill

Run comprehensive Playwright browser tests across desktop, tablet, and mobile viewports.

When to Use

Invoke with /browser-test when you need to:

• Test your web application across multiple screen sizes
• Verify responsive behavior and mobile compatibility
• Test user flows and common interactions
• Capture screenshots at different viewports
• Check performance metrics (LCP, CLS, INP)

Usage

/browser-test <port> [target]

Arguments:

• port (required) - Port the app is running on (e.g., 3000, 8080)
• target (optional) - Specific page (/dashboard), flow type (auth, forms, crud), or all (default)

Examples:

# Test entire app on port 3000
/browser-test 3000

# Test only the dashboard page
/browser-test 3000 /dashboard

# Test only authentication flows
/browser-test 3000 auth

# Test on different port
/browser-test 8080 all

Instructions

Phase 1: Setup and Validation

PORT="$1"
TARGET="${2:-all}"

# Validate port is provided
if [ -z "$PORT" ]; then
  echo "❌ Error: Port number is required"
  echo ""
  echo "Usage: /browser-test <port> [page-or-feature|all]"
  echo ""
  echo "Examples:"
  echo "  /browser-test 3000"
  echo "  /browser-test 3000 all"
  echo "  /browser-test 3000 /dashboard"
  echo "  /browser-test 3000 auth"
  exit 1
fi

echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo "🎭 Browser Testing with Playwright"
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo ""
echo "Target: http://localhost:$PORT"
echo "Scope: $TARGET"
echo "Viewports: Desktop (1920x1080), Tablet (768x1024), Mobile (375x812)"
echo ""

# Verify the app is running on the specified port
echo "📡 Checking if app is running on port ..."


  -v curl > /dev/null 2>&1; 
   curl -s -o /dev/null -w   | grep -q ; 
     
  
     
     
     
  

   
   
   



 
 

 npx playwright --version > /dev/null 2>&1; 
  PLAYWRIGHT_VERSION=$(npx playwright --version)
   

   

  
   [ ! -f  ]; 
    npm init -y > /dev/null 2>&1
  

  
  npm install --save-dev @playwright/test

  
  npx playwright install chromium

   



 
 

 -p browser-tests/tests
 -p browser-tests/screenshots/desktop
 -p browser-tests/screenshots/tablet
 -p browser-tests/screenshots/mobile
 -p browser-tests/reports

 
 

Phase 2: Route and Feature Discovery

echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo "Phase 2: Discovering Routes and Features"
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo ""

# Detect framework
FRAMEWORK="unknown"

echo "🔍 Detecting framework..."

if [ -d "app" ] && ([ -f "next.config.js" ] || [ -f "next.config.ts" ] || [ -f "next.config.mjs" ]); then
  FRAMEWORK="nextjs-app-router"
  echo "✓ Detected: Next.js (App Router)"
elif [ -d "pages" ] && ([ -f "next.config.js" ] || [ -f "next.config.ts" ]); then
  FRAMEWORK="nextjs-pages-router"
  echo "✓ Detected: Next.js (Pages Router)"
elif [ -f "nuxt.config.ts" ] || [ -f "nuxt.config.js" ]; then
  FRAMEWORK="nuxt"
  echo "✓ Detected: Nuxt"
elif [ -f "vite.config.ts" ] || [ -f "vite.config.js" ]; then
  FRAMEWORK="vite-spa"
  echo "✓ Detected: Vite SPA"
elif [ -f "angular.json" ]; then
  FRAMEWORK="angular"
  echo "✓ Detected: Angular"
 [ -d  ] && grep -q  package.json 2>/dev/null; 
  FRAMEWORK=
   
 [ -d  ] && grep -q  package.json 2>/dev/null; 
  FRAMEWORK=
   

   


 
 
 













































































































 

Phase 3: Test Generation

echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo "Phase 3: Generating Test Scripts"
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo ""

# Generate playwright.config.ts with 3 viewport projects
echo "📝 Generating playwright.config.ts..."

cat > browser-tests/playwright.config.ts << 'PLAYWRIGHT_CONFIG_EOF'
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  outputDir: './test-results',
  fullyParallel: false, // Sequential for predictable screenshots
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 1,
  workers: 1, // Run one test at a time
  timeout: 30000,
  use: {
    baseURL: `http://localhost:${PORT}`,
    screenshot: 'only-on-failure',
    trace: 'retain-on-failure',
  },
  projects: [
    {
      name: 'desktop',
      use: {
        viewport: { width: 1920, height: 1080 },
        ...devices['Desktop Chrome'],
      },
    },
    {
      name: 'tablet',
      use: {
        viewport: { width: 768, height: 1024 },
        ...devices['iPad Mini'],
      },
    },
    {
      name: 'mobile',
      use: {
        viewport: { width: 375, height: 812 },
        ...devices['iPhone 13'],
      },
    },
  ],
  reporter: [
    ['json', { outputFile: './reports/test-results.json' }],
    ['html', { outputFolder: './reports/html', open: 'never' }],
    ['list'],
  ],
});
PLAYWRIGHT_CONFIG_EOF


sed -i  browser-tests/playwright.config.ts

 
 








































































































 
 




 

Phase 4: Test Execution

echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo "Phase 4: Running Tests"
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo ""

cd browser-tests

echo "🧪 Running Playwright tests across 3 viewports..."
echo "   This may take a few minutes..."
echo ""

# Run tests
npx playwright test

# Capture exit code
TEST_EXIT_CODE=$?

echo ""

if [ $TEST_EXIT_CODE -eq 0 ]; then
  echo "✅ All tests passed!"
else
  echo "⚠️  Some tests failed. See report for details."
  echo ""

  # Claude: Analyze failures
  # - Read test-results.json
  # - For each failure, determine if it's:
  #   1. Test authoring issue (wrong selector, timing) → Fix the test
  #   2. Application bug (wrong behavior) → Report it
  #   3. Untestable scenario (needs real auth) → Add test.fixme() annotation
  #
  # If fixes are made, re-run:
  # npx playwright test --last-failed
fi

cd ..

echo ""

Phase 5: Report Generation

echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo "Phase 5: Generating Report"
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo ""

echo "📊 Generating test report..."

# Claude: Read browser-tests/reports/test-results.json
# Generate browser-tests/reports/test-report.md with:
#
# Format:
# ```markdown
# # Browser Test Report
#
# **Generated**: 2026-02-05T12:00:00Z
# **Application**: http://localhost:3000
# **Framework**: Next.js (App Router)
#
# ---
#
# ## Summary
#
# | Viewport | Tests | Passed | Failed | Skipped |
# |----------|-------|--------|--------|---------|
# | Desktop (1920x1080) | 42 | 40 | 1 | 1 |
# | Tablet (768x1024) | 42 | 41 | 0 | 1 |
# | Mobile (375x812) | 42 | 39 | 2 | 1 |
# | **Total** | **126** | **120** | **3** | **3** |
#
# **Pass Rate**: 95.2%
#
# ---
#
# ## Routes Tested
#
# | Route | Desktop | Tablet | Mobile | Notes |
# |-------|---------|--------|--------|-------|
# | / | PASS | PASS | PASS | Homepage loads in <1s |
# | /dashboard | PASS | PASS | FAIL | Mobile nav overlaps content |
# | /products | PASS | PASS | PASS | |
# | /login | PASS | PASS | PASS | |























































































































 
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Quick Reference

Phase	Action	Key Output
1	Setup	Playwright installed, directories created
2	Discovery	Routes and features identified
3	Generation	Test spec files created
4	Execution	Tests run across 3 viewports
5	Report	Markdown report with results and recommendations

Notes

• Tests run sequentially (not parallel) for predictable screenshots
• Only Chromium is installed (not Firefox/WebKit) for speed
• Tests are saved to the project (not the skill) so users can re-run them
• Screenshots captured at key steps in each test flow
• Performance metrics measured using Web Vitals API
• User flows test end-to-end journeys based on detected features
• Report includes specific recommendations for fixing failures