A Glance at Playwright - A Modern and User-Friendly Test Automation Framework

Apr 12, 2023 • 15 min read

In this article, you will learn what Playwright is, its features, when to consider using it, and when to exercise caution.

Test automation in modern projects has become a golden practice for creating valuable, more useful software. The adoption of test automation has primarily been driven by the desire for faster feedback, better code quality, increased testing efficiency, improved team collaboration, and overall software quality.

Selecting the right tool is one of test automation’s many crucial steps. However, there is no one-size-fits-all solution; the best tool is the one that best suits your specific needs and goals. One of the rising stars in web application test automation is Playwright, which I will discuss further in this article.

What is Playwright?

Playwright is an open-source Node.js library that allows developers to automate interactions with web browsers to build reliable web applications. Whether testing a simple single-page app or a complex multi-page web application, Playwright is equipped with the features to get the job done.

The Playwright creators describe the tool as a framework for web testing and automation. It allows testing MS Edge, Chrome, Firefox, and Safari with a single API. Playwright is built to enable cross-browser web automation that is capable, reliable, and fast. What is more, the description is well-written, making it easy to familiarize oneself with this tool.

The core features of Playwright

Playwright’s core purpose is to create and launch automated tests. To give the best service, Playwright has deployed over 12 core features to support software developers and QA specialists in their day-to-day work:

Cross-platform testing: Playwright is designed to work on multiple platforms and operating systems, including macOS, Linux, and Windows. This means Playwright can be used on different platforms without any code changes.
Cross-browser testing: Playwright allows you to automate tests across multiple browsers, including MS Edge (with Chromium), Mozilla Firefox, and Apple Safari (with WebKit). This feature provides users with seamless application interactions regardless of their browser.
Element selection: Playwright offers an easy-to-use API for selecting elements on a page and performing actions on them. This makes testing specific components or sections of your application effortless. As a result, full test isolation is not an issue with Playwright.
Automated browser context management: Playwright automatically manages browser contexts for you, making it easier to launch, close, and switch between multiple tabs in the same test. Context management makes it easier to test complex scenarios that involve multiple tabs or windows, and it reduces the effort required to set up and manage your testing environment.
Visual testing: Playwright provides a visual regression testing API that allows you to compare snapshots of pages across different browsers. This allows you to quickly catch visual changes introduced during development and ensure that your users have a consistent experience. Visually, you can test the entire page view or only individual elements or areas in the application. Once your test is completed, you can view a visual comparison of the actual and expected images in the test report which allows you to quickly identify and address any discrepancies.

Screenshot comparison failed once the test run is complete.

Screenshot displayed in the test report.

Real-time interaction: Playwright provides a rich API for automating real-time user interactions such as clicking, typing, scrolling, and mouse movements. This feature allows you to test user interactions with the application and validate the system.
API testing: Playwright enables the testing of modern web applications by allowing the user to send HTTP requests to endpoints and validate the responses. This versatile tool supports the testing of RESTful and GraphQL APIs. Additionally, Playwright can handle authentication and authorization, facilitating the testing of APIs that require authentication tokens or cookies.
Network and performance testing: Playwright provides a robust network interception API for testing network requests and performance, as well as APIs for measuring performance metrics like time to first byte, time to interact, and more. Playwright can also simulate network conditions to test how the APIs perform under different network conditions and test the application's performance to identify areas for improvement.
Codegen ability: Playwright has the built-in capability of generating code based on the user's interactions on the web page. Codegen can simplify and reduce the time it takes to write tests. Non-technical users will find the codegen functionality to be especially useful. However, it is important not to rely solely on this tool for writing tests; having an understanding of what the test does and how the framework operates remains a crucial skill.

Playwright inspector tool used for recording all the tests based on user actions.

Inspector and trace viewer: These two tools allow users to visualize and analyze their step-by-step activity during a Playwright test run. The trace viewer highlights the detailed issues of each action in a specific test run, e.g., network requests, events, and page interactions. It also helps with identifying bottlenecks or performance issues. The inspector, in turn, allows users to interact with elements and debug tests by inspecting and modifying the state of the page.

Playwright trace viewer that helps with keeping track of all the tests run.

Mobile testing: Playwright provides full test execution for mobile applications in browsers by emulating real mobile devices. Users working with different screen sizes and viewports can emulate features like geolocation, locale, timezone, and permissions.
Multi languages support: Playwright supports programming languages such as JavaScript, TypeScript, Python, Java, and C#.
Easy configuration in one file: Users have a flexible way to customize their testing environment and settings – such as browsers, viewports, workers, timeouts, retries, artifacts, and more – all in one organized location. This makes configuring tests easy and efficient.
Friendly test reporter: After each test run, you can open the test report by using the npx Playwright show-report command. The command opens a very clear and user-friendly report in HTML which provides all the necessary information about the test run result.

Playwright test reporter opened in the modern browser.

More details on Playwright features that make my life easier

I’ve already laid out Playwright’s flagship features, but in addition to the main features described above, I would also like to mention a few more detailed Playwright options that I’ve come to appreciate in my everyday work.

1. Auto-wait

