A rather geeky/technical weblog, est. 2001, by Bramus
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 …
Continue reading “How to Record Screen Actions as a Puppeteer Script”
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 →
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 …
Continue reading “Puppeteer 2.1.0, with native Firefox support”
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 …
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) => { …
Continue reading “Building a Website Screenshot API with Puppeteer and Google Cloud Functions”
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 …
Continue reading “Take both Light and Dark Mode screenshots with Puppeteer”
jest-puppeteerWith 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 …
Continue reading “Run your tests using Jest & Puppeteer with jest-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 …
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 …
Continue reading “Using DevTools Features Without Opening DevTools using Puppeteer”