Кастомные команды CDP

Puppeteer предоставляет мощный API для автоматизации браузера на базе Chromium, однако стандартные методы не всегда охватывают все возможности, которые доступны через Chrome DevTools Protocol (CDP). Использование кастомных команд CDP позволяет получить полный контроль над браузером, расширяя возможности тестирования и автоматизации.

Основы работы с CDP

CDP — это протокол, который позволяет напрямую взаимодействовать с движком Chromium на уровне вкладок, сетевого стека, рендеринга и JavaScript-движка. Puppeteer скрывает часть сложности, но при необходимости можно отправлять собственные команды: 

const client = await page.target().createCDPSession(); await
client.send(&


Здесь createCDPSession() создаёт сессию для отправки команд
в DevTools Protocol. Метод send принимает название
команды и объект параметров.






Пример: отслеживание сетевых запросов




Стандартные Puppeteer события, такие как
page.on(‘request’), удобны, но CDP даёт детализированную
информацию:



const client = await page.target().createCDPSession();
await client.send('Network.enable');

client.on('Network.requestWillBeSent', (params) => {
    console.log('URL запроса:', params.request.url);
    console.log('Метод:', params.request.method);
    console.log('Заголовки:', params.request.headers);
});



Преимущества CDP:



    

  • 
Доступ к внутренним ID запросов.

    • 

  • 
Подробные данные о редиректах.

    • 

  • 
Возможность перехвата и модификации запросов до отправки.

    • 






Управление вкладками и окнами




CDP позволяет создавать и закрывать вкладки напрямую:



const { targetId } = await client.send('Target.createTarget', { url: 'https://example.com' });
await client.send('Target.activateTarget', { targetId });



Можно использовать команды Target для управления не только
вкладками, но и поп-апами, iframe, а также контролировать окна браузера
на уровне сессии.






Работа с сетевыми условиями




Эмуляция сетевых условий через стандарт Puppeteer ограничена, но CDP
позволяет задать точные параметры:



await client.send('Network.emulateNetworkConditions', {
    offline: false,
    latency: 200,
    downloadThroughput: 500 * 1024,
    uploadThroughput: 500 * 1024
});



Так можно тестировать поведение веб-приложения при различных условиях
сети: медленные соединения, пакетная потеря, полное отключение.






Отладка производительности и логирование




CDP предоставляет доступ к Tracing,
Performance и Log:



await client.send('Tracing.start', {
    categories: ['devtools.timeline'],
    options: 'sampling-frequency=10000',
});

await page.goto('https://example.com');

const tracing = await client.send('Tracing.end');
console.log('Трассировка завершена, данные:', tracing);



Эти команды позволяют собирать данные о рендеринге, загрузке ресурсов и
времени выполнения скриптов, что невозможно получить через стандартные
Puppeteer методы.






Кастомизация JavaScript среды




Можно напрямую управлять интерпретатором V8 через CDP:



await client.send('Runtime.evaluate', {
    expression: 'window.customValue = 42;'
});

const { result } = await client.send('Runtime.evaluate', {
    expression: 'window.customValue'
});
console.log(result.value); // 42



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






Перехват и модификация ответов




CDP позволяет не только наблюдать сетевой трафик, но и изменять ответы
сервера:



await client.send('Fetch.enable', { patterns: [{ urlPattern: '*', requestStage: 'Response' }] });

client.on('Fetch.requestPaused', async (event) => {
    const responseBody = 'Hello, Puppeteer CDP!';
    await client.send('Fetch.fulfillRequest', {
        requestId: event.requestId,
        responseCode: 200,
        body: Buffer.from(responseBody).toString('base64')
    });
});



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






Рекомендации по использованию кастомных команд



    

  1. 
Создавать отдельные CDP сессии для каждого типа
взаимодействия: сети, вкладок, runtime.

    2. 

  2. 
Всегда отключать функции, которые вы включали через
send (например, Network.disable), чтобы не
оставлять открытые подписки.

    3. 

  3. 
Логировать ошибки CDP команд, так как протокол строг к
параметрам и названиям команд.

    4. 

  4. 
Использовать CDP только для задач, недоступных через Puppeteer
API, чтобы не усложнять код без необходимости.

    5. 






Синхронизация с Puppeteer событиями




Для удобства можно комбинировать стандартные события Puppeteer и CDP:



page.on('response', async (response) => {
    const headers = response.headers();
    console.log('Стандартное событие:', headers);
});

client.on('Network.responseReceived', (params) => {
    console.log('CDP событие:', params.response.headers);
});



Это позволяет сравнивать данные и выявлять детали, недоступные через
один только API Puppeteer.






Кастомные команды CDP в Puppeteer раскрывают полный потенциал браузера,
открывая возможности глубокого тестирования, контроля сетевых потоков,
управления вкладками и анализа производительности. Такой подход
позволяет создавать точные, надёжные и детализированные тестовые
сценарии, недостижимые стандартными методами.
Оглавление