We now support 🎭 Playwright!

We now support 🎭 Playwright!

We are really excited to announce that you can now use Playwright in your browser checks. If you didn't know yet, Playwright is Microsoft's headless browser library. It's very similar to Puppeteer. In fact, it was built by the original creators of Puppeteer and has mostly the same features and a remarkably similar API.

This was in our public roadmap and cooking for some time now and we're glad to have it out the door!

And if that isn't enough, we also renamed our popular Puppeteer Recorder Chrome extension to Headless Recorder because it ALSO supports Playwright now!

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:

What is Playwright?
The official documentation for Playwright reads: > Playwright provides a set of APIs to automate Chromium, Firefox and WebKit browsers. By using the Playwright API, you ca ...

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.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ff860552-7d2b-45a1-9561-8e59fc867540/Zrzut_ekranu_2020-09-18_o_17.31.16.jpg
An example Playwright script. It looks remarkably similar to its Puppeteer counterpart

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

checkly

Our last 10 posts

No fluff, all relevant product updates & long form content. 🍍

Show Comments