E2E tests development for website (Playwright)

Developing E2E Tests for Website (Playwright)

Playwright—E2E framework from Microsoft. Supports Chromium, Firefox, WebKit in single version. Faster than Cypress on parallel tests, built-in mobile viewport support, better network tools.

Installation

npm install -D @playwright/test
npx playwright install  # download browsers
npx playwright codegen https://example.com  # code generator for clicks

Configuration

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
    testDir: './tests',
    timeout: 30_000,
    retries: process.env.CI ? 2 : 0,
    workers: process.env.CI ? 4 : undefined,

    reporter: [
        ['html', { outputFolder: 'playwright-report' }],
        ['github'],
    ],

    use: {
        baseURL: process.env.BASE_URL || 'http://localhost:3000',
        trace: 'on-first-retry',
        screenshot: 'only-on-failure',
    },

    projects: [
        { name: 'chromium',        use: { ...devices['Desktop Chrome'] } },
        { name: 'firefox',         use: { ...devices['Desktop Firefox'] } },
        { name: 'webkit',          use: { ...devices['Desktop Safari'] } },
        { name: 'mobile-chrome',   use: { ...devices['Pixel 7'] } },
        { name: 'mobile-safari',   use: { ...devices['iPhone 14'] } },
    ],
});

Basic Test

// tests/checkout.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Checkout flow', () => {
    test.beforeEach(async ({ page }) => {
        // Login via API (faster than UI)
        const response = await page.request.post('/api/auth/login', {
            data: { email: '[email protected]', password: 'password' },
        });
        const { token } = await response.json();
        await page.context().addCookies([{ name: 'auth_token', value: token, url: '/' }]);
    });

    test('complete order placement', async ({ page }) => {
        await page.goto('/products/laptop-pro');

        await page.getByRole('button', { name: 'Add to cart' }).click();
        await expect(page.getByTestId('cart-count')).toHaveText('1');

        await page.getByRole('link', { name: 'Cart' }).click();
        await page.getByRole('button', { name: 'Checkout' }).click();

        await page.getByLabel('Shipping address').fill('New York, 123 Main St');
        await page.getByLabel('Phone').fill('+19001234567');

        await page.getByRole('button', { name: 'Confirm order' }).click();

        await expect(page).toHaveURL(/\/orders\/\d+/);
        await expect(page.getByRole('heading')).toContainText('Order placed');
    });
});

Page Object Model

// pages/LoginPage.ts
import { Page, expect } from '@playwright/test';

export class LoginPage {
    constructor(private page: Page) {}

    async goto() {
        await this.page.goto('/login');
    }

    async login(email: string, password: string) {
        await this.page.getByLabel('Email').fill(email);
        await this.page.getByLabel('Password').fill(password);
        await this.page.getByRole('button', { name: 'Login' }).click();
    }

    async expectError(message: string) {
        await expect(this.page.getByRole('alert')).toContainText(message);
    }
}

// tests/login.spec.ts
test('login with invalid credentials', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('[email protected]', 'wrongpass');
    await loginPage.expectError('Invalid email or password');
});

Intercepting Requests

test('shows error on API failure', async ({ page }) => {
    await page.route('/api/products', route =>
        route.fulfill({ status: 500, body: 'Server Error' })
    );

    await page.goto('/products');
    await expect(page.getByRole('alert')).toContainText('An error occurred');
});

// Mock data
await page.route('/api/users*', async route => {
    const json = { users: [{ id: 1, name: 'Test User' }], total: 1 };
    await route.fulfill({ json });
});

Testing Accessibility

import AxeBuilder from '@axe-core/playwright';

test('homepage has no WCAG violations', async ({ page }) => {
    await page.goto('/');
    const results = await new AxeBuilder({ page })
        .withTags(['wcag2aa'])
        .analyze();

    expect(results.violations).toHaveLength(0);
});

Snapshot Testing

test('UI matches snapshot', async ({ page }) => {
    await page.goto('/components');
    await expect(page).toHaveScreenshot('components-page.png', {
        maxDiffPixels: 100,
    });
});

GitHub Actions

- name: Install Playwright
  run: npx playwright install --with-deps

- name: Run Playwright tests
  run: npx playwright test --workers=4

- name: Upload report
  uses: actions/upload-artifact@v3
  if: always()
  with:
    name: playwright-report
    path: playwright-report/

Timeline

Setup + Page Objects + 30–50 scenarios: 5–10 days.