Loading...
Automatically runs Playwright E2E tests when test files or page components are modified
{
"hookConfig": {
"hooks": {
"postToolUse": {
"script": "./.claude/hooks/playwright-test-runner.sh",
"matchers": [
"write",
"edit"
]
}
}
},
"scriptContent": "#!/bin/bash\n\n# Read the tool input from stdin\nINPUT=$(cat)\nTOOL_NAME=$(echo \"$INPUT\" | jq -r '.tool_name')\nFILE_PATH=$(echo \"$INPUT\" | jq -r '.tool_input.file_path // .tool_input.path // \"\"')\n\nif [ -z \"$FILE_PATH\" ]; then\n exit 0\nfi\n\necho \"đ Playwright Test Runner - Analyzing file changes...\"\n\n# Check if this is a test file\nif [[ \"$FILE_PATH\" == *.spec.ts ]] || [[ \"$FILE_PATH\" == *.spec.js ]] || [[ \"$FILE_PATH\" == *e2e*.ts ]]; then\n echo \"đ Test file detected: $FILE_PATH\"\n echo \"đ Running specific Playwright test...\"\n \n if command -v npx >/dev/null 2>&1; then\n npx playwright test \"$FILE_PATH\" --reporter=list\n if [ $? -eq 0 ]; then\n echo \"â
E2E tests passed for $FILE_PATH\"\n else\n echo \"â E2E tests failed for $FILE_PATH\"\n fi\n else\n echo \"â ī¸ Playwright not found. Install with: npm install -D @playwright/test\"\n fi\n \nelif [[ \"$FILE_PATH\" == *pages/*.tsx ]] || [[ \"$FILE_PATH\" == *app/*.tsx ]] || [[ \"$FILE_PATH\" == *components/*.tsx ]]; then\n PAGE_NAME=$(basename \"${FILE_PATH%.*}\")\n echo \"𧊠Component/page detected: $PAGE_NAME\"\n echo \"đ Running related E2E tests...\"\n \n if command -v npx >/dev/null 2>&1; then\n # Try to find and run tests related to this component\n npx playwright test --grep \"$PAGE_NAME\" --reporter=list 2>/dev/null\n if [ $? -eq 0 ]; then\n echo \"â
Related E2E tests passed for $PAGE_NAME\"\n else\n echo \"âšī¸ No specific tests found for $PAGE_NAME or tests failed\"\n # Run a basic smoke test if available\n npx playwright test --grep \"smoke\" --reporter=list 2>/dev/null || echo \"âšī¸ No smoke tests available\"\n fi\n else\n echo \"â ī¸ Playwright not found. Install with: npm install -D @playwright/test\"\n fi\nelse\n echo \"âšī¸ File type not relevant for E2E testing: $FILE_PATH\"\nfi\n\necho \"\"\necho \"đĄ Playwright Testing Tips:\"\necho \" âĸ Test files should end with .spec.ts, .spec.js, or contain 'e2e'\"\necho \" âĸ Use page-specific test names to enable smart test detection\"\necho \" âĸ Consider running full test suite before major releases\"\necho \" âĸ Check Playwright configuration for browser settings\"\n\necho \"\"\necho \"đ¯ Test analysis complete!\"\n\nexit 0"
}.claude/hooks/~/.claude/hooks/{
"hooks": {
"postToolUse": {
"script": "./.claude/hooks/playwright-test-runner.sh",
"matchers": [
"write",
"edit"
]
}
}
}#!/bin/bash
# Read the tool input from stdin
INPUT=$(cat)
TOOL_NAME=$(echo "$INPUT" | jq -r '.tool_name')
FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.path // ""')
if [ -z "$FILE_PATH" ]; then
exit 0
fi
echo "đ Playwright Test Runner - Analyzing file changes..."
# Check if this is a test file
if [[ "$FILE_PATH" == *.spec.ts ]] || [[ "$FILE_PATH" == *.spec.js ]] || [[ "$FILE_PATH" == *e2e*.ts ]]; then
echo "đ Test file detected: $FILE_PATH"
echo "đ Running specific Playwright test..."
if command -v npx >/dev/null 2>&1; then
npx playwright test "$FILE_PATH" --reporter=list
if [ $? -eq 0 ]; then
echo "â
E2E tests passed for $FILE_PATH"
else
echo "â E2E tests failed for $FILE_PATH"
fi
else
echo "â ī¸ Playwright not found. Install with: npm install -D @playwright/test"
fi
elif [[ "$FILE_PATH" == *pages/*.tsx ]] || [[ "$FILE_PATH" == *app/*.tsx ]] || [[ "$FILE_PATH" == *components/*.tsx ]]; then
PAGE_NAME=$(basename "${FILE_PATH%.*}")
echo "𧊠Component/page detected: $PAGE_NAME"
echo "đ Running related E2E tests..."
if command -v npx >/dev/null 2>&1; then
# Try to find and run tests related to this component
npx playwright test --grep "$PAGE_NAME" --reporter=list 2>/dev/null
if [ $? -eq 0 ]; then
echo "â
Related E2E tests passed for $PAGE_NAME"
else
echo "âšī¸ No specific tests found for $PAGE_NAME or tests failed"
# Run a basic smoke test if available
npx playwright test --grep "smoke" --reporter=list 2>/dev/null || echo "âšī¸ No smoke tests available"
fi
else
echo "â ī¸ Playwright not found. Install with: npm install -D @playwright/test"
fi
else
echo "âšī¸ File type not relevant for E2E testing: $FILE_PATH"
fi
echo ""
echo "đĄ Playwright Testing Tips:"
echo " âĸ Test files should end with .spec.ts, .spec.js, or contain 'e2e'"
echo " âĸ Use page-specific test names to enable smart test detection"
echo " âĸ Consider running full test suite before major releases"
echo " âĸ Check Playwright configuration for browser settings"
echo ""
echo "đ¯ Test analysis complete!"
exit 0Playwright tests fail with 'browser not found' errors
Browsers not installed after @playwright/test install. Run: 'npx playwright install' downloading Chromium/Firefox/WebKit. Or specific: 'npx playwright install chromium' for single browser.
Component name grep returns no tests despite matching test files
--grep searches test descriptions not filenames. Use --testPathPattern: 'npx playwright test --testPathPattern="$PAGE_NAME"' or combine: '--grep "$PAGE_NAME" --testPathPattern=".*"'.
E2E tests fail when run via hook but pass manually
Hook lacks env variables or server not running. Check baseURL: set in playwright.config.ts. Or start server: add 'npm run dev &' before tests with cleanup: 'kill $!' after.
Hook triggers on every .tsx save running slow E2E tests
No file type filtering. Restrict matchers: 'matchers': ['write:**/*.spec.{ts,js}', 'edit:**/*.spec.{ts,js}'] running only on test file changes. Or add path check excluding components.
Smoke tests run instead of specific component tests showing wrong results
Fallback triggers on grep failure. Add existence check: 'if ! npx playwright test --list --grep "$PAGE_NAME" | grep -q .; then exit 0; fi' before running. Skip fallback if no matches.
Loading reviews...
Join our community of Claude power users. No spam, unsubscribe anytime.
Automated accessibility testing and compliance checking for web applications following WCAG guidelines
Automatically generates or updates API documentation when endpoint files are modified
Automatically formats code files after Claude writes or edits them using Prettier, Black, or other formatters