Headless Testing with Puppeteer

Puppeteer is a popular open-source library, built to control a headless instance of the Chrome and Chromium browser.

Puppeteer is used to automate any action you can perform in the browser. You can use it to automate flows, take screenshots and generate PDFs.
It is compatible with Chrome, Firefox and Microsoft Edge (Chromium).

Why should you use Puppeteer?

There are multiple reasons why you should want to use Puppeteer.
Some of the more popular reasons include:

• Generating PDFs
• Taking screenshots

Generating PDFs

Let's say you want to generate a PDF of a specific webpage, for example an invoice that your customer can download. Instead of setting up a third-party tool like wkhtmltopdf, you can choose Puppeteer.

Generating PDFs through the Chromium browser will deliver a pixel-perfect PDF.
Puppeteer provides multiple different options to customise the PDF file, ranging from orientation and scale to margins and formats.

Taking screenshots

Puppeteer makes it easy to take screenshots from any web page. There are some options to customise the screenshot, including quality, clipping and other formatting options.

Why should I use Puppeteer for Headless Testing?

Yes, it's true that there are alternative solutions, such as Selenium. But we believe there's a couple of reasons why you should go for Headless Testing with Puppeteer:

• Puppeteer uses the DevTools Protocol, this is a protocol built into Chrome/Chromium and optimised for both accuracy and performance.
• Headless is enabled by default. Contrary to Selenium, running tests in headless mode is a lot faster, because the browser does not have to do any visible rendering during the test.
• Selenium WebDriver uses the HTTP protocol to send and receive commands between the client and the node. Puppeteer uses a WebSocket tunnel, which means less latency and faster tests.

How to run tests with Puppeteer

A popular package to run automated tests with Puppeteer is called Jest-Puppeteer.
This open-source package allows you to use Jest as a test runner with Puppeteer.

If you include a package called expect-puppeteer, you can write automated tests in a clean way, see this example:

import 'expect-puppeteer'

describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://google.com')
  })

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

This will launch a browser on your local machine and run the test in headless mode. You will receive a test status back from Jest.

Running Headless Tests in the Cloud

The next step is to run all the tests you've created with a CI (Continuous Integration) system.

You could use a cloud provider such as HeadlessTesting to have your Puppeteer scripts connect with the browsers in our grid. Then you can run multiple tests in parallel, drastically shortening the total test duration of your test suite.

Comments

[HeadlessTesting]

Of course, everything written in this article can also be used with Playwright.
There's a similar package called jest-playwright which allows for Headless Testing via Playwright.