Imitation 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 in a browser.

Because of these features, this makes Puppeteer a great candidate for topics like automated browser testing. The most popular framework for automating browser testing has been (and still is after 10 years) Selenium. One of Selenium’s advantages over Puppeteer is that it supports multiple browser vendors and even mobile devices (via a side project called Appium).

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

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

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

Jest puppeteer test

Jest is a popular testing framework in the NodeJS world. There is a Jest preset available, called jest-puppeteer, which supports Puppeteer.

Writing a Jest test with Puppeteer is simple:

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 makes an assertion.

WebdriverIO and Puppeteer

WebDriverIO is another popular testing framework for performing 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 WebDriverIO documentation is really good and offers various code samples to get up and running quickly.

Record with Puppeteer

If you don’t want to write tests or use test automation frameworks, you might consider recording your actions in your browser and exporting them to a Puppeteer script.

Puppet Recorder is available in Chrome and can be enabled through Developer Tools. Once enabled, it can quickly generate scripts to automate the actions you performed while recording.

Summary

We are just getting started with the possibilities that Puppeteer offers and will offer 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.