Performance e2e

readme.md

Performance Testing e2e

stick the above file in a folder and npm i puppeteer && node example.js

example.js

const puppeteer = require('puppeteer')

const SLOW_DEVICE = 'SLOW_DEVICE'
const MEDIUM_DEVICE = 'MEDIUM_DEVICE'
const FAST_DEVICE = 'FAST_DEVICE'

const emulate = async (client, deviceType) => {
  switch (deviceType) {
    case SLOW_DEVICE:
      await client.send('Network.enable')

      // Simulate slow network
      await client.send('Network.emulateNetworkConditions', {
        offline: false,
        latency: 200,
        downloadThroughput: (768 * 1024) / 8,
        uploadThroughput: (330 * 1024) / 8
      })

      // Simulate poor CPU
      await client.send('Emulation.setCPUThrottlingRate', { rate: 6 })
      break
    case MEDIUM_DEVICE:
      await client.send('Network.enable')

      // Simulate medium network
      await client.send('Network.emulateNetworkConditions', {
        offline: false,
        latency: 200,
        downloadThroughput: (768 * 1024) / 8,
        uploadThroughput: (330 * 1024) / 8
      })

      // Simulate medium CPU
      await client.send('Emulation.setCPUThrottlingRate', { rate: 4 })
      break
    case FAST_DEVICE:
      await client.send('Network.enable')

      // Simulate fast network but still in "real" conditions
      await client.send('Network.emulateNetworkConditions', {
        offline: false,
        latency: 28,
        downloadThroughput: (5 * 1024 * 1024) / 8,
        uploadThroughput: (1024 * 1024) / 8
      })
      break
    default:
      console.error(`No such deviceType as '${deviceType}'`)
  }
}

const setup = async deviceType => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  const client = await page.target().createCDPSession()
  await emulate(client, deviceType)
  await client.send('Performance.enable')
  await page.setViewport({
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1
  })
  return { browser, page }
}

const testIt = async (target, withScreenshot = false, deviceType = FAST_DEVICE) => {
  const { browser, page } = await setup(deviceType)
  await page.goto(target)
  if (withScreenshot) await page.screenshot({ path: 'netflix.png' })
  const perf = await page.evaluate(() => window.performance.toJSON())
  const navStart = perf.timing.navigationStart
  const domInteractive = perf.timing.domInteractive
  const domComplete = perf.timing.domComplete
  console.log({
    deviceType,
    toInteractive: domInteractive - navStart,
    toDomComplete: domComplete - navStart
  })
  await browser.close()
}

testIt('https://www.netflix.com/browse', false, FAST_DEVICE)
testIt('https://www.netflix.com/browse', false, FAST_DEVICE)
testIt('https://www.netflix.com/browse', false, FAST_DEVICE)
// testIt('https://www.netflix.com/browse', false, MEDIUM_DEVICE)
// testIt('https://www.netflix.com/browse', false, SLOW_DEVICE)