Изначально это сообщение появилось на странице https://fdalvi.github.io/blog/2018-02-05-puppeteer-network-throttle/. Загляните в блог, чтобы увидеть больше подобных сообщений!
Кукловод - отличный способ запустить Chrome (или Chromium) в безголовом режиме, то есть загружать веб-страницы и взаимодействовать с ними, даже не видя их визуально.
Почему это может быть полезно?
Безголовый браузер - отличный способ автоматизировать тестирование даже на удаленных серверах!
Puppeteer предоставляет приятный интерфейс через Узел для сценария любых взаимодействий, которые вы можете иметь со страницей, таких как ввод данных в текстовое поле, нажатие кнопки и так далее. Он также позволяет делать снимки экрана или конвертировать веб-страницы в PDF-файлы.
Теперь Puppeteer не поддерживает дросселирование сети из коробки, но у него есть способ напрямую взаимодействовать с Chrome DevTools, которые поддерживают дросселирование. Рассматриваемое свойство DevTools - Network.emulateNetworkConditions
, и оно ожидает конфигурацию со следующими атрибутами:
let config = { // Whether chrome should simulate // the absence of connectivity ‘offline’: false, // Simulated download speed (bytes/s) ‘downloadThroughput’: 500, // Simulated upload speed (bytes/s) ‘uploadThroughput’: 500, // Simulated latency (ms) ‘latency’: 20 }
В качестве примера допустим, что вы хотите загрузить этот сайт с подключением 200 Кб / с и задержкой 20 мс и сделать снимок экрана перед завершением работы, вы можете использовать следующий сценарий:
const puppeteer = require('puppeteer') puppeteer.launch().then(async browser => { // Create a new tab const page = await browser.newPage() // Connect to Chrome DevTools const client = await page.target().createCDPSession() // Set throttling property await client.send(‘Network.emulateNetworkConditions’, { 'offline': false, 'downloadThroughput': 200 * 1024 / 8, 'uploadThroughput': 200 * 1024 / 8, 'latency': 20 }) // Navigate and take a screenshot await page.goto('https://fdalvi.github.io') await page.screenshot({path: 'screenshot.png'}) await browser.close() })
Chrome DevTools также имеет несколько хороших предустановок, таких как 3G (а раньше их было намного больше!). Хотя исходных пресетов нет, исходный файл в репозитории Chromium по-прежнему содержит пресеты, перечисленные ниже для удобства. Просто замените вторую опцию в строке 11 на NETWORK_PRESETS['...']
, чтобы использовать выбранную вами предустановку. Эти значения, вероятно, являются средними значениями для каждого типа подключения, и все / 8
операции связаны с тем, что скорость сети обычно измеряется в бит / с, в то время как DevTools ожидает пропускную способность в байтах / с !
let NETWORK_PRESETS = { 'GPRS': { 'offline': false, 'downloadThroughput': 50 * 1024 / 8, 'uploadThroughput': 20 * 1024 / 8, 'latency': 500 }, 'Regular2G': { 'offline': false, 'downloadThroughput': 250 * 1024 / 8, 'uploadThroughput': 50 * 1024 / 8, 'latency': 300 }, 'Good2G': { 'offline': false, 'downloadThroughput': 450 * 1024 / 8, 'uploadThroughput': 150 * 1024 / 8, 'latency': 150 }, 'Regular3G': { 'offline': false, 'downloadThroughput': 750 * 1024 / 8, 'uploadThroughput': 250 * 1024 / 8, 'latency': 100 }, 'Good3G': { 'offline': false, 'downloadThroughput': 1.5 * 1024 * 1024 / 8, 'uploadThroughput': 750 * 1024 / 8, 'latency': 40 }, 'Regular4G': { 'offline': false, 'downloadThroughput': 4 * 1024 * 1024 / 8, 'uploadThroughput': 3 * 1024 * 1024 / 8, 'latency': 20 }, 'DSL': { 'offline': false, 'downloadThroughput': 2 * 1024 * 1024 / 8, 'uploadThroughput': 1 * 1024 * 1024 / 8, 'latency': 5 }, 'WiFi': { 'offline': false, 'downloadThroughput': 30 * 1024 * 1024 / 8, 'uploadThroughput': 15 * 1024 * 1024 / 8, 'latency': 2 } }