Take website screenshot with Google Puppeteer

1
471
Google Puppeteer
Google Puppeteer

With the support of headless in Chrome, developers now can perform automation tasks much easier, and that includes taking screenshot for a web page without opening it.

First make sure to have Node v7.6.0+ and install puppeteer package to the project.


- Using Yarn
$ yarn add puppeteer

- Using Npm
$ npm i puppeteer

The following code demonstrates how to take screenshot with puppeteer.


const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://blog.petehouston.com');
  await page.screenshot({ path: 'screenshot.png' });

  await browser.close();
})();

The syntax is using ES6 with additional features on async/await, and you should know about this.
By default, puppeteer will launch in headless mode. If you want to see how it works in action, you should disable the headless mode.


const browser = await puppeteer.launch({ headless: false })

The rest of code explains itself already.
Well, I guess, puppeteer is going to be really useful in many projects.