Install NodeJs

We would be using end language like Javascript, so we must install NodeJs for using supporting functions and supporting packages.

  • Navigate to: https://nodejs.org/en/download/
  • Download the package according to your operating system.install-nodejs-puppeteer
  • Install the downloaded NodeJs file.
  • Once the installation is complete, open cmd and type node, if cmd doesn't throw any error then NodeJS got installed successfully.
    nodejs-successful-installtion-puppeteer

Install VSCode

  • Install VSCode, VSCode is nothing but another version of Visual Studio but available for free.
  • Navigate to https://code.visualstudio.com/
  • Click download button
    vscode-download-puppeteer
  • Download the VSCode software according to your operating system.
  • Install the VScode like any other exe file, go along with the recommended setting only.
  • Launch the VSCode, and UI will look like below.
    vscode-ui-protractor-puppeteer

Install Puppeteer

You can install the puppeteer using the below command, the installation might take a few minutes based on your internet speed because puppeteer has 145-200MB content.

If you have a question like it is about 145-200MB range then you need to know that it is not just puppeteer, the chromium setup also comes with the puppeteer.

You do not need to have a browser prerequisite in your system, puppeteer takes care of the browser setup.

Puppeteer is present in npm repository, you can visit(optional) the repository on npmjs.com

npm install puppeteer

install-puppeteer

Sample Puppeteer example

After installing the software we might need to execute a sample script to make sure that we are on the right track.

create a file with below content, below code takes the user to chercher.tech and closes the browser.

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 800 })
    await page.goto('https://chercher.tech');
    await browser.close();
});

Write above code in to file called sample.js

Run Puppeteer:

We can run the above puppeteer code using the node command followed by file name like below

node filename.js

// run the above code

node sample.js

puppeteer-output

Headed Puppeteer :

If you have executed above example, then you might not have seen anything because by default the puppeteer executes the tests in headless chromium.

To make the chrome visible to the user we can write (modify above) code like below.

const puppeteer = require('puppeteer');

puppeteer.launch({headless:false}).then(async browser => {
    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 800 })
    await page.goto('https://chercher.tech');
    await browser.close();
});

headed-browser-puppeteer

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions

Protractor Training