Puppeteer Testing
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
})