Puppeteer can automate that! - HolyJS Piter 2020

possibly
Puppeteer can
automate that!
with the help of minions

Önder Ceylan
@onderceylan
Sharing knowledge on #javascript, #typescript, #angular, #ionic and #pwa
JS Tech Lead @LINKIT
Speaker, Organiser @ITNEXT
Speaker, Organiser @GDG NL

Headless Chrome
chrome —-headless —-remote-debugging-port=9222

“Most things that you can do
manually in the browser can be
done using Puppeteer! ”

Examples to get you started
• Generate screenshots and PDFs of pages
• Crawl a SPA and generate pre-rendered
content
• Automate form submission, UI testing,
keyboard input, etc
• Capture a timeline trace of your site to
help diagnose performance issues

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://www.linkit.nl');
  await page.screenshot({path: 'screenshot.png'});
  await browser.close();
});

github.com/transitive-bullshit/awesome-puppeteer

Xander 🇳🇱 👨🦳
Yelda 🇹🇷 👩🦱
Milena 🇷🇺 👩🦳

Text to speech!
Milena 🇷🇺 👩🦳

Text to speech!
Xander 🇳🇱 👨🦳

Text to speech!
Yelda 🇹🇷 👩🦱

await page.goto('https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html');
await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'light' }]);
await page.screenshot({ path: 'light.jpg', type: 'jpeg', omitBackground: true });
await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }]);
await page.screenshot({ path: 'dark.jpg', type: 'jpeg', omitBackground: true });
Emulating color scheme

