Over the past decade the world has seen emergence of powerful Javascripts based webapps, while new frameworks evolved. These frameworks challenged issues that had long been associated with crippling the website performance. Interactive UI elements, seamless speed, and impressive styling components, have started co-existing within a website and that also without compromising the speed heavily. CSS and HTML is now injected into JS instead of vice versa because JS is simply more efficient. While the use of these JavaScript frameworks have boosted the performance, it has taken a toll on the testers.

What is Puppeteer?

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol (https://chromedevtools.github.io/devtools-protocol/). Puppeteer run headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
Headless browsers, as the name itself indicates, are the browsers that run as app process without any user interface elements. They are simply faster, consume less memory, more flexible, and are steadier under automation stress.

What can I do?

Most this that you can do manually in the browser can be done using Puppeteer. A few examples:

  • Generate screenshots and PDF’s of pages.
  • Crawl a SPA (Sing-Page Application) and generate pre-rendered content (i.e “SSR” (Server-Side Rendering)).
  • Automate form submission, UI Testing, keyboard input, etc.
  • Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chromium using the latest JavaScript and browser features.
  • Capture a timeline trace of your site to help diagnose performance issues.
  • Test Chrome Extensions.

Below is a step by step example on how to open a site and verify

Installation

Create a new folder and name it whatever you’d like. Open up terminal and navigate to the folder. Enter Command:
npm init
This will initiate a node project, and create a package.json file. After having the project installed, you’’ll need to install Puppeteer by:
npm install puppeteer and if you’d like to save it as a dependency use the --save option at the end, it would look something like this npm install puppeteer --save

Once installed, create a new file called example.js. Inside the file you must require puppeteer. Add this line to the top:
cont puppeterr = require('puppeteer');

After you require the the package, you can use it inside a function that we shall call ‘googleTest’ and it will look like this:

const puppeteer = require('puppeteer');

const googleTest = async () => {

};

We then need to launch puppeteer and add the options, in this case we set headless to be false so we can see the browser open and help us while coding.

const puppeteer = require('puppeteer');

const googleTest = async () => {
     const browser = await puppeteer.launch({ headless: false });
};

We use newPage() , this will wait for that page to open and return a promise so the code can continue to the next line.

const puppeteer = require('puppeteer');

const googleTest = async () => {
     const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
};

Let’s create a variable and call it ‘host’ then store the url value here. On the top, below the line where we require puppeteer add const host = ''https://www.google.com';
Inside the googleTest() function add a line to instruct the browser to go to the url: goto(host);

We will also set the view port (size of the browser window) and verify that the page is open by checking an http element. To find an element you must:

  1. Right Click on a page element
  2. In the drop down menu click on “Inspect Element”
  3. The html section should be highlighted at this point
  4. Go to copy, and select “Selector”

Past the select inside waitFor('#hplogo')

The entire file should look like this:

const puppeteer = require('puppeteer');
const host = 'https://www.google.com';

const googleTest = async () => {
   const browser = await puppeteer.launch({ headless: false });
   const page = await browser.newPage();
   await page.goto(host);
   await page.setViewport({ width: 1366, height: 768 }); 
   await page.waitFor('#hplogo')
   browser.close()
};

googleTest();