Playwright (vs. Puppeteer): Cross-Browser Testing done right

Playwright version: v1.0.2

The ecosystem of Frontend Development changes rapidly. This is a curse and a blessing at the same time. The choice of tools frontend developers grows, too. Before reading the whole documentation of a new tool, install it, and start writing testing code, frontend developers might want to make sure it is worth the time and effort before.

So what is Playwright? Is it an additional testing tool? Does it replace a known framework like Jest or Cypress? Let's dive right into these questions:

1. What is Playwright?
2. Which role does Playwright play?

What is Playwright?

Playwright is an automated UI testing tool. It's a Node.js library that enables developers to run E2E tests in modern browsers: Chromium, Firefox, WebKit, and even Microsoft Edge.

The enablement of those major browsers is one of the key features of Playwright. It is a powerful argument to prefer this tool above others. But there is more. Frontend developers need to test their code not only in different browsers but on various devices, eventually with offline modes of Progressive Webapps.

Have a look at the core concepts of Playwright to get a feeling for the developer experience. The installation of the testing library is made as simple as possible. After the execution of the install script everything including browser settings is already setup. It is made simple to configure, install, or skip different versions of browsers. Playwright's API is testing-friendly. During the execution of tests, developers can interrupt them with the Developer Tools of the browsers or using the Microsoft VS Code Debugging Tools.

I won't get into the details on how to install and use Playwright. This content could get outdated in the future. Check out the Getting Started to explore the testing tool.

Which role does Playwright play?

Let's have a very short recap. Playwright is a new library for browser automation. Selenium came out in 2004 and was the most used tool for browser automation tests for a relatively long time. PhantomJS helped to render the UI during tests. Google released the first major version of Puppeteer in January 2018. Two years later in January 2020 Microsoft announced Playwright.

It gets interesting when comparing who is contributing to Puppeteer and who is contributing to Playwright. The most active contributors of Puppeteer Andrey Lushnikov and Joel Einbinder are now part of the team of Playwright. In one version of the repository's README.md they stated:

We are the same team that originally built Puppeteer at Google but has since then moved on. Puppeteer proved that there is a lot of interest in the new generation of ever-green, capable, and reliable automation drivers. With Playwright, we'd like to take it one step further and offer the same functionality for all the popular rendering engines. We'd like to see Playwright vendor-neutral and shared governed.

-- Playwright README.md: Q: How does Playwright relate to Puppeteer?

Playwright has all of the features that Puppeteer has, too. The team took advantage of the lessons they have learned during the development of Puppeteer.

One might ask why the team has not decided to improve Puppeteer with those features but create a new framework. Apart from the browser support, what are the differences between Puppeteer and Playwright? Being cloud-native, supporting a BrowserContext for multi-page scenarios, the setting of the user-agent and device emulations are some additional features.

Those features would have led to breaking changes in the Puppeteer API. But testing code in Chromium only might be enough for some codebases. Internal user interfaces for dashboards or Admin Areas don't have to support all of the different browsers or work offline.

The team decided to create a new framework instead. That does not imply that a switch from Puppeteer to Playwright would be a never-ending task. The API and core concept are currently still similar and it should be possible to migrate from Puppeteer to Playwright. If you have any experience, leave a comment!

TL;DR: Playwright is the successor of Puppeteer including support for all major browsers.