GUI automation test with puppeteer

#automation #puppeteer #gui #javascript

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();

})();