Jest is a JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node.js, React, Angular and Vue.js. It aims to work out of the box and config free.

Puppeteer, a Node.js library for controlling headless Chrome. It’s rather new but it is a good time to check it out and see how it could fit inside your workflow. It can also be configured to use full (non-headless) Chrome or Chromium.

Faker, a Node.js library for generating random data. Names, phones, addresses. Yeah, it’s kind of like Faker for PHP or Python.

Let’s now try to install & implement our first program with Puppeteer & JEST. Here we assume that you already have Selenium Webdriver installed on your system.

Step 1: Initialize the project.

$ mkdir testsuite
$ cd testsuite
$ npm init

Step 2: Install global dependencies (JEST)

$ npm install jest -g

Step 2: Install local dependencies (Puppeteer, Faker etc.)

$ npm install puppeteer faker –save

Step 3: Start Selenium Webdriver Server

$ sudo webdriver-manager start

Step 4: In our first automated test script we will try to login to the Facebook web version automatically. Please find the script below. We commented to code as much as possible for better understanding and readability.

const faker = require("faker");
const puppeteer = require("puppeteer");
const URL = "http://www.facebook.com";
const authData = {
    email: "",
    password: ""
};

let page;
let browser;
const width = 1920;
const height = 1080;

// setup environment
beforeAll(async () => {
    browser = await puppeteer.launch({
        headless: false,
        slowMo: 80,
        args: [--window-size=${width},${height}]
    });
    page = await browser.newPage();
    await page.setViewport({ width, height });
});

afterAll(() => {
    browser.close();
});

describe("Login", () => {
    test("Success", async () => {
        // Open web page
        await page.goto(URL);
        await page.waitForSelector("[name='userLoginForm']");

        // focus & type at email field
        await page.click("input[name=email]");
        await page.type("input[name=email]", authData.email);

        // focus & type at password field
        await page.click("input[name=password]");
        await page.type("input[name=password]", authData.password);
         
        //  submit the form with the credentials
        await page.click("button[type=submit]");
        await page.goto("");
        await page.waitFor(3000);
        browser.close();
    }, 20000);
});