name: webapp-testing
description: Browser automation testing using Playwright for UI verification, E2E testing, and visual regression. Use when testing web applications, automating browser tasks, or verifying UI behavior.
license: MIT
metadata:
author: thesimpleapp
version: "1.0"

Web App Testing

Browser automation and E2E testing with Playwright.

Setup

npm init playwright@latest

Test Structure

import { test, expect } from '@playwright/test';

test.describe('Feature: User Login', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('successful login redirects to dashboard', async ({ page }) => {
    await page.fill('[data-testid="email"]', '[email protected]');
    await page.fill('[data-testid="password"]', 'password123');
    await page.click('[data-testid="submit"]');

    await expect(page).toHaveURL('/dashboard');
    await expect(page.locator('h1')).toContainText('Welcome');
  });

  test('invalid credentials show error', async ({ page }) => {
    await page.fill('[data-testid="email"]', '[email protected]');
    await page.fill('[data-testid="password"]', 'wrongpass');
    await page.click('[data-testid="submit"]');

    await expect(page.locator('.error')).toBeVisible();
  });
});

Selector Strategies

Prefer (in order):

1. data-testid attributes - Most stable
2. Accessible roles - getByRole('button', { name: 'Submit' })
3. Text content - getByText('Sign In')
4. CSS selectors - Last resort

Avoid:

• Fragile class names (.btn-primary-v2)
• Deep nesting (.container > div > div > button)
• Index-based selectors (nth-child(3))

Common Actions

// Navigation
await page.goto('https://example.com');
await page.goBack();
await page.reload();

// Interactions
await page.click('button');
await page.fill('input', 'text');
await page.selectOption('select', 'value');
await page.check('input[type="checkbox"]');

// Waiting
await page.waitForSelector('.loaded');
await page.waitForURL('**/dashboard');
await page.waitForResponse('**/api/data');

// Assertions
await expect(page).toHaveTitle('My App');
await expect(locator).toBeVisible();
await expect(locator).toHaveText('Expected');
await expect(locator).toHaveCount(5);

Visual Testing

test('homepage visual regression', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage.png');
});

API Testing with Playwright

test('API returns correct data', async ({ request }) => {
  const response = await request.get('/api/users');
  expect(response.ok()).toBeTruthy();

  const data = await response.json();
  expect(data.users).toHaveLength(10);
});

Best Practices

1. Isolate tests - Each test should be independent
2. Use fixtures - Share setup code efficiently
3. Test real flows - Mimic actual user behavior
4. Handle async - Always await and use proper waits
5. Parallel execution - Tests should be parallelizable

Running Tests

# Run all tests
npx playwright test

# Run specific file
npx playwright test login.spec.ts

# Run with UI mode
npx playwright test --ui

# Debug mode
npx playwright test --debug

# Generate report
npx playwright show-report