Изначально это сообщение появилось на странице 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
  }
}