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

Розроблення E2E-тестів для сайтів (Puppeteer)

Puppeteer — Node.js-бібліотека для управління Chrome/Chromium через Chrome DevTools Protocol. Це не повнофункціональний тест-фреймворк, але відлично підходить для скрепінгу, генерування PDF, скриншотів та автоматизації специфічних браузерних завдань.

Встановлення

npm install -D puppeteer jest-puppeteer
# puppeteer включає Chromium автоматично

# Для використання системного Chrome:
npm install -D puppeteer-core

Базові тести

// tests/login.test.ts
import puppeteer, { Browser, Page } from 'puppeteer';

describe('Login flow', () => {
    let browser: Browser;
    let page: Page;

    beforeAll(async () => {
        browser = await puppeteer.launch({
            headless: 'new',
            args: ['--no-sandbox'],
        });
    });

    beforeEach(async () => {
        page = await browser.newPage();
        await page.setViewport({ width: 1280, height: 900 });
    });

    afterEach(async () => await page.close());
    afterAll(async () => await browser.close());

    test('successful login', async () => {
        await page.goto('https://example.com/login');
        await page.type('#email', '[email protected]');
        await page.type('#password', 'password123');
        await page.click('[type="submit"]');

        await page.waitForNavigation({ waitUntil: 'networkidle2' });
        expect(page.url()).toContain('/dashboard');
    });

    test('error on invalid credentials', async () => {
        await page.goto('https://example.com/login');
        await page.type('#email', '[email protected]');
        await page.type('#password', 'wrong');
        await page.click('[type="submit"]');

        await page.waitForSelector('.error-message');
        const errorText = await page.$eval('.error-message', el => el.textContent);
        expect(errorText).toContain('Невірний');
    });
});

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

// Мок API
await page.setRequestInterception(true);
page.on('request', request => {
    if (request.url().includes('/api/products')) {
        request.respond({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify([{ id: 1, name: 'MacBook' }]),
        });
    } else {
        request.continue();
    }
});

Скриншоти та PDF

// Скриншот для візуального тестування
await page.screenshot({
    path: 'screenshots/homepage.png',
    fullPage: true,
    clip: { x: 0, y: 0, width: 1280, height: 900 },
});

// Генерування PDF
await page.goto('https://example.com/invoice/123');
await page.pdf({
    path: 'invoice.pdf',
    format: 'A4',
    printBackground: true,
    margin: { top: '20mm', bottom: '20mm', left: '15mm', right: '15mm' },
});

Емуляція пристроїв

import { KnownDevices } from 'puppeteer';

const iPhone = KnownDevices['iPhone 14'];
await page.emulate(iPhone);
await page.goto('https://example.com');
await page.screenshot({ path: 'mobile.png' });

Продуктивність: коли віддати перевагу Playwright

Puppeteer хорош для: скрепінгу, генерування PDF/скриншотів, автоматизації одного браузера.

Playwright краще для E2E-тестування: мультибраузерність з коробки, краще DX, стабільніші очікування, вбудовані фікстури.

Строк реалізації

Настройка Puppeteer + 20–30 сценаріїв: 3–5 днів.