Today’s topic revolves around “UI Automation Testing with Playwright.” As we delve deeper into Playwright, we quickly realize that its utility extends beyond just UI automation testing; it encompasses a wide range of automation capabilities. So, let’s explore why Playwright is a unique and compelling automation tool worth considering. We will also delve into creating frameworks using Playwright and more.
To kick things off, let’s start with a lighthearted icebreaker—a quick comic.
In the comic, Dilbert approaches his manager, proudly declaring, “Can I show you something I’m proud of? I automated a task that used to take me 3 hours.” The manager quips, “Well, well, isn’t that just like you?” Dilbert questions, “Are you implying I’m resourceful?” To which the manager humorously retorts, “No, lazy.”
Bill Gates once famously stated that he prefers to delegate tasks to lazy individuals because they tend to find ways to automate processes, resulting in increased efficiency. We all engage in automation, using various tools such as scripting tools, UI automation tools, and API automation tools, which can either make us resourceful or, as Bill Gates suggests, a little lazy – depending on our perspective.
So in today’s Playwright tutorial, we’ll get an understanding of what Playwright is, along with some intriguing trivia about Playwright, and a comparison between Playwright and Selenium, with Selenium being one of the most prominent UI automation tools in widespread use. We’ll also explore the distinctions between the two and conduct an in-depth examination of the Playwright’s features.
All of this will be followed by a comprehensive demo that covers various aspects of Playwright, including how to get started, and its advantages in both UI and API automation. Additionally, we’ll provide some handy tips on how to persuade your manager to adopt Playwright if you find the demo inspiring. Lastly, we’ll share some valuable learning resources to assist you in getting started with Playwright after today’s session. So, without further delay, let’s dive in!
What is a Playwright?
At its core, Playwright is an open-source Node.js library developed by Microsoft. It is open-sourced, making it accessible to the community.
Open source Node.js Library
If you have experience with Puppeteer (which is essentially a library from Google), the same team transitioned to Microsoft to create Playwright. These experts are the masterminds behind this automation library.
End-to-end Test library
Playwright serves as a comprehensive end-to-end testing library. It enables you to conduct UI tests, craft API tests, and integrate them into your test-driven development process. Unlike typical UI automation tools primarily used post-deployment, Playwright offers broader utility.
If your stack is based on Java and you wish to incorporate Playwright into your existing framework, it’s relatively straightforward to add the necessary dependencies and get started.
Support Browser Stacks
Regarding browser support, Playwright operates seamlessly on any Chromium or WebKit-supported browsers. It currently provides native support for Chrome, Firefox, Safari, and Edge. Notably, it does not support Internet Explorer (IE), which has already been phased out.
Support for Android browsers in Playwright is somewhat limited and can be described as experimental. If you have a Chrome browser installed on an Android device and wish to conduct testing, you can proceed with it.
Additionally, Playwright offers viewport support, allowing you to replicate whatever you observe on your Chrome screen. For instance, if you utilize the developer options in the Chrome screen and resize your window to evaluate progressive or responsive applications on iPhones or Android devices using developer tools, Playwright facilitates these actions seamlessly.
Playwright comes with its own built-in Test Runner, which means you have the option to use it without relying on third-party Test Runners. However, it also offers compatibility with additional Test Runners like Cucumber, TestNG, and Junit.
Playwright Vs Selenium: A Quick Comparison
|Locators||Locators with native wait(s)||Locators with additional waits|
|API Testing Support||Yes||No|
|Screenshots & Videos||Yes||Yes|
|Assertions||Internal (Jest) . Support for external||External|
|Stability of Tests||Highly Stable||Depends on the framework|
|Tech||Headless architecture||JSON on the framework|
|Parallel tests||In-built||Selenium Grid or Runner supported|
|Container||Docker images available||Docker images available|
|Debugging Tools||PW inspector, VS Code debugger, Trace viewer||IDE supported third party tools.|
The most significant distinction when comparing Playwright vs. Selenium, which is immediately noticeable, pertains to the locators equipped with native waits. While you have the option to configure global waits if necessary, the locators themselves possess default waiting mechanisms. Consequently, you need not be overly concerned about the occurrence of flaky tests or unpredictable inconsistencies that may arise during testing in specific environments.
Depending on the system you intend to test, you can establish global waits to ensure that the DOM is fully loaded. This process involves locating XPaths or CSS selectors and awaiting the appearance of the desired element. Furthermore, it encompasses waiting for events to be triggered on the element and for those events to be successfully executed.
This comprehensive approach ensures that the testing process does not proceed hastily, offering robust support for mitigating flakiness in your overall UI testing. While Selenium has introduced various dependable locator add-ons, Playwright distinguishes itself by providing built-in locator support with integrated waits.
API Testing Support
API testing support is one of the hallmarks of Playwright. Playwright offers native support for API testing, allowing you to make API calls and conduct your tests seamlessly. One of its significant advantages is the ability to construct hybrid frameworks. This capability proves invaluable when you need to perform actions in the UI while simultaneously running background tasks asynchronously.
You can use Playwright’s API support to make asynchronous API calls within your code and validate the results alongside your tests. Alternatively, if you simply require a plain vanilla API testing test suite, Playwright can accommodate that too.
Screenshots & Videos
Both Playwright and Selenium provide support for capturing screenshots and videos during test execution.
Selenium allows for the use of external runners like TestNG, JUnit, or Cucumber, whereas Playwright comes with an integrated runner. As a result, you don’t need to go through the process of integrating a third-party runner. However, it’s important to note that Playwright does offer support for third-party runners if you prefer to use them.
Playwright includes internal assertions using Jest support. You can use these assertion functions within the Playwright library, but it also allows for the use of external assertion libraries if desired.
As previously mentioned, the use of native locators and their corresponding native waits in Playwright significantly enhances test stability. Unlike Selenium, where you may need to create a framework to address these issues, Playwright handles these aspects by default.
Your primary concern may revolve around adjusting or fine-tuning timeouts associated with these locators, a task that can be accomplished either at a global or local level.
Playwright primarily operates in a headless architecture by default, while Selenium relies on a JSON wire protocol. Playwright can also run in headed mode and leverages Chrome DevTools for test execution control.
Parallel testing is inherently integrated into Playwright, whereas with Selenium, you may need to rely on tools like Selenium Grid or utilize runner-supported functions such as those available in TestNG.
In Playwright, by default, tests are executed across multiple threads. Each test operates within its dedicated thread, allowing you to concurrently run multiple tests across different threads. Additionally, Playwright offers customizations to execute tests sequentially if that better suits your requirements.
There is default support for Docker images. You can simply launch a Docker image and start running your tests within it as well.
Some of the built-in debugging tools include the Playwright inspector and Trace viewer. Since Playwright is a Microsoft open-source product, it also includes a VS Code debugger.
Unique Features of Playwright
Playwright boasts several notable features, with one of the most significant being its support for multiple processes and the ability to operate in an Incognito browser context. This feature allows you to configure a context for a specific web application in Incognito mode, facilitating seamless validation. The advantage here is that it doesn’t retain any cookies or local data during testing, making it secure for use in public browser spaces like Sauce Labs or Amazon.
Regarding API testing, as previously mentioned, Playwright offers robust support. If you require a hybrid test involving asynchronous requests to validate specific aspects, Playwright readily accommodates such scenarios.
Network Monitoring and Mocking
The other cool feature is that you have access to network monitoring and mocking, which automatically monitor network calls during test execution. With the latest Playwright version, you can even store the entire HTTP request data in a HAR file for future test replay.
Additionally, Playwright enables the creation of API routes for conducting UI tests in a TDD manner. If you need to establish a mock API route, Playwright offers this functionality out of the box, eliminating the necessity to interact with a live server. Playwright can seamlessly emulate the server, streamlining your testing procedures.
We have already discussed Auto-Waiting. Playwright incorporates various contexts for Auto-Waiting, including checking if the DOM is attached, if elements are visible, if elements remain stable, or if they disappear during testing. It also tracks events, ensuring they are actioned as expected, and monitors elements that need to be enabled throughout the test.
Playwright has limited compatibility with the Android Chrome browser and offers support for various other mobile browsers.
Parallelism is seamlessly integrated into Playwright, allowing each test file to execute in a dedicated worker thread. You have the flexibility to limit the number of workers in Playwright and specify the desired order in which tests should run.
Playwright provides useful hooks, including BeforeAll, AfterAll, BeforeEach, and AfterEach hooks. These hooks are readily available to streamline the execution of specific functions before running a test suite or after each scenario.
Now it’s time to take this Playwright tutorial to another level and check the demo! Watch it here:
How to Convince Your Manager?
If you like this Playwright tutorial, then you must also want some tips on how to convince your manager to use Playwright for your projects. So here are some tips –
Start with a Sample:
Begin by demonstrating the Playwright’s ease of setup and initiation, as exemplified in the earlier presentation.
Highlight Unified API and UI Testing
Emphasize the advantage of performing both API and UI testing within a single library. Unlike Selenium, which often requires the use of additional libraries like REST Assured for API testing, Playwright streamlines the process.
Consider Project Type:
Depending on your project type, tailor your approach. For Greenfield projects, advocate for starting with Playwright from the outset. In the case of Brownfield projects where existing systems are in place, suggest introducing Playwright for new modules. Playwright’s Java support allows for seamless integration into existing repositories.
Leverage Microsoft’s Backing
Playwright benefits from substantial support due to its association with Microsoft. The extensive resources, including blogs and YouTube Playwright tutorials, provide valuable assistance and insights.
Provide Real-World Examples
Share success stories from other companies that have already embraced Playwright. Our Discord community is a valuable resource, where you can gather practical examples from fellow Playwright users.
Highlight the comprehensive documentation available for Playwright, making it easy for your team to get started and troubleshoot. Additionally, Stack Overflow provides a robust support network for both Playwright and TypeScript.
Wide Language Support
Remind your manager that Playwright supports multiple key programming languages, enhancing its versatility and compatibility with your team’s preferences.
Where to Start
- Learn Playwright with TypeScript from Scratch through this course by Sundaresan Krishnaswami
- Start here for docs and code examples
- LetCode with Koushik
- Cucumber and Playwright with Tally Barak
- Automate Together
Playwright Cheat sheet
- By Nithya Narasimhan https://bit.ly/3UNJ5Gf
- Cucumber reading resource Lan Routledge
1. Does Playwright support Windows applications, or is it only for the web and APIs?
Playwright is primarily designed for web and API testing. It does not support Windows applications.
3. What is a “vanilla” test suite?
The context of “vanilla” in this Playwright tutorial refers to the default or out-of-the-box test suite that comes with your automation tools or is generated when using scaffold projects. It represents the basic and uncustomized configuration or setup of your testing environment.