CLI report include marker screenshots for control and experiment

[lynchbomb]

Within the PDF/HTML reports include screenshots for every performance marker. Similar to:

Spike code implementation credit @krisselden @chadhietala

const { writeFileSync } = require('fs');
const { spawnChrome } = require('chrome-debugging-client');
const fs = require('fs');
​
function filterObjectByKeys(obj, keyArray) {
  const o = Object.assign({}, obj);
  const k = Object.keys(o);
  k.forEach(c => {
    if (!keyArray.includes(c)) {
      delete o[c];
    }
  });
​
  return o;
}
​
async function setCookies(page, cookies) {
  for (let i = 0; i < cookies.length; i++) {
    const cookie = filterObjectByKeys(cookies[i], ['name', 'value', 'domain']);
    await page.send('Network.setCookie', cookie);
  }
}
​
async function screenShot(url, file) {
  const chrome = spawnChrome({ headless: false });
  try {
    const browser = chrome.connection;
​
    await browser.send('Security.enable');
    await browser.send('Security.setIgnoreCertificateErrors', { ignore: true });
​
    const { targetId } = await browser.send('Target.createTarget', {
      url: 'about:blank',
    });
    const page = await browser.attachToTarget(targetId);
​
    // enable events for Page domain
    await page.send('Page.enable');
    await setCookies(page, JSON.parse(fs.readFileSync('cookies.json', 'utf8')));
    await page.send('Page.setLifecycleEventsEnabled', { enabled: true });
​
    const result = await page.send('Page.getFrameTree');
    const mainFrameId = result.frameTree.frame.id;
​
    await page.send('Tracing.start', {
      traceConfig: {
        includedCategories: ['blink.user_timing', 'disabled-by-default-devtools.screenshot']
      }
    });
​
    let events = [];
    page.on('Tracing.dataCollected', ({ value }) => {
      events = events.concat(value);
    });
    // concurrently wait until load and navigate
    await Promise.all([
      page.until('Page.loadEventFired'),
      page.send('Page.navigate', { url }),
    ]);
​
    await page.until('Page.lifecycleEvent', event => {
      return event.name === 'networkAlmostIdle' && event.frameId === mainFrameId;
    });
​
    await new Promise(resolve => setTimeout(resolve, 4000));
​
    await Promise.all([
      page.until('Tracing.tracingComplete'),
      page.send('Tracing.end')
    ]);
​
    writeFileSync(file, JSON.stringify(events, null, 2), 'utf8');
​
    events.sort((a, b) => {
      return a.ts - b.ts;
    });
​
    let before;
    let after;
    let fmpMarker;
    for (let i = 0; i < events.length; i++) {
      let evt = events[i];
      let type = evt.ph;
​
      if (type === 'O' && evt.name === 'Screenshot' && fmpMarker === undefined) {
        before = evt;
        continue;
      }
​
      if (type === 'R' && evt.name.startsWith('FMP_')) {
        fmpMarker = evt;
      }
​
      if (type === 'O' && evt.name === 'Screenshot' && fmpMarker !== undefined) {
        after = evt;
        break;
      }
    }
​
    fs.writeFileSync('before.png', before.args.snapshot, 'base64');
    fs.writeFileSync('after.png', after.args.snapshot, 'base64');
    console.log('Delta: ', fmpMarker.ts - before.ts, after.ts - fmpMarker.ts);
    // attempt graceful close
    await chrome.close();
  } finally {
    // kill process if hasn't exited
    await chrome.dispose();
  }
​
  console.log(`${url} written to ${file}`);
}
​
if (process.argv.length < 4) {
  console.log(`usage: printToPDF.js url file`);
  console.log(
    `example: printToPDF.js https://en.wikipedia.org/wiki/Binomial_coefficient Binomial_coefficient.pdf`
  );
  process.exit(1);
}
​
printToPDF(process.argv[2], process.argv[3]);

[lynchbomb]

With the recent 4.0.0 release we now drastically expand tracing categories for the first sample of the control and experiment, which includes screenshots.

This issue should be implemented within the current major.