davila7__claude-code-templates/dashboard/public/component-content/commands/testing/webapp-testing.json

{"content": "---\nallowed-tools: Bash, Read\ndescription: Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.\n---\n\n# Web Application Testing\n\nThis skill enables comprehensive testing and debugging of local web applications using Playwright automation.\n\n## When to Use This Skill\n\nUse this skill when you need to:\n- Test frontend functionality in a real browser\n- Verify UI behavior and interactions\n- Debug web application issues\n- Capture screenshots for documentation or debugging\n- Inspect browser console logs\n- Validate form submissions and user flows\n- Check responsive design across viewports\n\n## Prerequisites\n\n- Node.js installed on the system\n- A locally running web application (or accessible URL)\n- Playwright will be installed automatically if not present\n\n## Core Capabilities\n\n### 1. Browser Automation\n- Navigate to URLs\n- Click buttons and links\n- Fill form fields\n- Select dropdowns\n- Handle dialogs and alerts\n\n### 2. Verification\n- Assert element presence\n- Verify text content\n- Check element visibility\n- Validate URLs\n- Test responsive behavior\n\n### 3. Debugging\n- Capture screenshots\n- View console logs\n- Inspect network requests\n- Debug failed tests\n\n## Usage Examples\n\n### Example 1: Basic Navigation Test\n```javascript\n// Navigate to a page and verify title\nawait page.goto('http://localhost:3000');\nconst title = await page.title();\nconsole.log('Page title:', title);\n```\n\n### Example 2: Form Interaction\n```javascript\n// Fill out and submit a form\nawait page.fill('#username', 'testuser');\nawait page.fill('#password', 'password123');\nawait page.click('button[type=\"submit\"]');\nawait page.waitForURL('**/dashboard');\n```\n\n### Example 3: Screenshot Capture\n```javascript\n// Capture a screenshot for debugging\nawait page.screenshot({ path: 'debug.png', fullPage: true });\n```\n\n## Guidelines\n\n1. **Always verify the app is running** - Check that the local server is accessible before running tests\n2. **Use explicit waits** - Wait for elements or navigation to complete before interacting\n3. **Capture screenshots on failure** - Take screenshots to help debug issues\n4. **Clean up resources** - Always close the browser when done\n5. **Handle timeouts gracefully** - Set reasonable timeouts for slow operations\n6. **Test incrementally** - Start with simple interactions before complex flows\n7. **Use selectors wisely** - Prefer data-testid or role-based selectors over CSS classes\n\n## Common Patterns\n\n### Pattern: Wait for Element\n```javascript\nawait page.waitForSelector('#element-id', { state: 'visible' });\n```\n\n### Pattern: Check if Element Exists\n```javascript\nconst exists = await page.locator('#element-id').count() > 0;\n```\n\n### Pattern: Get Console Logs\n```javascript\npage.on('console', msg => console.log('Browser log:', msg.text()));\n```\n\n### Pattern: Handle Errors\n```javascript\ntry {\n  await page.click('#button');\n} catch (error) {\n  await page.screenshot({ path: 'error.png' });\n  throw error;\n}\n```\n\n## Limitations\n\n- Requires Node.js environment\n- Cannot test native mobile apps (use React Native Testing Library instead)\n- May have issues with complex authentication flows\n- Some modern frameworks may require specific configuration\n"}