Puppeteer testing

TestingBot has been providing a Selenium-based cloud service since 2012.

We started with offering a Selenium RC compatible grid and added Selenium WebDriver support when it was released.

In recent years, a number of other E2E testing frameworks have emerged. While these new frameworks offer the same end result (automated testing in browsers), their integration differs from each other.

In August 2020, we've added support for running TestCafe tests on our browser grid.
A couple of months later, in November 2020, TestingBot announced support for Cypress Testing in the cloud, allowing customers to run Cypress tests on multiple browsers in the cloud, with support for parallelisation and screenshots/video recording

Today, TestingBot announces support for another popular framework: Puppeteer

Puppeteer Testing

Puppeteer is a NodeJS framework created by Google, which utilizes the Chrome DevTools protocol to automate a (Chromium) browser.

By default, it runs in headless mode, which means there's no browser UI. There is an option to run in normal (headfull) mode, allowing our screen recording to record a video from your Puppeteer tests.

Puppeteer offers a nice async interface to interact with the browser. You can read the full Puppeteer documentation to find out which methods are available.

To start using Puppeteer with the TestingBot cloud, you'll need to instruct Puppeteer to connect to our Puppeteer endpoint:

const puppeteer = require('puppeteer')

const browser = await puppeteer.connect({
  browserWSEndpoint: 'wss://cloud.testingbot.com?key={key}&secret={secret}&browserName=chrome&browserVersion=latest'
})

The connect method indicates to Puppeteer that it should connect to the TestingBot WebSocket endpoint.

When you start a Puppeteer session, Puppeteer will connect to a browser in the TestingBot cloud, through the WebSocket endpoint, and run the Puppeteer script on one of our browser VMs.

Running Puppeteer tests on TestingBot has several advantages:

• High Concurrency: You can run multiple sessions simultaneously (in parallel), which means you'll get the results from your scripts/tests faster.
• Versions/Platforms: We maintain a big collection of different browsers, browser versions and platforms. No need to maintain, update and fix browser issues in your local Kubernetes/Grid setup.
• Assets: TestingBot will record a video of the test and collect various logfiles

Puppeteer Testing

On its own, Puppeteer is just an automation framework, designed to automate a browser.

There's two popular testing frameworks to use in combination with Puppeteer:

• Jest with Puppeteer
• PyTest and Puppeteer

Jest with Puppeteer

If you're looking to do actual E2E testing, you can use a framework like Jest. Jest is a popular testing framework and works very well in combination with Puppeteer.

By using jest-puppeteer(which is a Jest preset) and configuring the browserWSEndpoint, you can create Jest tests like this:

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

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

The great thing about this preset is that it does the connecting and closing of the WebSocket connections before and after each test.

For more information regarding using Jest and Puppeteer, please see our Puppeteer + Jest documentation.

PyTest and Puppeteer

For Python Testers, PyTest using pytest-pyppeteer and pytest-asyncio provides an easy way to run Puppeteer tests. You'll need to install pyppeteer.

An example on how to do this with Pyppeteer

import pytest
import pyppeteer

@pytest.mark.asyncio
async def test_title():
  try:
    browser = await pyppeteer.connect(browserWSEndpoint='wss://cloud.testingbot.com?key=key&secret=secret&browserName=chrome&browserVersion=latest')

    page = await browser.newPage()
    await page.goto('https://testingbot.com')
    title = await page.title()
    assert title == 'Cross Browser Testing and Mobile App Testing | TestingBot'
    await browser.close()
  except E:
    print(E)

For more information about Pyppeteer, please see our PyTest documentation.

Puppeteer Recorder

Another popular feature is the Puppeteer Recorder, which is built into Chrome DevTools.
At the time of writing it's still behind an experimental flag. The recorder allows you to record the interactions from your Chrome browser to a Puppeteer script file.

You can see a full example on our Puppeteer Recorder documentation to get started.

Puppeteer options

Puppeteer offers some nice features to use while testing:

• page.emulateMediaFeatures: this allows you to to test color schemes, reduced motion and color-gamuts.
• page.emulateNetworkConditions: emulate specific network conditions, test your webpage with specific network speeds.
• page.emulateVisionDeficiency: simulate a vision deficiency, including achromatopsia, deuteranopia, protanopia, tritanopia, and blurredVision.

Puppeteer offers various options to customize taking screenshots of your webpages.

Next to taking full page screenshots, Puppeteer can also take screenshots of specific DOM elements. This allows for comparing previous element screenshots to detect visual differences, which we'll discuss in a later blog post.

To conclude, Puppeteer is a robust and very performant framework, designed to automate Chromium browsers.
Take advantage of our new integration and start running Puppeteer tests on Chrome and Microsoft Edge browsers on TestingBot.