⚠️ This is still work in progress
Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over the DevTools 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 (see Setup).
const {open, click, type, submit} = require('@puppeteer/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');
});
- Pass
--output file.js
to write the output script to a file
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
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"]
You can also check out this repository locally. To compile the injected script, the recorder and the runner:
npm install
npm run build
To make the package available to run via npx
:
npm link
To run the package via npx
:
npx recorder [url]
When running a recorded script, make sure this package is available in the local node_modules
folder:
npm link @puppeteer/recorder
Use the runner with DEBUG=1
to execute the script line by line.
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
- It does not handle Out-of-Process iframes (See Bug)