GUI automation test with puppeteer

In this blog, I will show you guys how to start automation test in GUI with puppeteer.

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

You can checkout more information about puppeteer in here

1.Why puppeteer:
Puppeteer allows access to the measurement of loading and rendering times provided by the Chrome Performance Analysis tool. Puppeteer affords more control over Chrome's browsers than Selenium WebDriver offers (likely due to Google's support and sophisticated knowledge of Chrome)

You can checkout more in this post

2.Setup puppeteer:
Please follow this guide from google for how to setup using puppeteer

3.Example project:

Imagine we need to open google chrome and navigate to google search site to search for "Blackpink" band

We need to provide these things:

• executablePath to the chrome.exe, if not puppeteer will use the default chromium
• set headless mode to false ( to see the actual implementation)
• goto the google.com site
• find the searchbox by xpath
• search the text

Below is the implement code for that:

const puppeteer = require('puppeteer');


(async () => {
    const browser = await puppeteer.launch({headless: false,
        executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'});
    const page = await browser.newPage();
    await page.goto('https://www.google.com/');
    // Click on search box

    const searchBox = await page.$x("//input[@title]");

    if (searchBox.length > 0) {
        await searchBox[0].click();
    } else {
        throw new Error("Link not found");
    }
    await Promise.all(
        [
            await page.keyboard.type("Blackpink"),
    // Hit enter
    await page.keyboard.press('Enter'),
            await page.waitForNavigation()
]);
    browser.close();

})();

1. Run the test with node:

Run the command : node example.js (As the file name is example.js)

You can checkout the source code from github as always

Notes: If you feel this blog help you and want to show the appreciation, feel free to drop by :

This will help me to contributing more valued contents.

Comments

[Karim Elmarharri]

Nicely done thank you