Mimicking Human Testers: Automated Testing With Puppeteer

Puppeteer is a NodeJS library created and maintained by Google, which interacts with any Chromium-based browser.

By communicating with the browser through the DevTools protocol, Puppeteer can mimic real user behavior, such as clicking, typing, and basically any other interaction within a browser.

Because of these features, it makes Puppeteer, an excellent candidate for topics such as automated browser testing. The most popular framework for browser test automation has been (and still is after 10 years) Selenium. One advantage that Selenium has over Puppeteer is that it supports multiple browser vendors and even mobile devices (through a side-project called Appium).

As mentioned, Puppeteer only supports Chromium-based browsers because it only knows how to communicate over the DevTools protocol. Chrome, Edge, and Chromium browsers use this protocol for their own Developer Tools, so these browsers are fully compatible with Puppeteer.

Puppeteer testing is becoming a bigger topic in the QA and Automated Testing industry. Many test frameworks such as Jest, WebDriverIO, PyTest, and CodeceptJS provide integration with Puppeteer.

This means you can write test scripts that do automated UI testing through Puppeteer.

Jest Puppeteer Testing

Jest is a popular test framework in the NodeJS world. There’s a Jest preset available, called jest-puppeteer, which provides support for Puppeteer.

Writing a Jest test with Puppeteer is straightforward:

import 'expect-puppeteer'
describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://testingbot.com')
  })

  it('should display "testingbot" text on page', async () => {
    await expect(page).toMatch('testingbot')
  })
})

This simple test case uses Puppeteer under the hood to instruct the browser. It opens a page and then does an assertion.

WebdriverIO and Puppeteer

WebDriverIO is another popular test framework to do end-to-end testing with Puppeteer. Once installed, you can quickly create your first Puppeteer browser test:

import { format } from 'util'
import { remote } from 'webdriverio'

(async () => {
    const browser = await remote({
        capabilities: {
            'wdio:devtoolsOptions': {
                browserWSEndpoint: format(
                    `wss://cloud.testingbot.com?key=%s&secret=%s&browserName=chrome&browserVersion=latest`,
                    `key`,
                    `secret`
                )
            }
        }
    })

    await browser.url('https://testingbot.com')

    const title = await browser.getTitle()
    console.log(title) 

    await browser.deleteSession()
})()

The documentation of WebDriverIO is really good and offers various code samples to get up and running fast.

Record with Puppeteer

In case you don’t want to write tests or use test automation frameworks, you could look into recording your actions within your browser and export them to a Puppeteer script.

The Puppeteer Recorder is available in Chrome and can be activated through the Developer tools. Once enabled, it can quickly generate scripts to automate the actions you performed during recording.

Summary

We’re just getting started with the possibilities that Puppeteer provides and will provide in the future. An alternative to Puppeteer is also gaining traction: a project called Playwright, designed by Microsoft, which offers the same functionality but with support for more browser vendors.