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