Puppeteer in N8N

Hi,

I am new to javascripting, i am trying to use puppeteer inside function node and i am not finding relevant document for puppeteer in N8N.

What i am trying to achieve is that, we have a URL for which we have to authenticate and take a screen shot of that page. I ran some simple nodejs code to achieve the same where its working fine on my vscode. I dont know how to use the same code inside N8N.

flow -

URL ----> N8N fucntion node ----> Pass the screenshot to the next node

the code i am using is the sample one that is ready avaiable on the internet.

const puppeteer = require('puppeteer');
(async () => {
     const browser = await puppeteer.launch({ headless: false });
	 const page = await browser.newPage();
	 await page.goto("https://wwww.google.com");
	 const html = await page.content();
	 //await page.screenshot({ path:" google.png"});
	 return html
	 //await browser.close();
	 })();

Need your help on this.

Thanks
Sathya

Hey @Sathya_Narayanan,

Do you want to use Puppeteer to take screenshots of websites? If yes, I recently published a node in n8n that can help you here. This node uses the Pageres library, which under the hood uses Puppeteer.

You can find it here: GitHub - harshil1712/n8n-nodes-pageres: An n8n node that use pageres to take screenshot of websites

Puppeteer requires chrome to execute. You need to make sure that a browser is available and n8n has permission to use it.

Hi @harshil1712 ,

i think i saw that video on youtube, are you talking about the one which you made for automatic API creation and taking screen shot of a URL ?

I was searching for this node, but i dont know how to install it, i am using NpM version of N8N, and my current version is 161…

How do i get this node, do i have to upgrade ?

Hi,

I tired installing the new node using npm -g flag, and the node got installed, however when i fire up the GUI, i am not finding that node… what am i missing ? please help

Alright, i figured it out and now that i have the node installed, when try to run the node, i get the following error.

ERROR: Protocol error (Emulation.setDeviceMetricsOverride): Invalid parameters Failed to deserialize params.height - BINDINGS: int32 value expected at position 31

    at /usr/local/lib/node_modules/n8n/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:208:63
    at new Promise (<anonymous>)
    at CDPSession.send (/usr/local/lib/node_modules/n8n/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:207:16)
    at EmulationManager.emulateViewport (/usr/local/lib/node_modules/n8n/node_modules/puppeteer/lib/cjs/puppeteer/common/EmulationManager.js:20:26)
    at Page.setViewport (/usr/local/lib/node_modules/n8n/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:968:58)
    at captureWebsite (/usr/local/lib/node_modules/n8n/node_modules/capture-website/index.js:223:13)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at Pageres.create (/usr/local/lib/node_modules/n8n/node_modules/pageres/dist/index.js:220:28)
    at Pageres.viewport (/usr/local/lib/node_modules/n8n/node_modules/pageres/dist/index.js:160:29)```

I think i sorted it out, i missed to add the correct resolution which resulted in failure…

Is there a way to pass in auth for a website before doing a screen capture ?

Sorry for the delay in response. I am glad that you figured out the solution. Can you please share it here so that others can also benefit from it? I’ll also update the documentation of the node.

To answer your question on auth, it looks like Pageres does allow you to pass username and password. However, the node currently doesn’t support that feature. Feel free to send a PR. I’ll be happy to merge and ship it!

1 Like

sure, for the error which is reported on the top of this thread…

ERROR: Protocol error (Emulation.setDeviceMetricsOverride): Invalid parameters Failed to deserialize params.height - BINDINGS: int32 value expected at position 31

    at /usr/local/lib/node_modules/n8n/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:208:63
    at new Promise (<anonymous>)
    at CDPSession.send (/usr/local/lib/node_modules/n8n/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:207:16)
    at EmulationManager.emulateViewport (/usr/local/lib/node_modules/n8n/node_modules/puppeteer/lib/cjs/puppeteer/common/EmulationManager.js:20:26)
    at Page.setViewport (/usr/local/lib/node_modules/n8n/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:968:58)
    at captureWebsite (/usr/local/lib/node_modules/n8n/node_modules/capture-website/index.js:223:13)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at Pageres.create (/usr/local/lib/node_modules/n8n/node_modules/pageres/dist/index.js:220:28)
    at Pageres.viewport (/usr/local/lib/node_modules/n8n/node_modules/pageres/dist/index.js:160:29)```

This issue was due to resolution, in the pagers node resolution is a mandatory so that has to be set for the node to work properly…

1 Like

@harshil1712 ,

Have raised a feature request. please let me know if that works…

Hi @harshil1712

how would I get the html content with puppeteer ?
I’m not interested in the screenshot. I just want the JS to be triggered.

But for some reason, such a code doesn’t work

const puppeteer = require('puppeteer');
(async () => {
     const browser = await puppeteer.launch({ headless: false });
	 const page = await browser.newPage();
	 await page.goto("https://wwww.google.com");
	 const html = await page.content();
	 
	 await browser.close();
	 return html
	 })();