Skip to content

Instantly share code, notes, and snippets.

@AlexJeffcott
Created July 16, 2019 11:44
Show Gist options
  • Save AlexJeffcott/74def4f0c139c65773325be78cbec678 to your computer and use it in GitHub Desktop.
Save AlexJeffcott/74def4f0c139c65773325be78cbec678 to your computer and use it in GitHub Desktop.
Performance e2e

Performance Testing e2e

stick the above file in a folder and npm i puppeteer && node 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment