Розробка 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('завершити розміщення замовлення', 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('+380501234567');

        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('логін з неправильними даними', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('[email protected]', 'wrongpass');
    await loginPage.expectError('Неверний email або пароль');
});

Перехоплення запитів

test('показує помилку при збої API', 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('домашня сторінка не має порушень WCAG', async ({ page }) => {
    await page.goto('/');
    const results = await new AxeBuilder({ page })
        .withTags(['wcag2aa'])
        .analyze();

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

Snapshot-тестування

test('UI збігається зі 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 днів.