Programmers can run more tests in less time with automated testing. Along with this, they can also explore the functionality of their programs. The number of test automation frameworks available today can make it hard to decide which framework is right for your application. Playwright, Microsoft’s new test automation framework, is covered in detail in this article. It is also compared to some of the other major frameworks like Cypress and Selenium.
In case you are super keen to know more about Playwright in detail, then, this article is for you. So, sit back and read on!
Let’s start with the fundamentals first.
What is Playwright?
In the test automation market, Playwright is Microsoft’s brand-new automated testing framework that allows you to test web applications end-to-end. Although new, Playwright packs a punch with fast, accurate testing. Besides supporting JavaScript, Java, Python, and C#, Playwright also supports Chromium, Firefox, and WebKit, making it easy to test your application across multiple browsers.
It runs on Windows, Linux, and macOS and is open-source, requiring only NodeJS. Further, the framework is designed to be fast and reliable. As well as running in CI environments, Playwright has everything you need for a fully offline UI test environment.
Key features Of Playwright
Despite its simplicity, Playwright boasts a few tricks. Read below to know more about them in detail.
1. An overview of browser contexts
An isolated session can be created within a browser instance using the browser context feature. These fast sessions can be quickly created and appear in a state similar to an incognito. In addition to providing programmers with a unique browser setting for each test, browser contexts also allow them to simulate multi-page scenarios involving colours, permissions, locales, or even mobile devices.
2. Support for WebKit
In addition to supporting WebKit, Playwright is one of the few frameworks that support it. This gives you access to a number of possibilities that are otherwise not available.
3. Automated testing with Playwright
Playwright is only a few years old, but already offers strong support from Microsoft and their ecosystem, including cross-platform functionality that helps it compete well against some big names on the market. It has been less than a year since Playwright was introduced, and it has already gained a high satisfaction rating among its users.
In the future, Playwright may even offer interesting cross-functionality with other Microsoft apps, such as Azure. Playwright is growing fast, so we can expect to see a lot more new features.
Reasons To Choose Playwright
In this section of the article, we will have a look at some of the reasons why we think that you must pick Playwright.
- This tool supports multitab testing, multiuser testing, multi-origin/domain testing, and iframe testing. In addition to this, it runs tests in isolation with zero overhead (super fast!), using the concept of browser contexts (similar to a completely new browser profile).
- Tests can be run with one click, debugged step-by-step, selected, and coded with the VS Code extension. The HTML report in Playwright consists of visual diffs, error logs, video recordings, screenshots, and traces of execution results. It is a self-contained page you can host anywhere.
- Compared to Cypress, Selenium, and Puppeteer, Checkly has the fastest test execution time. In addition to this, ToMatchScreenshot() is built-in to support visual regression testing, and recently improvements have been made to disable animations and mask elements.
- Additionally, you can run tests in parallel using grids like Selenium Grid, as well as by sharding them between machines, e.g. using GitHub Action CI. Tests that run in sync use the JavaScript async/await syntax.
- Playwright is compatible with Chrome, Chrome, Firefox, Edge, Microsoft Edge, WebKit, Chrome, and Chromium and Microsoft maintains and builds this framework.
- Support for multiple languages including JavaScript, TypeScript (no transpilation necessary), .NET, Python, Java, and Go (community-supported).
- A post-mortem tracing technique which is useful for troubleshooting failed CI tests.
- This framework saves time by using the logged-in state for testing. User agent emulator, locale & time zone support, permissions, geolocation, and dark/light mode support.
- Uses white-box testing to prioritize user-facing attributes such as text over CSS selectors that are subject to frequent changes.
- In your e2e test, you can use API Testing to set up data and assert responses like 200.
- Interception of network requests and stubs.
- It also allows custom waits, such as until an element is visible or until a pop-up is loaded, so you don’t have to rely on hard-coded sleep commands that can slow down tests.
- The CI configuration is simplified and faster with dependencies and browsers built into docker images.
- Playwright test code can be captured as user actions using the record button in VS Code or using the CLI.
- Provides support for events specific to a particular device, including mouse hovers, tapping on mobiles, and keyboard shortcuts.
- Out of the box, you can upload and download files.
- Dynamic controls cause flakiness, which Locators eliminate.
- Many JS developers will be familiar with Playwright Test’s Expect assertion library and you must also note that tests can be tagged so that related tests can be run together
Best Practices To Adopt While Using Playwright
This section of the blog will analyse some of the best practices that you must incorporate to make the most out of the Playwright framework.
- Prioritize attributes that are user-facing
When testing for elements, use user-facing attributes as much as possible, such as text content, accessibility roles, and labels. Since a user does not know what “id” or “class” means, why should we use them? In addition to mimicking how users find elements, your tests will also be more robust since user-facing attributes change less than identifiers, class names, and other implementation details.
2. Use locators over selectors
The use of locators will help prevent flakiness or unnoticed page changes when your website changes. The use of standard selectors can sometimes leave these changes undetected. There are three possible outcomes when using locators when it comes to mitigating flakiness:
- As expected, the test runs smoothly.
- The locator complains about this and breaks the test with a nice error message when multiple elements match the selector (e.g. there is a second “Login” button somewhere on the page).
- Test fails loudly because selector matches nothing.
3. For more specific results, use double quotes
Using double quotes will enable case sensitivity if you find multiple elements with the same partial string.
4. Use Page Object Model (POM)
There are several advantages to using a Page Object Model, including avoiding duplication, improving maintainability, and simplifying interactions between pages when there are several tests.
In their docs, Playwright provides this example to give you an idea of how to use POM to write tests. It conveys more intent and encourages behavior over raw mechanics.
How does Playwright compare to other end-to-end test frameworks?
Here’s how Playwright stacks up against Cypress and Selenium, which are well-established players in the market.
- Cypress
Although Cypress and Playwright share some similarities, the two frameworks differ in a variety of ways. Cypress is also an open source framework that’s free for testers to use. Both frameworks use npm to install them.
Cypress does not support multi-page testing or third-party comparisons. There are a lot of people using the Cypress framework, and it has easy-to-understand documentation. Playwright lets you select the test runner of your choice and has fewer dependencies than other frameworks. The framework is an all-in-one test kit, which makes it more plug-and-play.
As compared to the other frameworks, Cypress offers a better alternative for those new to testing or those who wish to have everything they need in one package. For those testing in Webkit or covering multiple domains and pages, Playwright is probably the better choice.
- Selenium
In a few ways, Playwright and Selenium are similar. Both frameworks support multiple programming languages, although Selenium supports a few more (namely Ruby, PHP, and Perl). They are both easy to install, open source, and totally free. Selenium is compatible with every browser, whereas Playwright is cross-platform with Chrome, Firefox, and Webkit. Also, Playwright’s headless approach allows for faster testing even in the most complicated environments.
It is generally considered to be the best framework for complex tests with a limited scope of coverage. Selenium is likely to be the best choice for tests requiring a broader scope of coverage. Since Playwright is so new, it is uncertain how much it will expand into other languages and platforms in the future.
Conclusion
In summary, Playwright is a powerful headless browser that has excellent documentation and a thriving community. If you already know Node.js, you want to get up and running quickly, and you care about developer happiness and performance, then Playwright an ideal solution for you.
It would be easy for you to run Playwright tests in parallel on 50+ browsers and operating systems by using LambdaTest’s cloud. You can easily execute Playwright tests in parallel and cut down your test execution time by multiple folds. Having real-time visibility into your automation testing efforts is crucial to LambdaTest. With their Test Analytics suite, you can quickly identify high-impact issues and bottlenecks in your testing efforts.
