Loading two urls side by side.

side_by_side_urls.js

/*
 * 1) Install Chrome Split Tabs plugin: https://chrome.google.com/webstore/detail/split-tabs/mamepagkigmnpoalafajabnljlkkocbk
 * 2) Run `/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222`
 * 3) Load two about:blank tabs side by side when chrome starts
 * 4) Start QuickTime and record screen with the two chrome tabs side by side
 * 5) Run `node side_by_side_urls.js`, which loads two urls in both tabs simultaneously
 */

const puppeteer = require(`puppeteer`);
const fetch = require(`node-fetch`);

const urls = [
  'https://mixpanel.com/project/1297132/app/flows#',
  'https://analytics.amplitude.com/demo/chart/new/jd4urvw',
];

async function main() {
  const browserWSEndpoint = (await (await fetch(`http://localhost:9222/json/version`)).json()).webSocketDebuggerUrl;
  const browser = await puppeteer.connect({browserWSEndpoint});
  const pages = await browser.pages();
  const blankPages = pages.filter((page) => page.url() === `about:blank`);
  await Promise.all(
    blankPages.map(async (page, i) => {
      await page.setViewport({width: 960, height: 1080});
      await page.goto(urls[i], {waitUntil: `load`});
    }),
  );
  process.exit(0);
}

main().catch((err) => console.log(err));