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