Puppeteer Recorder (no longer maintained)

⚠️This package was a prototype for what can now be found in Chromium DevTools as theRecorderexperiment and will no longer be maintained.

Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over theDevTools Protocol.

This repository allows you to record Puppeteer scripts by interacting with the browser.

To start a new recording:

npx @puppeteer/recorder [url]

Every interaction with the page will be recorded and printed to the console as a script, which you can run with puppeteer. For now, this will download Chromium every time again. This has to be addressed on the puppeteer side. As a workaround, build this package locally (seeSetup).

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

Command line options

• Pass--output file.jsto write the output script to a file

Architecture

This project consists of three parts:

• Recorder:A CLI script that starts a Chromium instance to record user interactions
• Runner:An NPM package to abstract away the puppeteer details when running a recording
• Injected Script:The recorder injects this script into the browser to collect user interactions

Selectors

The usual way of identifying elements within a website is to use a CSS selector. But a lot of websites use automatically generated class names that do not carry any semantic value, and change frequently. To increase the reliability of scripts generated with this tool, we query using the ARIA model. Instead of

#tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input

the same element can also be identified by

combobox[name= "Search" ]

Setup

You can also check out this repository locally. To compile theinjected script,therecorderand therunner:

npm install
npm run build

To make the package available to run vianpx:

npm link

To run the package vianpx:

npx recorder [url]

When running a recorded script, make sure this package is available in the localnode_modulesfolder:

npm link @puppeteer/recorder

Debugging

Use the runner withDEBUG=1to execute the script line by line.

For maintainers

How to publish new releases to npm

1. On themainbranch, bump the version number inpackage.json:

   npm version patch -m'Release v%s'

   Instead ofpatch,useminorormajoras needed.

   Note that this produces a Git commit + tag.

2. Push the release commit and tag:

   git push#push the commit
   git push origin v0.1.2#push the tag

   Our CI then automatically publishes the new release to npm.

Known limitations

There are a number of known limitations:

• It's currently not possible to record interactions inside ofshadow doms
• It only records clicks, changes to text fields and form submits for now
• It does not handleOut-of-Process iframes(See Bug)