Node.js Puppeteer

Puppeteer is an open-source library for Node.js that helps in automating and simplifying development by providing control over the Developers tools. It allows developers to write and maintain simple and automated tests. Most of the things that were done in the browser manually can be done by using puppeteer. Features of Puppeteer are –

• It can work as a Web Scrawler.
• It can Generates Screenshots of pages.
• It can make PDFs of Web Pages.
• It can automate the process of testing and form submission.
• It can be used for testing Chrome extensions.
• It creates an updated and automated environment for testing so that tests can be run directly in the browser(Google Chrome).
• It creates its own browser user profile which is cleaned whenever this library is made to run.

Installation: For the first step, initialize the application with package.json file. Therefore, run the following command –

npm init

For installing the library, write the following command –

npm install puppeteer --save

After installing, our package.json file will look like –

{
  "name": "day37",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Pranjal Srivastava",
  "license": "ISC",
  "dependencies": {
    "puppeteer": "^3.1.0"
  }
}

Implementation: Puppeteer basically creates an instance of the browser and then manipulate the pages of the browser. Let us see an implementation of puppeteer for navigating to a web-page –

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.geeksforgeeks.org/');

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

Firstly, we are creating an instance of the browser and allowing the puppeteer library to launch. Here,
browser.newPage() is used to create a new page and then navigate to the URL provided in page.goto() as a parameter. And, finally browser.close() is used to close the whole running process. The name of our javascript file is index.js, therefore, to run the application just type the following command in the terminal –

node index.js

The above code will launch the default Web Browser in your system and navigate to https://www.geeksforgeeks.org/

Take a screenshot of the web-page: For taking the screenshot of a web-page, write the following code –

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.geeksforgeeks.org/');
    await page.screenshot({ path: 'GFG.png' });
    await browser.close();
})();

Here, page.screenshot method will take the screenshot of the page and save it with the filename GFG.png. The above code will firstly open the page and then take the screenshot of the page.

Run the application with the command –

node index.js

The output for the above code will be –

To create a PDF for the given Website: For creating PDF of a website, write the following code –

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.geeksforgeeks.org/');
    await page.pdf({ path: 'gfg.pdf' });

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

Here, page.pdf() will create the PDF of the given website and save it with the name gfg.pdf. Run the application with the command –

node index.js

The above code will generate a PDF of the page.
Output for above code will be –

For getting the dimensions of web-page opened: For getting the dimensions of a page, write the following code –

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.geeksforgeeks.org/');

  const getDimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    };
  });

  console.log(getDimensions);

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

Here, getDimensions will first evaluate the page and then return the width and height of the page. The properties clientWidth and clientHeight are used to fetch the width and height of the page respectively. Run the application with the command –

node index.js

The output for the above code will be –

{
width: 1366px,
height: 695px
}

Default Settings:

• It runs in Headless Mode: The headless mode of a browser provides automated testing and server environments. It is a way of running the browser without its full GUI. The advantage of using the browser in headless mode is that it continuously runs the javascript tests. The default setting for a headless browser is true in puppeteer. To make it false, write the following code –

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

• It runs the specific version of Chrome: By default, puppeteer uses the specific version of Chrome. If you want to run some other version of code, then write the following –

  const browser = await puppeteer.launch({ executablePath:
               '/path/to/your/version/of/Chrome' });

  Here, executablePath property lets you to specify the path to your version of Chrome.

Conclusion: In this article, we learned about the pupeteer library of Node.js. We also learned about the various features of this library. We have seen its implementations and the default settings used by this library.