Puppeteer Recorder

:warning: This is still work in progress

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

This repository allows to record puppeteer scripts by interacting with the browser:

npx @pptr/recorder [url]

will start a new browser in which every interaction with the page will be recorded and printed to the console as a script runnable via puppeteer.

const {open, click, type, submit} = require('@pptr/recorder');
open('https://www.google.com/?hl=en', async () => {
  await click('ariaName/Search');
  await type('ariaName/Search', 'calculator');
  await click('ariaName/Google Search');
  await click('ariaName/1');
  await click('ariaName/plus');
  await click('ariaName/2');
  await click('ariaName/equals');
});

Architecture

This project consists of three parts:

• Recorder: Cli script that starts a Chromium instance to record user interactions
• Runner: Npm package to abstract away the puppeteer details when running recorded interactions
• Injected Script: The recorder will automatically inject a script into the browser to collect information about interactions and to relay them to the recorder

Setup

When checking out the repository locally, you can use

npm run build

to compile the injected script, the recorder and the runner. By running npm link, the package will become available to be run via npx. When running the recorded scripts, make sure the package is available in their node_modules folder by using npm link @pptr/recorder.

Debugging

Use the runner with DEBUG=1 to execute the script line by line.

Known limitations

There are a number of known limitations:

• It's currently not possible to record interactions inside of shadow doms
• It only records clicks, changes to text fields and form submits for now