Search code examples
javascriptbrowserautomationgoogle-chrome-devtoolspuppeteer

How to use recorded, puppeteer-like automation commands client side, e. g. as google chrome snippet in the browser?

I would like to

  • record some browser automation steps with the Recorder of google chrome dev tools
  • generate puppeteer code from it
  • copy the puppeteer code to a google chrome Snippet
  • modify the code (e.g. to include extra for loops and conditional statements)
  • run the snippet for the current browser session

However, puppeteer code is server side node.js code and not originally thought to be executed in a browser.

Instead of server side code:

const puppeteer = require('puppeteer'); // v20.7.4 or later

(async () => {
    const browser = await puppeteer.launch({headless: 'new'});
    const page = await browser.newPage();
    //...

I would like to use some client side code like:

//load some puppeteer wrapper from cdn
fetch('https://cdn.jsdelivr.net/.../web-puppeteer.min.js')
    .then(response => response.text())
    .then(text => eval(text))

//connect to current browser session using that wrapper
const page = webPuppeteer.connectToCurrentPage(document);

//use previously recorded puppeteer commands for browser automation
//...


webPuppeteer.Locator.race([
        page.locator('::-p-aria(Search)'),
        page.locator('#APjFqb'),
        page.locator('::-p-xpath(//*[@id=\\"APjFqb\\"])'),
        page.locator(':scope >>> #APjFqb')
])
.fill('foo');

I found puppeteer-web. However, that project is archived and it seems that it would still need an extra server:

https://github.com/entrptaher/puppeteer-web

It also seems to be possible to start google chrome with the option --remote-debugging-port. However, that does not seem to make sense for my use case.

=> How to use puppeteer commands client side for the current browser session?

Of course not all the puppeteer commands would be supported. I only would need the ones related to the current page.

=> If that does not work with puppeteer code, is there another way to replay json that has been recorded with google chrome Recorder in client side Snippets?

=> Or is there a way to edit the code in the recorder to include conditional statements etc? The steps of puppeteer replay do not seem to include a "loop" or "if" step.

Related:

Connecting Browsers in Puppeteer

https://github.com/entrptaher/puppeteer-web

How to use puppeteer in my website with a cdn

How to run Puppeteer code in any web browser?

How to make Puppeteer work with a ReactJS application on the client-side

Is There Any Client Side Web Automation

https://github.com/puppeteer/replay/blob/main/src/Schema.ts

https://github.com/puppeteer/replay/issues/730

Solution

  • Flows that has been recorded with chrome dev tools can be shown as json: Recorder => Show code => JSON.

    enter image description here

    Copy that JSON to vanilla JavaScript Snippet and write a custom implementation to process the flow as wanted.

    For example, in order to process recorded button clicks:

    var json = {
    "title": "foo",
    "steps": [
        {
            "type": "click",
            "target": "main",
            "selectors": [
              [
                "aria/ Ordner "
              ],
              [
                "#rcmbtn106"
              ],
              [
                "xpath///*[@id=\"rcmbtn106\"]"
              ],
              [
                "pierce/#rcmbtn106"
              ]
          ],
        }
    ]
};

for (var step in json.steps){
   if (step.type == 'click'){
      var selector = step.selectors[1][0];
      var targetElement = document.querySelector(selector);
      targetElement.click();
   }

  // implement other step types here

}