Puppeteer Testing

Puppeteer is a popular framework to run headless tests on Chrome and Chromium browsers.
It uses the Chrome Devtools protocol to automate the headless browser.

Installing Puppeteer

To install Puppeteer, simply use yarn or npm:

npm i --save puppeteer

By default, installing Puppeteer will also install a Chromium build.
If you want to only use our cloud, you might consider installing Puppeteer without the bundled Chromium build, called puppeteer-core:

npm i puppeteer-core

Running your first Puppeteer test

To run your first test, please use this example:

const puppeteer = require('puppeteer')

const browser = await puppeteer.connect({
  browserWSEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]'
})

const page = await browser.newPage()
await page.goto('https://headlesstesting.com')
await page.screenshot({ path: 'screenshot.png' })
browser.close()

This example will start a Chrome Headless Browser, navigate to HeadlessTesting.com and save a PNG screenshot.

const puppeteer = require('puppeteer')

const browser = await puppeteer.connect({
  browserWSEndpoint: 'wss://edge.headlesstesting.com?token=[YOUR-TOKEN]'
})

const page = await browser.newPage()
await page.goto('https://headlesstesting.com')
await page.screenshot({ path: 'screenshot.png' })
browser.close()

This example will start a Microsoft Edge Headless Browser, navigate to HeadlessTesting.com and save a PNG screenshot.

const puppeteer = require('puppeteer')

const browser = await puppeteer.connect({
  browserWSEndpoint: 'wss://firefox.headlesstesting.com?token=[YOUR-TOKEN]'
})

const page = await browser.newPage()
await page.goto('https://headlesstesting.com')
await page.screenshot({ path: 'screenshot.png' })
browser.close()

This example will start a Firefox Headless Browser, navigate to HeadlessTesting.com and save a PNG screenshot.

Updating your existing Puppeteer scripts

With a Puppeteer test, you'll usually start a browser with await puppeteer.launch()

To start using our service, simply replace this line with our browser endpoint:

Before

const browser = await puppeteer.launch()

After

const browser = await puppeteer.connect({
  browserWSEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]'
})

Debugging Tips

Below are some tips on how to debug your Puppeteer scripts.

Verbose Logging

To see logs of what Puppeteer is sending and receiving, you can use this environment variable: env DEBUG="puppeteer:*"

DEBUG="puppeteer:*" node puppeteer.js

Slow Motion option

With the slowMo option you can slow down each operation during the Puppeteer session.
To see the result, please specify these options:

const browser = await puppeteer.connect({
  browserWSEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]&screenRecorder=true',
  headless: false,
  slowMo: 250 // slow down by 250ms
})