Web Application Testing Skill

---name: web-application-testing-skilldescription: A toolkit for interacting with and testing local web applications using Playwright.---# Web Application TestingThis skill enables comprehensive testing and debugging of local web applications using Playwright automation.## When to Use This SkillUse 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```javascript// Navigate to a page and verify titleawait page.goto('http://localhost:3000');const title = await page.title();console.log('Page title:', title);```### Example 2: Form Interaction```javascript// Fill out and submit a formawait page.fill('#username', 'testuser');await page.fill('#password', 'password123');await page.click('button[type="submit"]');await page.waitForURL('**/dashboard');```### Example 3: Screenshot Capture```javascript// Capture a screenshot for debuggingawait page.screenshot({ path: 'debug.png', fullPage: true });```## Guidelines1. **Always verify the app is running** - Check that the local server is accessible before running tests2. **Use explicit waits** - Wait for elements or navigation to complete before interacting3. **Capture screenshots on failure** - Take screenshots to help debug issues4. **Clean up resources** - Always close the browser when done5. **Handle timeouts gracefully** - Set reasonable timeouts for slow operations6. **Test incrementally** - Start with simple interactions before complex flows7. **Use selectors wisely** - Prefer data-testid or role-based selectors over CSS classes## Common Patterns### Pattern: Wait for Element```javascriptawait page.waitForSelector('#element-id', { state: 'visible' });```### Pattern: Check if Element Exists```javascriptconst exists = await page.locator('#element-id').count() > 0;```### Pattern: Get Console Logs```javascriptpage.on('console', msg => console.log('Browser log:', msg.text()));```### Pattern: Handle Errors```javascripttry {  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