What is Puppeteer

Puppeteer is a google provided JS based library which is used to automate any website in headed or headless mode through chromium browser.

Headed Browser

Automation happens in graphical interface mode. In this mode, you will see automation activity by the browser.

Headless Browser

Automation happens without a graphical interface. In this mode, you will not see automation activity by the browser. It will perform automation from the backend. You only see the result. By default, puppeteer does activity in headless mode. You can set this from puppeteer properties.

Install Puppeteer

Create a new folder by any name

Open with visual studio code

Open terminal from Terminal > New Terminal

Hit this command:

npm init -y

You will see that package.json has been generated

Then hit this command:

npm install puppeteer

After installed properly, you will see that a folder named node_modules has been generated

Now go to package.json

You will see that puppeteer with its version has been written under dependencies

First automation by Puppeteer

Create a file named index.test.js

All test files should includes .test extension

Write following code:

// import puppeteer package
const puppeteer=require('puppeteer');

// puppeteer methods must be written within async function
(async () => {
    // launching puppeteer
    const browser = await puppeteer.launch();
    // creating page
    const page = await browser.newPage();
    // navigate to an url
    await page.goto('https://demoqa.com');
    // wait until the image load
    await page.waitForSelector('img');
    // getting the page title
    console.log(await page.title());
    // getting the page url
    console.log(await page.url());
    // close the browser after finishing
    await browser.close();
  })();

Now hit this command:

node .\index.test.js

You will find that test activity has been performed in back-end and after finishing the test, you will see that title name and url is showing on console

Puppeteer waitFor method:

Wait for selector: await page.waitForSelector('selector');
Wait for XPath: await page.waitForXPath('xpath');
Wait for timeout: await page.waitForTimeout('time in millisecond');
Wait for page load after submit: await page.waitForNavigation();

Puppeteer browser configuration

Now add the following properties within puppeteer.launch() method to show automation activity through browser

{
  headless:false,
}

Now run the script again.

You will see that the browser launches and navigates to the url provided.

But the browser is not maximized and right side are blank

So, now we will remove the blank part and maximize the browser.
Add this properties after the previous properties using comma

defaultViewport:null,
        devtools:false,
        args:[
            "--window-size=1920,1080"
        ]

Now run the script again

You will see that browser has been maximized and right side are not blank

Here is the puppeteer properties configuration:

const browser = await puppeteer.launch({
        headless:false,
        defaultViewport:null,
        devtools:false,
        args:[
            "--window-size=1920,1080"
        ]
    });

Applying mocha with puppeteer

Now we will add mocha as test runner to see test result

// import puppeteer package
const puppeteer = require('puppeteer');

let browser, page;
// puppeteer methods must be written within async function
before(async () => {
    // launching puppeteer
    browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null,
        devtools: false,
        args: [
            "--window-size=1920,1080"
        ]
    })
    // creating page
    page = await browser.newPage();
})
describe("First automation test", async () => {
    it("Navigation URL", async () => {
        // navigate to an url
        await page.goto('https://demoqa.com');
        // wait until the image load
        await page.waitForSelector('img');
        // getting the page title
        console.log(await page.title());
        // getting the page url
        console.log(await page.url());

    })

})
after(async () => {
    await browser.close();
})

Here, before and after are mocha hook
And we used describe method for test scenario and it for implementing test case

We implemented our browser configuration in before hook so that before running test cases, browser will be initialized.

And after finishing our tests, browser will close

Now run the test by this command:

npx mocha --timeout=30000 .\index.test.js

We used npx to locate mocha, passing –timeout=30000 to set the automation time

Showing 1 test passed as we have only one it method. We can use multiple it method within 1 describe method because multiple test cases can be included in one test scenario.

Now if you want to run this test in headless mode, simply set headless properties from false to true

puppeteer.launch({
        headless: true
})

Now run the test again and you will see that test will be happened in background and after finishing test, you will see the result.