playwright

Playwright End-to-End Testing

Instructions

1. Assess the testing scope: Determine if it's E2E tests, API tests, or visual regression.
2. Follow Playwright conventions:
   • Test files: *.spec.ts in tests/ or e2e/ directory
   • Use test and expect from @playwright/test
   • Leverage auto-waiting and web-first assertions
3. Provide complete examples: Include page objects, fixtures, and proper selectors.
4. Guide on best practices: Locators, parallelization, debugging.
5. Cover advanced features: Network mocking, authentication, visual comparison.

Test Structure

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

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

  test('should login with valid credentials', 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.getByRole('heading')).toHaveText('Welcome');
  });

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

    await expect(page.getByText('Invalid credentials')).toBeVisible();
  });
});

Locators (Recommended Order)

// 1. Role-based (most resilient)
page.getByRole('button', { name: 'Submit' });
page.getByRole('textbox', { name: 'Email' });
page.getByRole('link', { name: 'Sign up' });

// 2. Label/placeholder text
page.getByLabel('Email address');
page.getByPlaceholder('Enter your email');

// 3. Text content
page.getByText('Welcome back');
page.getByText(/welcome/i);  // Case-insensitive regex

// 4. Test IDs (explicit)
page.getByTestId('submit-button');

// 5. CSS selectors (last resort)
page.locator('.submit-btn');
page.locator('#email-input');