How to Record Screen Actions as a Puppeteer Script

One of the new (experimental) additions to the Chrome 89 DevTools is the Puppeteer Recorder: DevTools can now generate Puppeteer scripts based on your interaction with the browser, making it easier for you to automate browser testing. Simply start a new recording and as you click around you’ll see Puppeteer code being generated. Stefan Judis …

Automating Web Performance testing with Puppeteer

Nice work by Addy Osmani: Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. This repository has recipes for automating Web Performance measurement with Puppeteer. Automating Web Performance testing with Puppeteer →

Puppeteer 2.1.0, with native Firefox support

Late January Puppeteer 2.1.0 got released, with native support for Firefox: The launcher now has an option to run Puppeteer with different browsers, starting with Firefox. Puppeteer can now talk to a real, unpatched Firefox binary. This is a first step towards eventually deprecating the separate puppeteer-firefox package in favor of supporting Firefox directly in …

Embeddable CanIUse Images

Ire Aderinokun, author of the CanIUse Embed, has added an extra option where you can embed static images of features as mentioned on CanIUse.com. The images are generated using Puppeteer, are stored on Cloudinary, and are updated daily using Heroku Scheduler. What I wanted to do was have a URL linking to an image (hosted …

Building a Website Screenshot API with Puppeteer and Google Cloud Functions

Here’s the source of a Google Cloud function that, using Puppeteer, takes a screenshot of a given website and store the resulting screenshot in a bucket on Google Cloud Storage: const puppeteer = require('puppeteer'); const { Storage } = require('@google-cloud/storage'); const GOOGLE_CLOUD_PROJECT_ID = "screenshotapi"; const BUCKET_NAME = "screenshot-api-net"; exports.run = async (req, res) => { …

Take both Light and Dark Mode screenshots with Puppeteer

dark-mode-screenshot is a Puppeteer script to take screenshots of both the light and dark mode versions of a website. $ npx dark-mode-screenshot –url https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html –output screenshot –fullPage Works in somewhat odd way first requiring the OS to have dark mode enabled (?), and then launch Chromium: Once with prefers-color-scheme disabled (using –disable-blink-features=MediaQueryPrefersColorScheme) Once with Dark …

Run your tests using Jest & Puppeteer with jest-puppeteer

With jest-puppeteer – and its included expect-puppeteer assertion library – it’s possible to use Puppeteer within your Jest tests. Writing integration test can be done using Puppeteer API but it can be complicated and hard because API is not designed for testing. To make it simpler, an expectPage() is automatically installed and available, it provides …

Automatic visual diffing with Puppeteer

A few years ago we got Wraith and Huxley to perform visual regression testing. Monica Dinculescu has created a likewise thingy, powered by Puppeteer: I did a little song-and-dance that sets up Puppeteer, takes screenshots of your app (like, all the routes you care about), and then compares them to the “golden” ones. If they …

Using DevTools Features Without Opening DevTools using Puppeteer

Keeping a feature of the Chrome Devtools – such as the FPS Meter – running with the DevTools closed unfortunately is not possible (yet?). Kayce Basques provides us with a little workaround though: You can hack together a Puppeteer script that launches Chromium, opens a remote debugging client, then turns on the DevTools feature that …