Advanced Web Application Testing with Playwright

This skill empowers you to comprehensively test and debug local web applications using Playwright automation, ensuring your frontend functionality is robust and reliable.

When to Use This Skill

Harness the power of this skill when you need to:

Validate frontend behavior in an actual browser environment
Verify UI elements and interactions with precision
Locate and resolve web application issues efficiently
Capture clear screenshots for documentation or troubleshooting
Inspect browser console logs for hidden errors
Validate form submissions and user flows end-to-end
Assess responsive design across various screen sizes and viewports

Prerequisites

A stable Node.js environment installed on your system (version 14.17.6 or later)
A locally running web application or an accessible URL for testing
Playwright will be automatically installed if not present in your project

Core Capabilities and Key Features

1. Browser Automation

Navigation: Seamlessly navigate to specified URLs
Interaction: Click buttons, links, and other UI elements with ease
Form Filling: Effortlessly fill out form fields with precise data
Dropdown Handling: Select options from dropdown menus and comboboxes
Dialog Handling: Interact with browser dialogs, alerts, and confirmations

2. Robust Verification

Element Presence: Assert the existence of UI elements on the page
Text Content: Verify the accuracy of displayed text
Visibility Checks: Ensure elements are visible or hidden as expected
URL Validation: Confirm the browser's current URL matches the expected path
Responsiveness Testing: Verify the UI adapts correctly across different screen sizes and viewports

3. Comprehensive Debugging

Screenshot Capture: Capture high-quality screenshots for visual debugging
Console Log Inspection: View browser console logs for hidden error messages
Network Request Analysis: Inspect network requests for performance optimization
Failed Test Analysis: Debug and resolve issues in your test scripts

Usage Examples and Best Practices

Example 1: Basic Navigation and Title Verification

// Navigate to a page and validate the title
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);

Example 2: Form Interaction and Submission

// Fill out a form and submit it
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard', { timeout: 3000 });

Example 3: Screenshot Capture for Debugging

// Capture a full-page screenshot to help diagnose UI issues
await page.screenshot({ path: 'debug-screenshot.png', fullPage: true });

Guidelines for Effective Playwright Testing

Always verify the web application is running: Ensure the local server is accessible before initiating tests
Use explicit waits: Implement waits for elements or navigation to complete before proceeding with interactions
Capture screenshots on failure: Take screenshots to capture the UI state when tests fail for easier debugging
Clean up resources: Remember to close the browser instance when you're done with testing
Handle timeouts appropriately: Set reasonable timeouts for slow operations to prevent test flakiness
Test incrementally: Start with simple interactions and gradually build up to complex user flows
Use selectors strategically: Prefer selectors based on data-testid attributes, roles, or IDs over CSS classes

Common Patterns and Techniques

Pattern: Wait for Element Visibility

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 Test Failures and Errors

try {
  await page.click('#button');
} catch (error) {
  await page.screenshot({ path: 'error-screenshot.png' });
  throw error;
}

Limitations and Considerations

This skill operates within a Node.js environment and requires the application to be accessible via a URL
It cannot directly test native mobile apps; use React Native Testing Library for mobile app testing
Complex authentication flows may require specific configuration or mocking
Some modern frameworks may have unique requirements for testing setup
Playwright's performance may vary based on the application's complexity and network conditions

By mastering this skill, you'll be equipped to create robust, maintainable, and efficient Playwright tests that provide confidence in your web application's frontend functionality.

Web Application Testing Skill