Automatically creating a screenshot of a webpage used to be hard. Using puppeteer it became quite simple. Puppeteer is a headless Chrome Node.js AP...
For further actions, you may consider blocking this person and/or reporting abuse
Puppeteer indeed is a very powerful tool to work with webpages. Looking forward for more posts exploring puppeteer features.
Just a reminder, that it's possible to use devtools for simple webpage screenshots.
Run commandCapture full size screenshotThat's true. If you want to do it manually, that's a very good tip. In my case I had to prepare a couple of hundred screenshots, so I needed a tool to automate this task. And with puppeteer it was surprisingly simple.
Sure, puppeteer is great to automate routine tasks. I used it for web crawling and pdf generation and had a smooth experience.
This would really be good for automating tasks, especially in some test cases.
However when I read the title I must say I really hoped it would be vanilla JS but hey neither Node js nor Puppeteer are far off that.
True, I adjusted the title to include both, Node.js and puppeteer. Thanks for the hint!
I love it, I am already imagining things I could do with it
Hey Ben,
Thanks very much for this tutorial, it was very helpful to me.
One of the issues I see is that occasionally, there are variable results in the colors rendered in the captured image. Specifically, in maybe 1 out of 20 captures, you'll get bands of different colors when the image is rendered to a png (see attached, where dark blue band appears). The problem is that after I grab an image off of the web, I then use OpenCV to identify objects in the image. So when the colors rendered change, OpenCV flips out and doesn't read the image correctly. Have you seen this behavior before?
For some reason, the UI refreshed w/my edit, but didn't show me my attachment, so here is the link to it:
dev-to-uploads.s3.amazonaws.com/i/...
frases
As a follow-up to my post, I did two things which ended up improving my situation and giving me more consistent results:
1) I also tried using an older technology, the Chrome headless browser. Info on that here:
blog.frankmtaylor.com/2017/06/16/s...
developers.google.com/web/updates/...
gist.github.com/paceaux/353fc20eb6...
2) Instead of using a full page screenshot, I grabbed the image element from the DOM. Info on how to do that here:
intoli.com/blog/saving-images/
EDIT: Actually, only the Chrome headless ended up eliminating the number of incorrect image renderings to only one or two a day (my program runs once every minute).
frases
If only puppeteer could take screenshots across all major browsers, it would've been a clear winner amongst other tools for automation.
Actually there's an experimental version for FireFox
github.com/puppeteer/puppeteer/tre...
Yeah, I've seen that. Need Safari and Edge, too. Although with Edge using Chromium that may become possible. Safari on the other hand has been a pain.
Iam new to puppeteer. How can i achieve the same result with user inputing their own URL?