Разработка E2E-тестов для сайта (Playwright)

Разработка E2E-тестов для сайта (Playwright)

Playwright — E2E-фреймворк от Microsoft. Поддерживает Chromium, Firefox, WebKit в одной версии. Быстрее Cypress на параллельных тестах, встроенная поддержка мобильных viewport, лучшие инструменты для работы с сетью.

Установка

npm install -D @playwright/test
npx playwright install  # скачать браузеры
npx playwright codegen https://example.com  # генератор кода по кликам

Конфигурация

// 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'] } },
    ],
});

Базовый тест

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

test.describe('Checkout flow', () => {
    test.beforeEach(async ({ page }) => {
        // Авторизация через API (быстрее 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: 'В корзину' }).click();
        await expect(page.getByTestId('cart-count')).toHaveText('1');

        await page.getByRole('link', { name: 'Корзина' }).click();
        await page.getByRole('button', { name: 'Оформить заказ' }).click();

        await page.getByLabel('Адрес доставки').fill('Москва, ул. Примерная, 1');
        await page.getByLabel('Телефон').fill('+79001234567');

        await page.getByRole('button', { name: 'Подтвердить заказ' }).click();

        await expect(page).toHaveURL(/\/orders\/\d+/);
        await expect(page.getByRole('heading')).toContainText('Заказ оформлен');
    });
});

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('Пароль').fill(password);
        await this.page.getByRole('button', { name: 'Войти' }).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('Неверный email или пароль');
});

Перехват запросов

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('Произошла ошибка');
});

// Мок данных
await page.route('/api/users*', async route => {
    const json = { users: [{ id: 1, name: 'Test User' }], total: 1 };
    await route.fulfill({ json });
});

Тестирование доступности

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-тестирование

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/

Срок реализации

Настройка + Page Objects + 30–50 сценариев: 5–10 дней.