It can be tough to stay up-to-date on all the new software testing techniques. So many changes in the world of technology! But don't worry, we're here to help.
In this comprehensive guide to playwright testing, you'll learn the following:
- Today’s software development testing challenges
- What Microsoft Playwright JS is, and how it works
- Microsoft Playwright JS tutorial examples
Test Automation Tips and Tricks
Before we get into the Microsoft Playwright Automation Tutorial, I want to address a question I’m frequently asked.
Why is browser-based test automation so tricky, regardless of which test tool I use?
Here is my answer.
What Are The Challenges Of Modern Browser Applications?
Here are some challenges of modern browser applications:
- Today’s web applications tend to be extremely rich and responsive.
- Developers are mainly building single-page applications that do a lot more in a browser tab than web applications used to do a decade ago.
- The highly responsive behavior of web apps is primarily powered by handling asynchronous events. For example, say you're picking a particular button on a page, and then stuff happens on the page.
- These web applications are rarely isolated and usually, involve your backend services talking over the network.
- There are lots of asynchronous events that are happening inside a web application, and being able to automate these things predictably is hard.
- You may run into cases where a network takes slightly longer and prohibits the UI from being ready for a script to interact with it because it's still loading behind the scenes.
- You might be expecting a new popup window to be released, and you may have to switch context and automate that window.
There are tons of scenarios like these involved in building web applications today.
This asynchronous nature creates difficulty for any sort of automation to work reliably, which is why so many developers and testers out there are struggling with automation.
This is where the whole idea of brittle or flakiness starts coming into focus.
Of course, most existing frameworks and drivers are doing what they can to improve things. But given the requirements of web applications today, it's a tough problem.
Because of this, the Microsoft Playwright JS team saw a need for a tool that could keep up and handle this newer approach to web development.
So what is Playwright, and how can it help with today’s software development testing challenges?
What Is Microsoft Playwright?
Microsoft Playwright is a newer, open-source, cross-browser automation library for end-to-end testing. It started off as a javascript-based library, but they have since expanded to support Python, Java, and .NET, and the community has a Go library.
The goal of Playwright Node.js is to provide a single API to developers and testers to automate their web applications across today’s three major browser engines:
Arjun Attam, the program manager on the Playwright team at Microsoft, told me they created Playwright explicitly for the web automation space. Their goal was to help introduce automation that is fast and reliable enough to execute the needs of the modern web.
You might be thinking, “Ummm…this sounds an awful lot like Puppeteer.”
And you would be right—partially.
But here's the thing.
Playwright Vs. Puppeteer?
Playwright by Microsoft did start as a fork of Puppeteer.
For folks who aren’t aware, Puppeteer is a node library to automate the chromium browsers with the JavaScript API.
In a lot of ways, though, Playwright API has a different philosophy behind it.
For one thing, it was designed for e2e testing. It is apparent when one looks at how the Playwright team created their API that it was done with developers and testers in mind.
Arjun explained that they spoke to a bunch of developers and testers using various cross-browser automation tooling to automate their web applications in the context of end-to-end testing. What they discovered was that there were gaps in the ability to run these tests across multiple browsers.
They were also looking for a more straightforward API that simplified the learning curve for using automation.
So, his team created Playwright to focus on these e2e testing problems from the get-go.
But how?
Automation Testing Training Courses
Is Playwright A Web Testing Tool?
Playwright tries to approach the problem by introducing intelligence defaults that make things easy right out of the box. It's easy to install Playwright, and it also includes the capabilities required for more advanced test scenarios. Playwright also conveys full test isolation with zero overhead.
When you create and run a Playwright script, it runs through a bunch of checklists and ensures that the UI is ready for the test to execute the actions.
As users, we're naturally hardwired to wait for these things, but many tools require you to code for these scenarios. Instead, Playwright tries to handle these types of issues for you automatically.
Is Playwright built on Selenium?
I get asked this all the time and the short answer is no.
Playwright is not built on Selenium. Instead, it is a robust automation testing framework created by Microsoft that stands independent of Selenium. Offering enhanced performance and innovative features, Playwright provides cross-browser and cross-platform compatibility.
When I asked Arjun Attam the former Product Manager for Playwright at Microsoft about this decision to create a new solution he told me:
“Due to newer web development approaches, modern applications demand more sophisticated and responsive interactions than ever before. These changes cause inherent challenges for developers and testers in automating these complex web environments. Traditional tools like Selenium (created twenty years ago), while groundbreaking in their time, struggle to seamlessly handle the asynchronous nature of today's single-page applications, from network delays to dynamic UI changes.
Microsoft developed Playwright as a forward-thinking solution designed to address the nuances of modern web applications.
It introduces “intelligent defaults” and advanced APIs, ensuring elements are fully interactive before proceeding with automation tasks. This innovative approach minimizes the brittleness and flakiness often encountered with traditional automation frameworks, offering a more reliable and intuitive testing experience.”
Arjun's insights highlight Playwright's potential to redefine web automation, emphasizing the tool's ability to cater to the sophisticated needs of current web applications and its role in advancing the automation industry.
The next questions I often get asked at this point is….
Is Playwright better than Selenium for test automation?
The answer depends on your team and your testing environment's unique needs.
One tool is never better, but one may be better for you and your team.
When comparing Playwright and Selenium for test automation, it's essential to consider their unique strengths, which we will talk about in this article.
Playwright offers improved stability by performing thorough checks on elements before executing actions, resulting in more reliable tests.
Additionally, scripts written in Playwright tend to execute faster than Selenium scripts. On the other hand, Selenium relies on implicit and explicit waits for handling elements, which may introduce some challenges in ensuring test stability.
Ultimately, the choice between Playwright and Selenium depends on specific project requirements and preferences. Still, Playwright's focus on stability and faster execution may provide a more efficient testing solution in many cases.
Which one is better? Try both in a proper proof of concept in your environment and you decide.
Which browsers are supported by Playwright?
Playwright, developed by Microsoft as a fork of Puppeteer, supports cross-browser compatibility by allowing automation of Chromium, WebKit (the engine powering Safari), and Firefox browsers using JavaScript.
Unlike its predecessor Puppeteer, Playwright offers the capability to drive these three major browsers, making it a versatile tool for browser automation tasks.
Hands-on Microsoft Playwright Tutorial Examples
For example, actions in Microsoft's Playwright auto–wait for elements to be ready before your test interacts with them.
How To Wait For An Element Using Playwright
Waiting for an element to be ready is a typical pattern that developers have to write into their code explicitly.
But Playwright does this automatically for you behind the scenes.
This feature makes it easier for you to write tests and, in turn, can make your tests more reliable.
It was also designed to allow you to run on all the major browsers (Chromium, Firefox, WebKit, et al.)
Additionally, they added newer testing capabilities to support things like an API for file downloads and support to better handle out-of-process iframes, site test isolation, and browser contexts.
What Are Playwright-Supported Capabilities?
- You can create scenarios that span multiple pages, domains, and iframes
- Time-saving auto-wait for elements to be ready before executing actions (like click, fill)
- You can intercept network activity for stubbing and mocking network requests
- Playwright JS can even emulate mobile devices, geolocation, permissions
- This tool supports web components via shadow-piercing selectors
- Allows you to tap into native input events for mouse and keyboard
- Can be used to upload and download files
- Headless execution
- Cross-browser web automation
This tool's goal is to provide a flexible API with enough capabilities so that you can avoid common issues that cause brittleness or flakiness without having to anticipate them ahead of time programmatically.
Another design choice was to center Playwright around the notion of browser contexts.
Register for Automation Guild 2023 Now!
What Languages Does Playwright Support?
Playwright originally started off as a Javascript Node.js library but now supports multiple programming languages like:
What Are Microsoft Playwright Browser Contexts?
Browser contexts are isolated environments built on a single browser instance. They make it possible to create concurrent tests that are entirely separate from each other and execute in parallel to the browser context.
Browser contexts also enable you to emulate scenarios where you're changing the device viewport, permissions, or GEO locations across multiple pages.
Once again, the goal is to have Playwright fit the needs of developers and testers for creating end-to-end tests.
How To Run Playwright Tests In Parallel
Browser context really comes into play when discussing parallelization.
When you're automating a web application, you're using a browser instance. You can launch these browser instances; you can close these browser instances.
Playwright introduces a concept called browser contexts, which is central to the execution model. So, one single browser instance can be used to create multiple concurrent, isolated browser contexts.
These browser contexts are extremely fast and inexpensive to create, so you can create hundreds of browser contexts, and you can close them down as needed.
Each browser context can also host multiple webpages.
For example, if you're using the single WebKit instance and you're creating a browser context on top of that and running your scripts inside that browser context.
Now because these browser contexts are isolated and concurrent and you can actually run parallel tests with a single instance of WebKit across multiple contexts.
Playwright Tutorial On How To Browser Viewports
Every context can have a specific browser viewport.
It can have a specific permissions configuration. It can have default geolocation.
That means it can create a browser context for the iPhone viewport with geolocation set to zoom, for example, giving it a particular set of permissions and running your web application within that emulation environment.
You can probably imagine test scenarios running across a matrix of mobile, desktop, viewports, and geolocations with different permissions.
So you can spin a browser context for each one of those parameters and run them in parallel.
Typically, a single browser instance can be costly to launch and close but can be reused in isolated environments by browser contexts. You can use this technique to parallel execute your tests across multiple sets of emulation scenarios.
This feature is built into Playwright.
Supports Scenarios That Require Authentication Test Cases
Another cool thing you can do with this feature is to emulate, in a browser, the context of authentication credentials.
For instance, many applications use browser cookies to define the authentication state.
Using two different browser contexts on the same browser instance, where you have two different authentication credentials.
All applications have a sense of permissions and user roles.
So you could log in as an administrator in one context and log in as a dummy user in the other browser context and essentially generate tests in parallel across these two different authentication credentials.
Again, the key thing here is to reuse the instance, which means that you're not spending time launching a new browser or closing it and recreating it again and again.
You can do this expensive operation of launching before your test execution and essentially create new contexts that are extremely fast and cheap to create and destroy in the context of all the tests.
Speaking of running tests in parallel, does it support continuous integration and continuous delivery?
TestGuild Training Sessions – Register Now!
How To Use Microsoft Playwright JS With CI/CD Pipelines
To make it easy, the Playwright team released many recipes that are available across multiple CI providers. So they have documentation on getting started with:
- GitHub action (no longer recommended)
- Travis CI
- CircelCI
- AppVeyor
These tools are super popular, and they are part of the broader developer experience of using Playwright.
To make your test automation CI/CD efforts even easier, they also released a docker image. So if you're not using one of these CI providers, you can use a docker container instead to get started with the cloud deployment of Playwright with that docker image. The docker image is recommended because it has all the dependencies and browsers baked in.
Also, with the release of a GitHub action for Playwright, if you don't want to dive into the configuration and have something that just works out of the box, this is a great option.
Using GitHub actions and the Playwright GitHub actions added to your action's YAML can quickly get started with running the Playwright test on CI.
What Is The Playwright Test Recorder
When I first wrote this post, Playwright didn’t come with a test recorder, but Testim did create a free one for it called Playground.
One of the challenges of using Playwright and Puppeteer is that you need to write tests in code, which takes time and effort to get right.
Codeless test automation solutions can enable fast recording of user journeys that can then be configured in an editor or code.
This free recording offers the following benefits:
- Eliminates many of the mundane and repetitive tasks of writing tests
- Accelerates test creation to keep pace with shrinking release cycles
- Helps build the test coverage needed to ensure quality
Oren Rubin, the founder of Testim, explains:
Oren also mentions a few cons of using the headless browser tool Playwright Node.js in his TestGuild Meetup Session
- No support for IE 11
- currently no easy grid solution
- no plugins system
- not many integrations
- API is still changing – they just reached version 1.0 recently
The folks at Checkly released a free Chome extension headless recorder to record your browser interactions and generate either a Puppeteer or Playwright script.
The biggest news here is Playwright has released their own recorder that is included in the CLI (codegen cmd), and it's now built-in to their new VS Code extension as well.
Test generator
Since I originally wrote this post Playwright has also come out with a native test generator.
The Test Generator, a feature of Playwright, helps you to automate test creation by enabling developers and testers to generate test scripts through interaction with a web application in real time.
This tool not only accelerates the initial setup for testing by automatically identifying and utilizing the most effective locators (like roles, text, and test IDs) for elements but also ensures the resilience of tests by refining locators to uniquely identify target elements. The process simplifies the test creation to a great extent by allowing actions within a browser to directly translate into executable test code.
Final Thoughts
As you've seen, Microsoft Playwright is built to be extremely modular and focused on being an automation driver that works nicely with other parts of your testing stack.
Also, the folks at Microsoft have been very active in making constant updates.
In my opinion, it is seriously challenging Selenium for browser automation dominance.
Check it out on Github, give it a try and let me know what you think.
Next Steps
Now that you know more about this automation tool be sure to check out my other post on Playwright Tutorial: Getting Started With Playwright Framework.
