puppeteer.ts

// A wrapper for puppeteer.

import * as P from "puppeteer"

export const browser = P.launch()

export async function createPage() {
  const page = await (await browser).newPage()
  return new Page(page)
}

export class Page {
  readonly #page: P.Page

  constructor(page: P.Page) {
    this.#page = page

    page.evaluate(`// This injects a box into the page that moves with the mouse;
// Useful for debugging
(function () {
  const box = document.createElement('div');
  box.classList.add('mouse-helper');
  const styleElement = document.createElement('style');
  styleElement.innerHTML = \`
  .mouse-helper {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,.4);
    border: 1px solid white;
    border-radius: 10px;
    margin-left: -10px;
    margin-top: -10px;
    transition: background .2s, border-radius .2s, border-color .2s;
  }
  .mouse-helper.button-1 {
    transition: none;
    background: rgba(0,0,0,0.9);
  }
  .mouse-helper.button-2 {
    transition: none;
    border-color: rgba(0,0,255,0.9);
  }
  .mouse-helper.button-3 {
    transition: none;
    border-radius: 4px;
  }
  .mouse-helper.button-4 {
    transition: none;
    border-color: rgba(255,0,0,0.9);
  }
  .mouse-helper.button-5 {
    transition: none;
    border-color: rgba(0,255,0,0.9);
  }
  \`;
  document.head.appendChild(styleElement);
  document.body.appendChild(box);
  document.addEventListener(
    'mousemove',
    (event) => {
      box.style.left = event.pageX + 'px';
      box.style.top = event.pageY + 'px';
      updateButtons(event.buttons);
    },
    true
  );
  document.addEventListener(
    'mousedown',
    (event) => {
      updateButtons(event.buttons);
      box.classList.add('button-' + event.which);
    },
    true
  );
  document.addEventListener(
    'mouseup',
    (event) => {
      updateButtons(event.buttons);
      box.classList.remove('button-' + event.which);
    },
    true
  );
  function updateButtons(buttons) {
    for (let i = 0; i < 5; i++)
      {box.classList.toggle('button-' + i, buttons & (1 << i));}
  }
})();`)
  }

  setViewport(width: number, height: number) {
    this.#page.setViewport({ height, width })
  }

  screenshot() {
    return this.#page.screenshot()
  }
}