What is Playwright?

First released in January 2020, Playwright is an open-source test automation library initially developed by Microsoft. It supports multiple programming languages such as Java, Python, C#, and NodeJS. The most popular choice is NodeJS with Javascript or Typescript. 

We can consider Playwright as relatively new to the market but it is gaining popularity quickly because of its unique features that we will cover here.

Why Playwright?

There are multiple reasons why to choose Playwright Framework for test automation, so let’s start:

Easy Setup and Configuration

Installation doesn’t take much time and the whole process is pretty straightforward. From start to finish it takes only a few steps. Let’s take an example of how to install Playwright with Typescript language:

First, we will start by opening VS Code and running the following command in the terminal:

npm init playwright@latest

Now we will be presented with the following options:

• Choosing between TypeScript or Javascript
• Name of Test folder (default is “tests”)
• Adding Github Action workflow (default is false)
• Installing Playwright browsers (default is true)

Our terminal should look like this:

After configuring options, the installation will start and it will take just a few minutes to be done. It’s really simple and easy to set up.

Multi-Browser Support

Great support for browsers. We can test on Chromium family browsers (Chrome, Edge), Webkit (Safari), and Firefox. If we selected “true” on “Install Playwright browsers” during installation we can find our default browsers in the config file.

Parallel Browser Testing

Parallel testing (execution of simultaneous tests) is supported, meaning we can run multiple tests at the same time! We can choose how many “workers” to use in a test run by –workers and the number of desired workers.

Multi-Tab/Browser Window

Multi-tab and multi-window instances are supported too! This is great news for anyone who has test cases that need to launch additional (new) windows to verify scenarios.

Build-in Reporters

By default HTML reporter will be used, it is pretty simple to understand and navigate. It contains test titles, results, and labels for browsers. Clicking on a specific test will open the test with its test steps.

Other options as JSON and JUnit are available too, and you can do your own custom reporter if you want!

CI/CD Integrations

Playwright supports CI/CD integration such as Jenkins, GitHub Actions, Circle CI, Bitbucket Pipeline Bamboo, and ASW CodePipeline.

Test Generator

Playwright comes with the ability to generate tests out of the box and is a great way to quickly get started with testing. To perform this we need to run command codegen. It will open two windows, a browser window to interact with the website and the Playwright Inspector where actions on the website are recorded. This is a great way to find selectors and locators in an app.

Emulation of devices

Playwright offers the option of emulating desktop, tablet, and mobile devices. It can be used to simulate browser behavior for a specific device such as user agent, screen size, viewport, and if it has, touch-enabled. In addition to that we have options such as showing system notifications, enabling geolocation, and much more! If we set it up in our config file all tests will run with the specified device parameters.

Auto-waiting

Auto-waiting ensures that elements behave as expected. It waits for all the relevant checks to pass and only then performs the requested action. If the checks do not pass within the given time, the action fails with the TimeoutError. For example, we can look at page.click(), in that case, Playwright will ensure that element is:

• Attached to the DOM
• Visible
• Stable (not animating/completed animation)
• Receives Events 
• Enabled

Video recordings and Screenshots

Videos and screenshots can be used in test runs. We can use it in specific tests or even better configure them globally on test failure. This will ensure that when a test fails we get a video or screenshot and we can easily see where the problem occurred. This can help us report scenarios that failed faster and provide a recording of the process. The setup of these options is fast as other options we already covered. We need to navigate to our config file and write the following:

Option “on-first-retry” means that video will be recorded only when retrying a test for the first time. We can choose different options such as “on” which will record video for each test, and “retain-on-failure” meaning it will record each test but remove it for successful test runs.

Final thoughts

We mentioned a few reasons why Playwright is a great choice for test automation, but there are lots more! Great things about Playwright are the new unique features that it introduces, some of which we already mentioned here (codegen, emulating different devices, multi-language support). Keeping in mind that it was first released in January 2020, which makes it only 3 years old, it presents itself as a reliable and fast tool to use. Taking a look at Testing – State of JS 2020 we can see that the same year Playwright was launched the user satisfaction rate was high at 93%. For now, Playwright’s future looks bright and promising!