Расширение функциональности Puppeteer

Puppeteer сам по себе предоставляет базовые возможности управления браузером Chromium, но его функциональность можно существенно расширять с помощью сторонних библиотек и собственных модулей. Для работы с дополнительными пакетами используется стандартный менеджер пакетов npm: 

npm install puppeteer-extra puppeteer-extra-plugin-stealth
  • puppeteer-extra — позволяет подключать плагины, расширяющие возможности Puppeteer.
  • puppeteer-extra-plugin-stealth — скрывает признаки автоматизации, делая взаимодействие с веб-страницами более естественным.

Подключение и инициализация: 

const puppeteer = require(&
const StealthPlugin = require('puppeteer-extra-plugin-stealth');

puppeteer.use(StealthPlugin());

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('https://example.com');
})();

Использование пользовательских плагинов

Плагины позволяют внедрять дополнительную логику на каждом этапе работы с браузером. Структура плагина включает:

  • name — имя плагина.
  • methods — методы, которые будут вызываться при определённых событиях (onPageCreated, beforeLaunch, afterLaunch).

Пример собственного плагина, логирующего все открытые страницы: 

const CustomLogger = {
    name: 'custom-logger',
    onPageCreated: async (page) => {
        console.log(`Создана новая страница: ${page.url()}`);
    }
};

puppeteer.use(CustomLogger);

Такой подход позволяет централизованно управлять поведением браузера и страниц, без необходимости дублировать код.

Модификация запросов и сетевых ответов

Puppeteer позволяет перехватывать и изменять сетевые запросы. Это особенно полезно для тестирования API или подмены ресурсов: 

await page.setRequestInterception(true);

page.on('request', (request) => {
    if (request.url().includes('analytics')) {
        request.abort(); // блокировка трекинговых запросов
    } else {
        request.continue();
    }
});

С помощью response-события можно перехватывать ответы: 

page.on('response', async (response) => {
    if (response.url().endsWith('.json')) {
        const data = await response.json();
        console.log('Получен JSON:', data);
    }
});

Это расширяет возможности тестирования, позволяя проверять динамическое поведение страниц и корректность данных API без изменения фронтенда.

Интеграция с внешними библиотеками

Для автоматизации сложных сценариев полезно сочетать Puppeteer с другими библиотеками:

  • Cheerio — для парсинга HTML и извлечения данных.
  • Jest / Mocha — для написания тестов и ассертов.
  • Faker — для генерации тестовых данных.

Пример комбинированного использования: 

const cheerio = require('cheerio');

const content = await page.content();
const $ = cheerio.load(content);
const titles = $('h2').map((i, el) => $(el).text()).get();
console.log(titles);

Такой подход позволяет строить более комплексные тестовые сценарии: от взаимодействия с интерфейсом до проверки содержимого страницы и API.

Расширенные методы работы с элементами

Puppeteer предоставляет базовые методы типа click или type, но можно расширять их через пользовательские функции. Например, создание универсального метода ожидания и ввода текста с проверкой: 

async function typeAndWait(page, selector, text) {
    await page.waitForSelector(selector, { visible: true });
    await page.focus(selector);
    await page.keyboard.type(text);
    await page.waitForTimeout(200); // задержка для имитации реального ввода
}

await typeAndWait(page, '#search', 'puppeteer');

Такой подход снижает вероятность ошибок из-за асинхронной природы браузера и динамического DOM.

Скриншоты, PDF и визуальное тестирование

Puppeteer позволяет расширять тесты визуальными проверками. Основные методы: 

await page.screenshot({ path: 'screenshot.png', fullPage: true });
await page.pdf({ path: 'page.pdf', format: 'A4' });

Для комплексного визуального тестирования используют сторонние библиотеки:

  • Pixelmatch — сравнение скриншотов.
  • Resemble.js — детекция изменений в изображениях.

Пример интеграции с Pixelmatch: 

const fs = require('fs');
const pixelmatch = require('pixelmatch');
const { PNG } = require('pngjs');

const img1 = PNG.sync.read(fs.readFileSync('baseline.png'));
const img2 = PNG.sync.read(fs.readFileSync('current.png'));
const { width, height } = img1;
const diff = new PNG({ width, height });

pixelmatch(img1.data, img2.data, diff.data, width, height, { threshold: 0.1 });
fs.writeFileSync('diff.png', PNG.sync.write(diff));

Это позволяет автоматически проверять визуальные регрессии при изменении интерфейса.

Автоматизация сложных сценариев

С помощью расширений Puppeteer можно автоматизировать полноценные сценарии:

  • заполнение форм с валидацией;
  • загрузка и скачивание файлов;
  • работа с множеством вкладок;
  • симуляция разных устройств и геолокаций.

Пример эмуляции мобильного устройства: 

const iPhone = puppeteer.devices['iPhone 12'];
await page.emulate(iPhone);
await page.goto('https://example.com');

Расширения и плагины позволяют комбинировать все эти возможности, создавая мощные и надежные автоматизированные тесты.

Использование браузеров кроме Chromium

Хотя Puppeteer ориентирован на Chromium, расширения дают возможность работать с другими движками, такими как Firefox: 

const puppeteer = require('puppeteer-firefox');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
})();

Это важно для кросс-браузерного тестирования и проверки совместимости интерфейсов.

Расширение функциональности Puppeteer позволяет строить тесты, которые выходят далеко за рамки базовой автоматизации кликов и ввода. Использование плагинов, перехват сетевых запросов, интеграция с внешними библиотеками, визуальное тестирование и эмуляция устройств создают полноценный инструментарий для профессионального тестирования веб-приложений.

Оглавление