webapp-testing

# 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"]'); await page.waitForURL("**/dashboard"); ``` ### Example 3: Screenshot Capture ```javascript // Capture a screenshot for debugging await page.screenshot({ path: "debug.png", fullPage: true }); ``` ## Guidelines 1. **Always verify the app is running** - Check that the local server is accessible before running tests 2. **Use explicit waits** - Wait for elements or navigation to complete before interacting 3. **Capture screenshots on failure** - Take screenshots to help debug issues 4. **Clean up resources** - Always close the browser when done 5. **Handle timeouts gracefully** - Set reasonable timeouts for slow operations 6. **Test incrementally** - Start with simple interactions before complex flows 7. **Use selectors wisely** - Prefer data-testid or role-based selectors over CSS classes ## Common Patterns ### Pattern: Wait for Element ```javascript await page.waitForSelector("#element-id", { state: "visible" }); ``` ### Pattern: Check if Element Exists ```javascript const exists = (await page.locator("#element-id").count()) > 0; ``` ### Pattern: Get Console Logs ```javascript page.on("console", (msg) => console.log("Browser log:", msg.text())); ``` ### Pattern: Handle Errors ```javascript 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 --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/alexandereiseghohi) — claim your Tome and manage your conversions. <!-- tomevault:4.0:skill_md:2026-04-16 -->