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:3001');
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

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

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