Table of contents
We are really excited to announce that you can now use Playwright in your browser checks for active monitoring. The popular Puppeteer Recorder Chrome extension also supports Playwright now and is renamed to Headless Recorder. This was on our public roadmap and cooking for some time now and we're glad to have it out the door!
Playwright is Microsoft's open source headless browser library and was built by the original creators of Puppeteer. In consequence, Puppeteer and Playwright share similar features and API's. Anyway, there are important differences I want to point out in this post.
Puppeteer vs. Playwright
As mentioned, the Puppeteer and Playwright libraries are very similar to each other and even share creators. Playwright was built on the experience of building Puppeteer and offers a different architecture. Currently it has more activity, growing traction and introduces new features faster than Puppeteer.
Just recently for example, Playwright 1.4 introduced exciting things like a CLI for code generation and an experimental video capturing feature (which we plan to support for both libraries).
It also has an arguably better DX, something we care a lot about at Checkly. For example, you don't have to waitFor elements to interact with them. It sounds like a very small change but improves the experience a lot when you are interacting with more than a few elements during your browser check run.
// Puppeteer
const puppeteer = require('puppeteer');
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://danube-webshop.herokuapp.com/');
await page.waitForSelector('#login');
await page.click('#login');
await browser.close();
// Playwright
const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://danube-webshop.herokuapp.com/');
await page.click('#login'); // will wait for #login to appear or will throw at timeout
await browser.close();A major difference between them is also Playwright's first class support for other browsers like Mozilla Firefox & Microsoft Edge.
Note: currently, Checkly supports only Google Chrome.
If you are new to Playwright, theheadless.dev is a great place to start:
Competition is almost always good and drives a lot of innovation. Both headless browser automation libraries will surely continue to inspire each other and build up their respective communities.
And if you love working with Puppeteer and use Checkly, don't worry! You won't need to migrate your checks to Playwright. We are committed to bringing all the new features from both libraries to our platform. Our Puppeteer integration will stay as a first class citizen for a long time.
Headless Recorder
Speaking of supporting both libraries, we've also recently added Playwright support to our open-source browser recording & script generation extension: Puppeteer Recorder. Of course, we couldn't keep calling it Puppeteer Recorder with the Playwright support baked in!
So, introducing: the Headless Recorder. It's the same minimal but powerful extension, just now with Playwright support. Here's a video that kinda explains it all!
Where do I start?
To start using Playwright, just require('playwright') and start using it! Just like our Puppeteer integration, any valid Playwright script that uses Chromium is also a valid Checkly browser check. Features like the handy autocomplete in the check editor, Mocha integration and screenshots on the result pages work just the same.
We've updated our docs and the example gallery in our browser check editor if you need any inspiration.
Also, all examples on theheadless.dev are available for Playwright, too. Give it a try!
banner image: "Act eleven", Utagawa Hiroshige, Colour print from woodblocks. Ôban format. Publisher: Aritaya Seiemon (Yûeidô). c.1842-6. Source