await page.goto(‘https://www.linkit.nl');
await page.addScriptTag(
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/3.3.2/axe.min.js' }
);
const results = await page.evaluate(() => axe.run(document));
expect(results.violations.length).toBe(0);
Accessibility test

const pti = require('puppeteer-to-istanbul');
await page.coverage.startJSCoverage();
await page.goto('https://www.linkit.nl/');
const jsCoverage = await page.coverage.stopJSCoverage();
pti.write(jsCoverage);
await page.close();
Code coverage test

throttle network
track memory usage
emulate devices
run audits

github.com/ChromeDevTools/devtools-frontend

Protocol Monitor
chrome://flags/#enable-devtools-experiments

chrome —-remote-debugging-port=9222
Chrome DevTools
Protocol

chromedevtools.github.io/devtools-protocol

github.com/ChromeDevTools/awesome-chrome-devtools

Using DevTools
Protocol with PPTR

puppeteer.launch().then(async browser => {
const session = await page.target().createCDPSession();
  session.on('Animation.animationCreated', () => {
    console.log('Animation created!');
  });
  await session.send('Animation.enable');
  await session.send('Animation.setPlaybackRate', {
    playbackRate: 10,
  });
});

Puppeteer Core
npm i puppeteer-core

Puppeteer Core
browser = await puppeteer.connect({
browserWSEndpoint: 'ws://127.0.0.1:9222/.../...'
});
// or
browser = await puppeteer.launch({
executablePath: '/Applications/Google Chrome.app
/Contents/MacOS/Google Chrome'
});

Chrome Launcher
npm i chrome-launcher

// Launches a debugging instance of Chrome
function launchChrome(headless=true) {
  return chromeLauncher.launch({
    // port: 9222,
    chromeFlags: [
      '--window-size=412,732',
      '--disable-gpu',
      headless ? '--headless' : ''
    ]
  });
}
launchChrome().then(chrome => {
  console.log(`Chrome debuggable on port: ${chrome.port}`);
  // chrome.kill();
});
chrome instance

Puppeteer Light
npm i puppeteer-core
npm i chrome-launcher

github.com/onderceylan/pwa-asset-generator

await Promise.all(filters.map(async (filter) => {
await page.setContent(`
<style>/* Page styles here */</style>
<figure class="${filter}">
<img src="${getImageBase64Url('./sample.jpg')}">
<span>@onderceylan</span>
</figure>
`, { waitUntil: 'networkidle2' });
await page.addStyleTag({
url: 'https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css'
});
// Get original image dimensions
const { width, height } = await page.evaluate(() => {
return (({naturalWidth: width, naturalHeight: height}) =>
({width, height}))(document.querySelector('img'));
});
await page.setViewport({ width, height });
await page.screenshot({
path: `pptgram/pptrgram-${filter}.jpeg`,
type: 'jpeg',
quality: 70,
fullPage: true,
});
});
PptrGram

await page.goto(`http://localhost:8002/tensorflow.html`);
const result = await page.evaluate(() => {
const img = document.getElementById('img');
// Load the model
return cocoSsd.load().then(model => model.detect(img))
});
console.log(result);
PptrFlow

await page.goto('https://www.linkit.nl/');
expect(await page.content()).toMatchSnapshot();
DOM Snapshot Testing

Budgets on perf metrics
{ name: 'Timestamp', value: 66567.150449 },
{ name: 'AudioHandlers', value: 0 },
{ name: 'Documents', value: 8 },
{ name: 'Frames', value: 3 },
{ name: 'JSEventListeners', value: 34 },
{ name: 'LayoutObjects', value: 455 },
{ name: 'MediaKeySessions', value: 0 },
{ name: 'MediaKeys', value: 0 },
{ name: 'Nodes', value: 970 },
{ name: 'Resources', value: 74 },
{ name: 'ContextLifecycleStateObservers',
value: 0 },
{ name: 'V8PerContextDatas', value: 4 },
{ name: 'WorkerGlobalScopes', value: 0 },
{ name: 'UACSSResources', value: 0 },
{ name: 'RTCPeerConnections', value: 0 },
{ name: 'ResourceFetchers', value: 8 },
{ name: 'AdSubframes', value: 0 }
{ name: 'DetachedScriptStates', value: 2 },
{ name: 'LayoutCount', value: 13 },
{ name: 'RecalcStyleCount', value: 22 },
{ name: 'LayoutDuration', value: 0.067929 },
{ name: 'RecalcStyleDuration', value: 0.029508 },
{ name: 'ScriptDuration', value: 0.122922 },
{ name: 'V8CompileDuration', value: 0.003031 },
{ name: 'TaskDuration', value: 0.336774 },
{ name: 'TaskOtherDuration', value: 0.116415 },
{ name: 'ThreadTime', value: 0.275266 },
{ name: 'JSHeapUsedSize', value: 7816504 },
{ name: 'JSHeapTotalSize', value: 11096064 },
{ name: 'FirstMeaningfulPaint', value: 66565.452541 },
{ name: 'DomContentLoaded', value: 66565.386449 },
{ name: 'NavigationStart', value: 66564.624457 }
Performance.getMetrics

[
{
"path": "/",
"perfMetrics": [
{
"metric": "JSEventListeners",
"budget": 100
},
{
"metric": "Nodes",
"budget": 2000
},
{
"metric": "JSHeapUsedSize",
"budget": 20000000
}
]
}
]
[
{
"path": "/vacatures",
"perfMetrics": [
{
"metric": "Resources",
"budget": 80
}
]
}
]
budget.json

const { getBudgetMetricsOfPage, getMatchedPageMetrics,
getBudgetMetricByPageMetricName } = require(‘./helpers');
const assertMetricsOnUrl = async (siteUrl) => {
const page = await this.browser.newPage();
const protocol = await page.target().createCDPSession();
await protocol.send('Performance.enable');
await page.goto(siteUrl, { waitUntil: 'networkidle0' });
const budgetMetrics = await getBudgetMetricsOfPage(page);
const { metrics: pageMetrics } = await protocol.send('Performance.getMetrics');
const matchedMetrics = getMatchedPageMetrics(pageMetrics, budgetMetrics);
matchedMetrics.forEach(pageMetric => {
expect(pageMetric.value).toBeLessThan(
getBudgetMetricByPageMetricName(budgetMetrics, pageMetric)
);
});
await page.close();
};

beforeAll(async () => {
this.browser = await puppeteer.launch();
});
afterAll(async () => {
await this.browser.close();
});
test('asserts budget performance metrics on the main page', async() => {
await assertMetricsOnUrl('https://www.linkit.nl/');
});
test('asserts budget performance metrics on vacatures page', async() => {
await assertMetricsOnUrl('https://www.linkit.nl/vacatures');
});

await protocol.send('Overlay.setShowFPSCounter', { show: true });
// Do graphical regressions here by interacting with the page
await protocol.send('Input.synthesizeScrollGesture', {
x: 100,
y: 100,
yDistance: -400,
repeatCount: 3
});
path: 'fps.jpeg',
type: 'jpeg',
clip: {
x:0,
y:0,
width: 370,
height: 370
}
});
FPS Monitoring

await protocol.send('HeapProfiler.enable');
await protocol.send('HeapProfiler.collectGarbage');
const startMetrics = await page.metrics();
// Do memory regressions here by interacting with the page
await protocol.send('Input.synthesizeScrollGesture', {
x: 100,
y: 100,
yDistance: -400,
repeatCount: 3
});
await protocol.send('HeapProfiler.collectGarbage');
const endMetrics = await page.metrics();
expect(endMetrics.JSHeapUsedSize < startMetrics.JSHeapUsedSize * 1.1)
.toBeTruthy();
Memory leak by Heap

// Get a handle to the Map object prototype
const mapPrototype = await page.evaluateHandle(() => Map.prototype);
// Query all map instances into an array
const mapInstances = await page.queryObjects(mapPrototype);
// Count amount of map objects in heap
const count = await page.evaluate(maps => maps.length, mapInstances);
// Idea here is to test object instances on the page
// where it's expected to be invalidated
expect(count).toBe(0);
Memory leak by Prototype

Monitor change on security state

await protocol.send('Security.enable');
protocol.on('Security.securityStateChanged', console.log);
Monitor change on security state

Monitor SSL certificate expiration

page.on('response', (resp) => {
const url = resp.url();
if (url === siteUrl) {
const secDetails = resp.securityDetails();
const now = Math.floor((new Date()).getTime() / 1000);
console.log((Math.floor((secDetails.validTo() - now) / 86400)),
'days to expire');
}
});
await page.goto(siteUrl, { waitUntil: 'networkidle0' });
Monitor SSL certificate expiration

Main Takeaways
• Chrome can be instrumented with a WS connection over
Chrome DevTools Protocol — CDP
• You might not need to download chromium revision every time
—puppeteer-core + chrome-launcher
• Headless chrome can be executed on server environments —
cloud, and CI pipelines
• You can automate anything you do on DevTools, by using raw
protocol of CDP on puppeteer—CDPSession

Puppeteer can automate that! - HolyJS Piter 2020

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Puppeteer can automate that! - HolyJS Piter 2020

Similar to Puppeteer can automate that! - HolyJS Piter 2020 (20)

More from Önder Ceylan

More from Önder Ceylan (6)

Recently uploaded

Recently uploaded (20)

Puppeteer can automate that! - HolyJS Piter 2020