Web Application Testing with Playwright

This skill enables you to thoroughly test and debug local web applications using Playwright, a modern browser automation API.

When to Use This Skill

Use this skill when you need to:

• Test frontend functionality in a real browser environment
• Verify user interface behavior and interactions
• Debug web application issues
• Capture screenshots or videos for documentation or debugging purposes
• Inspect browser console logs
• Validate form submissions and user flows
• Check responsive design across different screen sizes and viewports
• Test accessibility and performance

Prerequisites

• Node.js (v14 or later) installed on the system
• A locally running web application or accessible URL
• The application must be compatible with modern web browsers
• Playwright will be installed automatically if not already present

Core Capabilities

1. Browser Automation

• Navigate to URLs or internal pages
• Click buttons, links, and other interactive elements
• Fill form fields with user input
• Select options from dropdowns and comboboxes
• Handle dialogues, alerts, and confirmations
• Dismiss cookies or accept them

2. Verification

• Assert the presence or absence of elements on the page
• Verify the exact or partial text content of elements
• Check element visibility, enabled status, or checked state
• Validate URLs and path names
• Test responsive layout and behavior across different viewports
• Verify the correctness of redirect URLs

3. Debugging

• Capture screenshots of the entire page or specific elements
• View and filter browser console logs
• Inspect network requests, responses, and performance metrics
• Debug failed tests and interactively explore the page state
• Monitor page events and interactions

Usage Examples

Example 1: Basic Navigation and Verification

// Navigate to the application root and verify the title
await page.goto('http://localhost:3000');
const title = await page.title();
expect(title).toBe('My Application Title');

// Navigate to a specific page and check the URL
await page.goto('/about');
const currentUrl = await page.url();
expect(currentUrl).toBe('http://localhost:3000/about');

Example 2: Form Interaction and Validation

// Fill out a login form and submit it
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');

// Wait for the login to complete and verify the dashboard URL
await page.waitForURL('**/dashboard');
const dashboardUrl = await page.url();
expect(dashboardUrl).toBe('http://localhost:3000/dashboard');

// Check if the username is displayed on the dashboard
const usernameElement = await page.locator('.user-name');
const usernameText = await usernameElement.innerText();
expect(usernameText).toBe('testuser');

Example 3: Screenshot Capture and Console Logging

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

// Set up a console log listener to capture browser messages
page.on('console', msg => {
  const logMessage = `Browser log: ${msg.text()}`;
  console.log(logMessage);
  // Save the log message to a file or database
});

// Start a recording to capture a video of user interactions
const recorder = await page.startRecording();
await page.goto('/');
await page.click('#start-button');
await recorder.stop();
await recorder.saveAs('interaction.mov');

Guidelines and Best Practices

1. Always ensure the application is running - Check that the local server is accessible and the application is in a stable state before running tests
2. Use explicit waits - Wait for elements to be present, visible, or loaded before interacting with them to avoid flaky tests
3. Capture screenshots on failure - Take screenshots of the entire page or specific elements when tests fail to help with debugging
4. Clean up resources - Always close the browser and dispose of any open contexts after testing to free up system resources
5. Handle timeouts gracefully - Set reasonable timeouts for network requests and element waits, and use retry mechanisms for flaky elements
6. Test incrementally - Start with simple navigation and UI checks before moving to complex business logic and user flows
7. Use selectors wisely - Prefer data attributes (data-testid, data-cy), role-based selectors, or unique IDs for element locators
8. Parallelize tests - Run multiple tests simultaneously to reduce overall test execution time
9. Use test suites - Organize tests into logical groups based on functionality or components

Common Patterns

Pattern: Wait for Element and Interaction

const button = await page.locator('#clickable-button');
await button.waitFor({ state: 'enabled' });
await button.click();
await page.waitForURL('**/next-page');

Pattern: Check if Element Exists and Has Text

const alertMessage = await page.locator('.error-message');
const exists = await alertMessage.count() > 0;
const visible = await alertMessage.isVisible();
const text = await alertMessage.innerText();

Pattern: Get Console Logs and Errors

page.on('console', msg => console.log('Browser log:', msg.text()));
page.on('pageerror', err => console.error('Page error:', err.message));

Pattern: Handle Timeout with Retry

let retryCount = 0;
let maxRetries = 3;
while (retryCount < maxRetries) {
  try {
    await page.click('#element');
    break;
  } catch (error) {
    retryCount++;
    await page.reload();
  }
}
if (retryCount >= maxRetries) {
  throw new Error('Element not clickable after multiple retries');
}

Limitations and Considerations

• Requires Node.js environment and Node.js compatible operating system
• Cannot test native mobile apps or hybrid applications (use Appium or Detox instead)
• Some complex authentication flows or single-page applications may require additional setup
• Some modern frameworks or libraries may require specific configuration for Playwright
• Playwright may have limited support for specific browser extensions or custom configurations
• Test stability may depend on the application's performance and reliability

Please provide the improved prompt text without any additional commentary.