Puppeteer - How to connect WSEndpoint using local IP address?

Question

I have two Node.js scripts for puppeteer automation.

1) launcher.js

This Puppeteer script launches a chrome browser and disconnects the chrome so that it ca

Answer 1

You can proxy the websocket and connect to the proxy instead. I tested it on my server and it ran successfully.

Here is how we create a websocket server using http-proxy,

Server

const httpProxy = require("http-proxy");
const host = "0.0.0.0";
const port = 8080;
async function createServer(WSEndPoint, host, port) {
  await httpProxy
    .createServer({
      target: WSEndPoint, // where we are connecting
      ws: true,
      localAddress: host // where to bind the proxy
    })
    .listen(port); // which port the proxy should listen to
  return `ws://${host}:${port}`; // ie: ws://123.123.123.123:8080
}

Then when we run it, we create a proxy server and listen to the ws endpoint instead. I am not exporting it to keep the explanation simpler.

// your other codes
const pagesCount = (await browser.pages()).length; // just to make sure we have the same stuff on both place
const browserWSEndpoint = await browser.wsEndpoint();
const customWSEndpoint = await createServer(browserWSEndpoint, host, port); // create the server here
console.log({ browserWSEndpoint, customWSEndpoint, pagesCount });
// your other code here

When I run on the server, we get the following,

On the droplet,

➜  node index.js 
{ browserWSEndpoint: 'ws://127.0.0.1:45722/devtools/browser/df0ca6a9-48ba-4962-9a20-a3a536d403fa',
  customWSEndpoint: 'ws://0.0.0.0:8080',
  pagesCount: 1 }

Client

Then we connect it like this,

const puppeteer = require("puppeteer-core");
(async serverAddr => {
  const browser = await puppeteer.connect({
    browserWSEndpoint: `ws://${serverAddr}`,
    ignoreHTTPSErrors: true
  });
  const pagesCount = (await browser.pages()).length;
  const browserWSEndpoint = await browser.wsEndpoint();
  console.log({ browserWSEndpoint, pagesCount });
})(process.argv[2]);

On my guest computer,

➜  node index.js "123.123.123.123:8080"
Pages available :>  1
{ browserWSEndpoint: 'ws://123.123.123.123:8080' }

This way we can host on multiple server and route between them, scale away and more if needed.

Peace!