Playwright: The Modern Approach to UI Test Automation

By Angela Derewieńczuk, QA Engineer

The UI test automation tools market is more crowded than the dance floor in a Michael Jackson music video. Selenium and Cypress have been the most commonly discussed automation tools in the past, but recently, Playwright has become an increasingly popular option in this comparison, as seen in the ranking chart below.

Source: https://ossinsight.io/collections/testing-tools/

The chart shows changes in repository rankings based on metrics such as stars, pull requests, pull request creators, and issues, from 2011 to the present. But what exactly is Playwright? Where did it come from? And how did it manage to become the Beyoncé of testing tools in just three years?

Discovering Playwright: The New Tool for Browser Automation and Testing

I became curious about the reasons for Playwright's growing popularity and decided to investigate further. At first glance, it seemed like just another free, open-source tool supported by Microsoft, nothing particularly noteworthy. However, upon further research, I discovered a few key differences between Playwright and the widely used Selenium. What caught my attention the most was Playwright's architecture.

Architecture: Playwright vs Selenium

The architecture of Selenium is based on a client-server model, where the Selenium client communicates with the Selenium server to automate web browser interactions. The Selenium server then interacts with the browser using the browser's own automation engine, such as WebDriver or ChromeDriver. This architecture is designed to support multiple programming languages and browser platforms, making Selenium a versatile tool for web browser automation.

On the other hand, the architecture of Playwright is based on a single library that includes both the browser automation engine and the API for controlling it. Playwright is designed to be more efficient and faster than Selenium, and it offers more granular control over browser behavior.

To verify this, I wrote a simple test suite in both Playwright and Selenium. The results were like a battle between Ariana Grande and an out-of-tune karaoke singer. Playwright's tests were fast and efficient - they concluded in 6.16 seconds, while Selenium struggled and took 29.71 seconds to finish. I think it's safe to say that Playwright won this race.

Auto-Waiting in Playwright: A Game-Changer in UI Testing

What's more, Playwright has a built-in feature for handling waits during web automation, which simplifies the process compared to Selenium. Instead of writing lengthy wait.until() formulas, Playwright automatically performs a series of checks to confirm whether the selected element can perform the selected action.

The command is executed only after all the checks have passed. If the checks fail to pass within a specified time, Playwright returns a TimeoutError.

For example, for the click() command, the following checks will be performed:

• element is Attached to the DOM;

• element is Visible;

• element is Stable, as in it is not currently undergoing animation;

• element Receives Events, as it is not obscured by other elements;

• element is Enabled.

Playwright Codegen: For the Lazy Coder in All of Us

Playwright offers much more.

With Playwright's codegen, you can generate tests automatically as you interact with your website in the browser. It's a great way to quickly get started with testing, especially for those new to testing or in a hurry to produce results.

Playwright's codegen is smart enough to analyze your page and figure out the best locator to use for each element, prioritizing role, text, and test ID locators. In cases where multiple elements match the locator, it will improve the locator to make it more resilient, ensuring that each element is uniquely identified.

To use this feature, simply run the codegen command. Two windows will appear - one is the browser window where you can interact with the website, and the other is the Playwright Inspector window where you can record your tests and copy them into your editor.

Playwright: Advantages and Limitations

Currently, the Selenium community is much larger than that of Playwright. If you encounter an issue while using Selenium, there's a good chance that someone has faced the same problem before, and you can quickly find a solution. Selenium has been used to develop many large testing projects in various companies, and it would take a considerable amount of time to migrate them to a different framework.

Nevertheless, this doesn't imply that Playwright is in a losing position. With an increasing number of people opting for more modern solutions, as seen from the graphics at the beginning of the article, Playwright has a lot to offer. I believe that it has a high potential for conquering the testing market.