UI Automation Testing with Playwright

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.

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: A Quick Comparison

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

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 –

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

Thrive EdSchool

• 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