Puppeteer in N8N

Questions
1

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

2

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.

3

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 ?

4

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

5

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)```
6

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 ?

7

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
8

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
9

@harshil1712 ,

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

10

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
	 })();
11

Hi, just wanted to share this as it can help others. We’re running n8n in Kubernetes, so in order to use puppeteer we needed puppeteer (and chromium) to be part of the n8n docker image.

This is based on 1.18.2:

diff --git a/docker/images/n8n-custom/Dockerfile b/docker/images/n8n-custom/Dockerfile
index 594fe47fce..968f577dd6 100644
--- a/docker/images/n8n-custom/Dockerfile
+++ b/docker/images/n8n-custom/Dockerfile
@@ -12,7 +12,8 @@ RUN apk add --update jq
 RUN corepack enable && corepack prepare --activate
 USER node
 
-RUN pnpm install --frozen-lockfile
+RUN pnpm add [email protected] --ignore-workspace-root-check
+RUN pnpm install
 RUN pnpm build
 RUN rm -rf node_modules
 RUN jq 'del(.pnpm.patchedDependencies)' package.json > package.json.tmp; mv package.json.tmp package.json
@@ -31,6 +32,21 @@ RUN ln -s /usr/local/lib/node_modules/n8n/packages/cli/bin/n8n /usr/local/bin/n8
 
 COPY docker/images/n8n/docker-entrypoint.sh /
 
+RUN \
+               apk add --no-cache \
+               chromium \
+               nss \
+               freetype \
+               harfbuzz \
+               ttf-freefont \
+               yarn \
+       && apk --no-cache add --virtual fonts msttcorefonts-installer fontconfig \
+       && update-ms-fonts \
+       && fc-cache -f \
+       && apk del fonts \
+       && find  /usr/share/fonts/truetype/msttcorefonts/ -type l -exec unlink {} \; \
+       && rm -rf /root /tmp/* /var/cache/apk/* && mkdir /root
+
 RUN \
        mkdir .n8n && \
        chown node:node .n8n

I’d love to know if there’s a better way to do it, specially if it doesn’t involve building our own images for n8n.

12

Hi i’m unclear as to what the requirements to make a puppeteer node work in a non-dockerised n8n installation on a LXC. It seems i can install via a plugin (easy) or I can do via npm. Don’t know the difference (why would I need to install via npm?). Why is there a credentials field in the node in n8n (if i use the plugin version)? Credentials for what exactly? thanks
image

13

Hi do you have the full file (without the diff) pls