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?
- Open source Node.js Library
Created by Microsoft and open-sourced
- End-to-end Test library
Validate Ul tests
Write API tests
- Supported Languages
JS/TS, Python
NET, Java
- Support Browser Stacks
Chrome Firefox, Safari, Edge or any Chromium,
Webkit supported browsers
- Mobile stack
Android browser support
- Test runner
In-built Node.js For Java PW supports Cucumber, TestNG or JUnit
Open source Node.js Library
At its core, Playwright is an open-source Node.js library developed by Microsoft. It is open-sourced, making it accessible to the community.
Trivia – 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.
Supported Languages
Playwright is compatible with JavaScript and TypeScript, with Microsoft strongly recommending TypeScript due to its association with the company. Playwright also provides support for Python, .NET, and Java.
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.
Mobile stack
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.
Test runner
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.
If you’re working with Java, you can utilize TestNG and Junit. For JavaScript and TypeScript, Cucumber already provides support. If you’re in the .NET ecosystem, you can opt for SpecFlow, and if you’re using Python, Behave is available as a Test Runner. This extensive range of supported Test Runners underscores the comprehensive nature of Playwright’s capabilities.
Playwright Vs Selenium
| Features | Playwright | Selenium |
| Locators | Locators with native wait(s) | Locators with additional waits |
| API Testing Support | Yes | No |
| Screenshots & Videos | Yes | Yes |
| In-built runner | Yes | No |
| 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. |
Locators
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.
In-Built Runner
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.
Assertions
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.
Test Stability
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.
Tech
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 Tests
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.
Container
There is default support for Docker images. You can simply launch a Docker image and start running your tests within it as well.
Debugging Tools
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
Browser Support
- Can run multiple user context across different browsers at the same time
- Allows incognito browser context
API Testing
- Hybrid API tests or Async requests can be made
- Create an API test suite using PW
Network monitoring and Mocking
- Monitor and store HTTP requests for debugging
- Create API routes to test Uls in a TDD
Auto-waiting
- Attached. Visible, Stable, Receives events, enabled
Devices
- Runs in a given device context
- Support for mobile browsers
Parallelism
- Runs each test file in a worker thread
- Can limit the number of workers
- Can set tests to run in order
Hooks
- BeforeAll. AfterAll. BeforeEach. AfterEach
Browser Support
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.
API Testing
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.
Auto-Waiting
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.
Devices
Playwright has limited compatibility with the Android Chrome browser and offers support for various other mobile browsers.
Parallelism
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.
Hooks
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.
Playwright Demo
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 –
- Startup with a sample
- Talk about API+UI testing in a single library
- Greenfield project, Suggest playwright
- Brownfield project, Suggest for new modules
- Discuss support for Playwright
- Give other company examples
- Quote exhaustive doc + StackOverflow help
- Support for key languages
- No-code using inspector
- Execution speed
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.
Extensive Documentation
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
Playwright.dev
- Start here for docs and code examples
Youtube Resources
- LetCode with Koushik
- Cucumber and Playwright with Tally Barak
- Automate Together
Playwright Cheat sheet
- By Nithya Narasimhan https://bit.ly/3UNJ5Gf
Other resources
- Cucumber reading resource Lan Routledge
FAQ
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.
2. What programming language should we learn to work with Playwright, Java, or JavaScript?
Playwright provides support for multiple languages, including TypeScript, JavaScript, and Java. However, it is recommended to learn TypeScript and use it with Playwright. TypeScript offers extensive resources and support for Playwright, and it is relatively easy to learn. If you already know JavaScript, you can take a quick refresher course in TypeScript and then dive into using Playwright.
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.
