{"id":163,"date":"2017-12-07T20:01:37","date_gmt":"2017-12-07T20:01:37","guid":{"rendered":"http:\/\/loadfocus.com\/blog\/tech\/?p=163"},"modified":"2019-04-26T08:49:38","modified_gmt":"2019-04-26T08:49:38","slug":"how-to-take-screenshots-with-puppeteer-using-headless-chrome-browser","status":"publish","type":"post","link":"https:\/\/loadfocus.com\/blog\/tech\/2017\/12\/how-to-take-screenshots-with-puppeteer-using-headless-chrome-browser","title":{"rendered":"How to Take Screenshots with Puppeteer using Headless Chrome Browser"},"content":{"rendered":"<\/span> 3<\/span> minutes read<\/span><\/span>

What is Puppeteer? Puppeteer<\/a> is Node library that you can use in order to control Headless Chrome with the DevTools Protocol.<\/p>\n

The Chrome DevTools Protocol<\/a> allows for tools to instrument, inspect, debug and profile for Chromium <\/strong>and Chrome <\/strong>browsers.<\/p>\n

Puppeteer – Headless Chrome Node API<\/a> works only with Chrome<\/strong> and uses the latest versions of Chromium<\/strong>.<\/p>\n

Chromium<\/a> is an open-source browser project that forms the basis for the Chrome<\/a> web browser. One of the biggest differences between the two browsers is that, while Chrome is based on Chromium, Google adds some of proprietary features to Chrome, features like automatic updates and support for additional video formats. Other features like usage-tracking or \u201cuser metrics\u201d feature can be found only in Chrome browser.<\/p>\n

Note: Puppeteer requires at least Node v6.4.0<\/code>, <\/strong>but the examples below use async\/await which is only supported in Node v7.6.0<\/code> or greater.<\/p>\n

Node.js<\/strong> has a simple module loading system. In Node.js, files and modules are in one-to-one correspondence (each file is treated as a separate module).<\/p>\n

You can use Visual Regression Testing<\/a> to take website screenshots and compare the generated images and identify differences pixel by pixel, a comparison image will be shown next to the result\u2019s screenshot that highlights the differences in red.<\/p>\n

\"visual<\/p>\n

 <\/p>\n

Install Puppeteer<\/h3>\n

Here is how to install puppeteer from NPM Modules Registry<\/a> (npm <\/strong>is the package manager for JavaScript)<\/strong>:<\/p>\n

\nnpm i puppeteer\n<\/code><\/pre>\n
Below are code snippets on how to use Puppeteer<\/a> – Headless Chrome Node API in order to take screenshots of your website.<\/strong><\/p>\n
Example – navigating to https:\/\/example.com and saving a screenshot as a PNG file named example.png<\/code>:<\/p>\n
Generate screenshots with Puppetteer<\/h3>\n
\nconst puppeteer = require('puppeteer'); (async () = { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https:\/\/example.com'); await page.screenshot({path: 'example.png'}); await browser.close(); })();\n<\/code><\/pre>\n
\nawait page.goto('https:\/\/example.com'), {\ntimeout: 120000,\nslowMo: 2000,\nwaitUntil: ['load', 'networkidle'],\nnetworkIdleTimeout: 5000,\n});\n<\/code><\/pre>\n
By default, Puppeteer take screenshots of the viewport (the area which is visible by default when you open a website).<\/p>\n
In order to take a screenshot of the full web page, you need to add the fullPage<\/code> parameter to the screenshot method:<\/p>\n
\nawait page.screenshot({ path: 'example.png', fullPage: true });\n<\/code><\/pre>\n
Here is an example on how to take a screenshot of a webpage with Puppeteer using a customer web page size.
\nYou just need to pass the width<\/code> <\/strong>and <\/strong>height<\/code> <\/strong>of the viewport in order for the browser to resize the web page to the desired size.<\/p>\n
\nexport async function takeScreenshot(page, filename, width, height) {\nawait page.setViewport({ width, height });\n\nawait page.screenshot({ path: `${filename}-${width}-${height}.png`, fullPage: true });\n}\n<\/code><\/pre>\n
Here is how to call the above custom screenshot method:<\/p>\n
\nawait takeScreenshot(page, 'example.png', 320, 480);\n<\/code><\/pre>\n
Puppeteer, also provides a list of Mobile Devices as a list of objects called DeviceDescriptors.
\nIn order to emulate a web page in a mobile emulator, with specific characteristics, you can import the
\npre-defined list of mobile emulators from puppeteer\/DeviceDescriptors<\/code><\/p>\n
\nconst devices from 'puppeteer\/DeviceDescriptors'; \n<\/code><\/pre>\n
Puppeteer’s API is very similar to Selenium WebDriver, but works only with Google Chrome, while WebDriver work with most popular browsers.<\/p>\n
More details on how to locate elements to use in order to interact with Puppeteer or Selenium WebDriver<\/a>.<\/p>\n
Debugging and Troubleshooting Puppeteer<\/h3>\n
1. Non Headless Mode – for debugging purposes, sometimes it’s useful to see what the browser is displaying. Instead of launching in headless mode, launch a full version of Chrome using headless: false<\/code> when you launch the browser using Puppeteer:<\/p>\n
\nconst browser = await puppeteer.launch({headless: false});\n<\/code><\/pre>\n
2. Slow down screenshot generation – the slowMo<\/code> option slows down Puppeteer operations by the specified amount of milliseconds. It’s another way to understand better what’s happening with the code you’ve written and debug easier.<\/p>\n
\nconst browser = await puppeteer.launch({\nheadless: false,\nslowMo: 250 \/\/ slow down by 250ms\n});\n<\/code><\/pre>\n
3. Capture browser’s console output<\/p>\n
\npage.on('console', msg =&amp;amp;amp;amp;amp;gt; console.log('PAGE LOG:', ...msg.args));\n\nawait page.evaluate(() =&amp;amp;amp;amp;amp;gt; console.log(`url is ${location.href}`));\n<\/code><\/pre>\n
4. Enable verbose logging – All public API calls and internal protocol traffic will be logged via the debug module under the puppeteer namespace.<\/p>\n
# Basic verbose logging<\/p>\n
\nenv DEBUG=\"puppeteer:*\" node script.js\n<\/code><\/pre>\n
You can use Visual Regression Testing<\/a> to take website screenshots and compare the generated images and identify differences pixel by pixel, a comparison image will be shown next to the result\u2019s screenshot that highlights the differences in red.<\/p>\n
LoadFocus<\/a> is a cloud testing platform for:<\/p>\n