Auto-wait is an option in Playwright that helps the test to wait for the element to become visible or interactive before performing an action on it. This is done without adding additional explicit waits in the code. During test automation, it often happens that the element you want to use is not yet visible or interactive. Playwright tackles false-negative results by waiting for elements to appear in the DOM structure, become visible, and become interactive – all of which contribute to more accurate tests.

The table presents checks on actions in Playwright

2. Environment isolation

Full test isolation is an option in Playwright that allows you to run tests in a completely separate environment. With each run of your tests, Playwright creates a new browser instance with its very own context – including cookies, cache and storage – for complete test isolation. This ensures that you're able to create dependable and reliable tests. An additional advantage of isolation is the ability to investigate test failure and run parallel tests, thus reducing the time and cost of testing.

3. One-time login

This feature lets you enter credentials once and use them across multiple tests – saving time and, potentially, costs. Furthermore, creating a new browser context only takes seconds. Additionally, the ability to inject a certain state (e.g. cookies) into modern browsers allows for the browser to be configured for testing in an instant.

4. Handling iframes

Playwright has the ability to easily handle iframes and doesn't require any additional plugins or extensions. To accommodate this, you simply navigate to the iframe with a selector assigned to it, create a new page context, and you're set to interact with the iframe. After creating the new context, you can interact with the iframe just like you would with other pages.

5. Annotations

This is an extra beneficial feature. With it you can, for example, run only a specific test using .only, intentionally skip tests by adding .skip, or skip tests where issues have been detected but not yet fixed by adding .fixme. This will keep the tests from displaying as failed without having to remove or comment them out of the code.

6. Tags

Tags are a useful feature that allow you to organize and run tests efficiently. With tags, you can run a specific set of tests based on your criteria. On Playwright, you can add tags by priority level, environment, and user of features, and then run them grouped.

7. Using Configuration files and environments

Running tests against different project/configuration files gives you tremendous possibilities to configure the environment for almost every test individually. Let's assume your tests check the user path for various browsers, viewports, devices, and URLs. Using a simple configuration, you can fire specific tests against specific environments.

Example of configured projects in playwright.config file

Playwright with CI/CD

CI/CD as a methodology that involves automating the software delivery process, from building and testing to deployment and delivery. It aims to provide faster and more reliable software releases, with frequent updates and feedback loops to catch and address errors early in the process.

Playwright can be integrated into the CI/CD pipeline, allowing tests to be run automatically at different stages of the process and providing valuable feedback to the development team. As a rising star in test automation, Playwright has many possibilities for integration with CI/CD pipelines. Thanks to this, your tests can be run at any stage of the software development process, thus helping to quickly identify errors and give instant feedback.

Playwright offers many options for integration with CI/CD, including popular solutions such as Docker, GitHub Actions (also via containers), Azure, CircleCI, Jenkins, and GitLab CI.

Is Playwright better than…?

This is a common question asked almost everywhere Playwright is involved. We often evaluate a tool and look for a clear answer. Talking with colleagues in the industry about Playwright, the question almost always came up as to whether Playwright is better than other available tools.

One of the most frequently asked questions on the network is whether Playwright is better than Selenium and Cypress. Well, all three of the tools mentioned are very good and must be judged in the context of the situation and objectives of the project. Only after thoroughly analyzing your needs will you be able to judge what is best for your project.

In certain aspects, Playwright is the superior tool: it boasts excellent performance, offers single test runs, provides WebKit support, and offers outstanding multitab and frames support. You can also customize it with Jest or Junit as your runner. However, there are still some areas of improvement for Playwright; namely, its smaller community makes it more difficult to find solutions to problems and its incomprehensible documentation creates a high barrier of entry for newbies.

When to opt for Playwright?

There are certain instances where Playwright is better than other testing automation platforms. Here are some instances where this would be the case:

When you want to test both web and web mobile
When your tests are to be run on multiple browsers (especially WebKit)
When you need the best test performance
When you need to capture an execution trace
When you need to test scenarios that require interaction with multiple tabs, origins, windows, or even platforms
When you need to be able to record user actions easily
When your application’s elements require waiting/loading
When your application contains iframes that need to be tested
When your application is an ideal candidate for visual regression testing (both the entire page view and individual elements/components)

When to be careful when considering Playwright

On the flipside, Playwright’s principle of ensuring quality testing, for example, means that it may not be the best choice for tight deadlines.

You might want to be careful when considering Playwright if your project meets any of the following criteria:

When your team has limited knowledge of programming languages and does not have enough time to learn
When your web application is simple with a limited number of user flows, you may not need all the solutions that Playwright offers
When your project has a tight deadline
When you quickly need to write valid tests
When you count on the community to help you whenever a problem arises – Playwright still has a relatively small community growing quickly, but it is not yet as extensive as in the case of other best-known tools

Conclusion

To sum up, Playwright is a great tool that has become a permanent part of the arsenal for Developers and QA Engineers who deal with test automation.

Playwright has great features that can bring you many benefits. Examples of these features include browser context management, performance testing, and tags. This automation tool will certainly be useful in long-term, extensive, and slightly more complex projects requiring various tests. But as always, I recommend thoroughly analyzing your project’s needs and priorities before using Playwright in your application.