webapp-testing
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.
When & Why to Use This Skill
This Claude skill provides a comprehensive toolkit for automated web application testing and debugging powered by Playwright. It enables developers to programmatically interact with local web environments, verify frontend functionality, and perform deep UI inspections. By integrating browser automation directly into the agent workflow, it streamlines the process of identifying regressions, capturing visual evidence of bugs, and ensuring high-quality user experiences across different viewports.
Use Cases
- Automated Frontend Testing: Execute end-to-end tests for user flows, such as login sequences, form submissions, and multi-step checkouts, to ensure core functionality remains intact.
- Visual Regression & Debugging: Capture high-resolution screenshots of web pages or specific elements to document UI states and identify layout inconsistencies or visual bugs.
- Responsive Design Verification: Test application behavior across various screen sizes and viewports to ensure a seamless experience on mobile, tablet, and desktop devices.
- Console Log & Error Monitoring: Programmatically access browser console logs and network request data to troubleshoot JavaScript errors and performance bottlenecks in real-time.
- Interactive UI Validation: Verify the presence, visibility, and state of DOM elements to confirm that dynamic content renders correctly after user interactions.
| name | webapp-testing |
|---|---|
| description | 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. |
Web Application Testing
This skill enables comprehensive testing and debugging of local web applications using Playwright automation.
When to Use This Skill
Use this skill when you need to:
- Test frontend functionality in a real browser
- Verify UI behavior and interactions
- Debug web application issues
- Capture screenshots for documentation or debugging
- Inspect browser console logs
- Validate form submissions and user flows
- Check responsive design across viewports
Prerequisites
- Node.js installed on the system
- A locally running web application (or accessible URL)
- Playwright will be installed automatically if not present
Core Capabilities
1. Browser Automation
- Navigate to URLs
- Click buttons and links
- Fill form fields
- Select dropdowns
- Handle dialogs and alerts
2. Verification
- Assert element presence
- Verify text content
- Check element visibility
- Validate URLs
- Test responsive behavior
3. Debugging
- Capture screenshots
- View console logs
- Inspect network requests
- Debug failed tests
Usage Examples
Example 1: Basic Navigation Test
// Navigate to a page and verify title
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);
Example 2: Form Interaction
// Fill out and submit a form
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
Example 3: Screenshot Capture
// Capture a screenshot for debugging
await page.screenshot({ path: 'debug.png', fullPage: true });
Guidelines
- Always verify the app is running - Check that the local server is accessible before running tests
- Use explicit waits - Wait for elements or navigation to complete before interacting
- Capture screenshots on failure - Take screenshots to help debug issues
- Clean up resources - Always close the browser when done
- Handle timeouts gracefully - Set reasonable timeouts for slow operations
- Test incrementally - Start with simple interactions before complex flows
- Use selectors wisely - Prefer data-testid or role-based selectors over CSS classes
Common Patterns
Pattern: Wait for Element
await page.waitForSelector('#element-id', { state: 'visible' });
Pattern: Check if Element Exists
const exists = await page.locator('#element-id').count() > 0;
Pattern: Get Console Logs
page.on('console', msg => console.log('Browser log:', msg.text()));
Pattern: Handle Errors
try {
await page.click('#button');
} catch (error) {
await page.screenshot({ path: 'error.png' });
throw error;
}
Limitations
- Requires Node.js environment
- Cannot test native mobile apps (use React Native Testing Library instead)
- May have issues with complex authentication flows
- Some modern frameworks may require specific configuration