webapp-testinglisted

# 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 ```javascript // 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 ```javascript // Fill out and submit a form await page.fill("#username", "testuser"); await page.fill("#password", "password123"); await page.click('button[type="submit"]'); a