5

Is there a way to communicate between the main and renderer process in Puppeteer similar to the ipcMain and ipcRenderer functions in Electron.

A simple application is demonstrated in this post. I find this functionality can be useful for debugging by triggering event from the page to the main function and vice-versa.

Md. Abu Taher
  • 17,395
  • 5
  • 49
  • 73
Santosh
  • 192
  • 1
  • 9
  • Do you mean node context and browser context? – Md. Abu Taher Oct 07 '18 at 10:29
  • Yes. I am looking for triggering events from the node context to the browser and vice versa. In Electron, there is the "ipc" module that helps do this – Santosh Oct 08 '18 at 13:22
  • Please be more specific, how do you want to use this? Any code snippet? – Md. Abu Taher Oct 08 '18 at 13:47
  • Please check the link I referenced in my question. This [post](http://electron.rocks/different-ways-to-communicate-between-main-and-renderer-process/) explains the kind of interaction I need. I want to trigger a few clicks at the client side based on inputs from the node context. I want to pass data to a function in the node context after obtaining the data from the browser context – Santosh Oct 08 '18 at 15:06
  • :) I used nightmare, electron, ipcRenderer and all things mentioned. I am talking about more details and example codes. – Md. Abu Taher Oct 08 '18 at 15:29
  • Possible duplicate of [Puppeteer log inside page.evaluate](https://stackoverflow.com/questions/46198527/puppeteer-log-inside-page-evaluate) – SIM Oct 12 '18 at 11:01

1 Answers1

6

Debugging: - Puppeteer has various page events used for debugging purpose here. - Puppeteer recently added ASYNC stack trace so you can track errors more precisely.

Event emitting, You can use the default events module and exposeFunction to build your own events system.

Refer to the following code snippet that has all of the mentioned methods,

const EventEmitter = require("events");
const myEventTracker = new EventEmitter();
myEventTracker.on("some-event", function(...data) {
  // do something on event
  console.log(data);
});

// usage in puppeteer
const puppeteer = require("puppeteer");
puppeteer.launch({ headless: false }).then(async browser => {
  const page = await browser.newPage();

  // normal console events forwarded to node context
  page.on("console", msg => console.log(msg.text()));

  // we can use this to make our own reverse events
  myEventTracker.on("change-viewport", async function(data) {
    // do something on event
    await page.setViewport({ width: data.width, height: data.height });
  });

  // or we can expose the emit function
  await page.exposeFunction("emitter", (...data) =>
  myEventTracker.emit(...data)
  );

  // emit however we want
  await page.evaluate(async => {
    emitter("change-viewport", { width: 1200, height: 800 });
    emitter("some-event", "inside browser");
  });

  await page.goto("http://viewportsizes.com/mine/");
  // await browser.close();
});

It will become a blog post if we want to explain all, I will update my answer otherwise.

Md. Abu Taher
  • 17,395
  • 5
  • 49
  • 73