# Take screenshots of web pages

**URL:** <https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873>\
**Category:** General\
**Created:** [6 December 2019 17:29 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873 "2019-12-06T17:29:39Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexalburca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alexalburca/32/14918_2.png) [@alexalburca](https://discourse.nodered.org/u/alexalburca)\
**Post date:** [6 December 2019 17:29 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/1 "2019-12-06T17:29:39Z")

</div>

Hi

I am trying to create a stream that goes to a web page and pulls out screenshots and then sends the image by chatbot via telegram.

About sending the telegram I managed to send, but the part of taking the screenshot of the page I can not evolve ..

Has anyone done something similar? e Can you share the solution?

I am testing with the streams below:

node-red-contrib-web-page-screenshot  
node-red-contrib-webshot

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [6 December 2019 17:49 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/2 "2019-12-06T17:49:00Z")

</div>

> [@alexalburca](#):
>
> I am trying to create a stream that goes to a web page and pulls out screenshots

What do you mean by 'goes to a web page'? Is the page to be displayed in the browser viewing node red or do you mean that the node-red server should fetch the web page and somehow create an image that looks like a screenshot of the page as if it were displayed in a browser?

---

<div class="post-metadata">

**Author:** ![alexalburca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alexalburca/32/14918_2.png) [@alexalburca](https://discourse.nodered.org/u/alexalburca)\
**Post date:** [6 December 2019 18:10 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/3 "2019-12-06T18:10:41Z")

</div>

Hello thanks for the answer

The flow is determined by command that the user gives via red bot via telegram.  
Between them he goes to [www.google.com](http://www.google.com) and returns me a screenshot. This image I resubmit as an answer. via red bot.

Can you understand?  
[www.google.com](http://www.google.com) is an example

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 December 2019 21:11 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/4 "2019-12-06T21:11:23Z")

</div>

To get a screenshot of a browser page, you will need a suitable tool or set of tools to capture and render the page to an image - you will need to look for that first. When you know how to do that, you can automate it from Node-RED.

---

<div class="post-metadata">

**Author:** ![alexalburca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alexalburca/32/14918_2.png) [@alexalburca](https://discourse.nodered.org/u/alexalburca)\
**Post date:** [6 December 2019 21:22 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/5 "2019-12-06T21:22:39Z")

</div>

I expected something like that, but it didn't work for me.

> **[node-red-contrib-web-page-screenshot](https://flows.nodered.org/node/node-red-contrib-web-page-screenshot)**
>
> A Node-RED node for taking screenshots of web pages.

But thanks for spending your time answering me. thankful

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [7 December 2019 07:38 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/6 "2019-12-07T07:38:32Z")

</div>

Do the examples given with that node work for you?

---

<div class="post-metadata">

**Author:** ![alexalburca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alexalburca/32/14918_2.png) [@alexalburca](https://discourse.nodered.org/u/alexalburca)\
**Post date:** [9 December 2019 16:06 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/7 "2019-12-09T16:06:09Z")

</div>

Unfortunately the two options that have the same way did not work for me, I posted this to seek another option with friends here.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 December 2019 20:20 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/8 "2019-12-09T20:20:20Z")

</div>

Since even the examples don't work then you might be best to post an issue on the node's github page.

---

<div class="post-metadata">

**Author:** ![alexalburca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alexalburca/32/14918_2.png) [@alexalburca](https://discourse.nodered.org/u/alexalburca)\
**Post date:** [9 December 2019 20:43 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/9 "2019-12-09T20:43:32Z")

</div>

Hello  
I've done it .. Here I am looking for alternatives.  
Thank you.

---

<div class="post-metadata">

**Author:** ![EmilWesselink](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/emilwesselink/32/65829_2.png) [@EmilWesselink](https://discourse.nodered.org/u/EmilWesselink)\
**Post date:** [10 December 2019 05:39 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/10 "2019-12-10T05:39:51Z")

</div>

I do this by executing a robot framework command from the exec node. In robot framework (a framework for test automation) I use a selenium library and selenium driver to go to a page, log in and make a screenshot. This screenshot is then locally available to send. For me this is the most stable solution. I think there are maybe easier ones. I had the advantage that I was already familiar with robot framework.

---

<div class="post-metadata">

**Author:** ![PaulKeates1](https://avatars.discourse-cdn.com/v4/letter/p/97f17d/32.png) [@PaulKeates1](https://discourse.nodered.org/u/PaulKeates1)\
**Post date:** [11 December 2019 15:07 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/11 "2019-12-11T15:07:08Z")

</div>

Hi,

Depending on how much work you want to put into this and what type of web site you want to access / screen-shot... If you have requirements like a web site with login, navigate multiple pages etc. you will need to invest more effort. In that case I'd suggest 'wdio' nodes which let you completely automate any web site including tasks like screen-scraping.

It will need a end-point to talk to (e.g. 'selenium-standalone' is a good fit) but that is pretty easy to do. Runs in a shell session and all it does is listen for wdio commands and controls a browser. This is similar (but more powerful) than 'Robot Framework' proposed above. Again - depends on how often you will do these tasks and the complexity of the navigation sequence you need to do.

Cheers,  
Paul

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [19 December 2019 11:25 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/12 "2019-12-19T11:25:10Z")

</div>

Does anyone have a working solution for this? I am trying to take a screenshot not from the dashboard, but from another page. I want to use node-red-contrib-web-page-screenshot, and I have also installed Chromium-headless on my raspberry pi, when when I trigger a node I see the following in the node-red-log:

> (node:491) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome! bootstrap\_helper: /usr/lib/chromium-browser/nacl\_helper: Cannot open ELF file! errno=2 [1:1:1213/105402.285765:ERROR:nacl\_fork\_delegate\_linux.cc(315)] Bad NaCl helper startup ack (0 bytes) [4613:4613:1213/105402.293272:ERROR:browser\_main\_loop.cc(495)] Failed to put Xlib into threaded mode. [4613:4613:1213/105402.301780:ERROR:browser\_main\_loop.cc(272)] Gtk: cannot open display: TROUBLESHOOTING: [puppeteer/docs/troubleshooting.md at main · puppeteer/puppeteer · GitHub](https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md) at onClose (/home/pi/.node-red/node\_modules/puppeteer/lib/Launcher.js:348:14) at ChildProcess.helper.addEventListener (/home/pi/.node-red/node\_modules/puppeteer/lib/Launcher.js:338:60) at ChildProcess.emit (events.js:203:15) at Process.ChildProcess.\_handle.onexit (internal/child\_process.js:248:12) (node:491) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)

To be honest, I have no idea what that means. Did anyone of you manage to install chromium headless on a pi? If I just apt-get install it, I get the message that it is correctly installed.

Regards,  
Csongor

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [19 December 2019 12:54 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/13 "2019-12-19T12:54:15Z")

</div>

Couple questions to start this off with:  
What OS do you run on your pi?  
Do you have a desktop environment installed, and if so, is `$DISPLAY` set correctly?  
Do you have all dependencies installed, for example for Debian see [https://github.com/puppeteer/puppeteer/issues/290#issuecomment-322838700](https://github.com/puppeteer/puppeteer/issues/290#issuecomment-322838700)

Did you see the note from the node's readme ( [node-red-contrib-web-page-screenshot (node) - Node-RED](https://flows.nodered.org/node/node-red-contrib-web-page-screenshot) )

> [@](#):
>
> ### executablePath (Optional)
> 
> You can specify chromium/chrome executable with the path. For those who use x86 arch, this can be blank, however, if you use this node on ARM arch (e.g. Raspberry Pi), you have to install headless-mode-available `chromium-browser` and set the path.
> 
> > Fortunately, [Raspbian OS](https://www.raspberrypi.org/downloads/raspbian/) (as of ver. April 2019) includes compatible `chromium-browser` , so just set `/usr/bin/chromium-browser` to this blank.

Are you running a compatible chromium-browser?

See this issue thread on Puppeteer: [https://github.com/puppeteer/puppeteer/issues/550](https://github.com/puppeteer/puppeteer/issues/550)  
The ELF error shown suggests that the version of `chromium-browser` that you're running is incompatible with the architecture on your OS. For example running x86\_64 on ARM.

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [20 December 2019 06:41 UTC](https://discourse.nodered.org/t/take-screenshots-of-web-pages/18873/14 "2019-12-20T06:41:58Z")

</div>

I am running Raspbian GNU/Linux 8 (jessie). I am using my pi headless, nothing is connected to it. I have no installed the dependencies as well. I have also seen the comment on the node page about the executablePath. And I set it as described.  
I am afraid this goes above my head a bit. I could be running the x86\_64 version but building my arm version is too complicated to me.