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

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

Puppeteer — Node.js-библиотека для управления Chrome/Chromium через Chrome DevTools Protocol. Не является full-featured тест-фреймворком, но отлично подходит для скрапинга, генерации 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, более стабильные ожидания, встроенные fixtures.

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

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