What you could do if you had a free, tireless browser operator?! Introducing Playwright.

Browsers are our primary platform for running applications and retrieving information. We have to use browsers to test applications, verify health and current performance of applications, look up data and download (as) files, submit information, and do much of our daily work.

Suppose we had a new colleague – who is extremely good at operating a browser and who does not mind repetitive task; this colleague does not ask for pay or sustenance, we only need to provide clear instructions on the tasks this colleague needs to perform through the browser. This colleague can also bring their friends with the exact same characteristics and capabilities and together they can get a lot of browser work done.

Note that these browser “robots” are very adept at browser interaction, much more so than regular human users – they can look in the HTML source, the DOM structure, HTTP requests and the JavaScript context as well as the local storage and cookies and they know how to manipulate all of these.

This article introduces Playwright – an open source software library that provides with a deus in machina – a robot in our browser do perform power operations. And this opens up many more opportunities than you may realize at first glance. At least more than I originally thought. From automated testing (obviously) to tactical integration and RPA, and from deeplink bookmarks, screen scraping, web app health monitoring (smoketests) and customized web applications.

In short: Playwright is a fairly new (2020), open-source, JavaScript-based, cross-browser automation library for end-to-end testing, created by a team at Microsoft – that used to work at Google and created the popular Puppeteer tool. The goal of Playwright is to provide a single API to developers and testers to automate accessing their web applications across today’s three major browser engines: Chromium (Chrome, Edge), Firefox and WebKit (Safari) for test purposes – and other creative purposes. (almost) any operation that you may want to perform through a browser on a web application can be automated through Playwight. Note: Playwright also has APIs implemented in Python, Java, Go and C# – currently (December 2020) in preview.

This article “What is the Microsoft Playwright Automation Tool Guide” on TestGuild provides a great overview of the background and key objectives and features of Playwright. For more detail, please refer to this overview. I will not attempt to duplicate this pretty awesome description – just pick some cherries.

At a more technical level, the picture before my mind’s eye of my Node application using the Playwright library looks as follows:

With the introduction of Playwright, my Node application suddenly contains a full blown browser instance. This browser instance can do all the things a regular browser can do – such as download web resources through HTTP requests, interpret HTML, CSS and JavaScript to produce a DOM and a live JavaScript context. And all of that programmatically. The browser instance can process interaction with fields and buttons and other DOM elements – as if they are initiated by a normal user.

Through Playwright, my Node application can pull all kinds of strings on the browser (like a puppeteer…) by issuing commands as if to a human user. Examples are:  navigate, type, click, wait for X, read (and remember), click and upload file. Additionally, my Node application can add HTML elements to the web application’s DOM and also add JavaScript functions. It can execute JavaScript inside the browser instance and even let JavaScript functions make calls to functions in the Node application, The Node application through Playwright can prepare cookies and the local storage in the browser context – and read these at any point during a session. It can also intercept or initiate HTTP requests.

Primary Use Case: Web UI Test Automation

The primary use case for which Playwright was created is test automation for web applications. Test automation is a crucial component of software development. In our shift left we want testing to take place as early and often as possible, fully integrated with the CI/CD pipelines. And while we are at it: automated smoke testing (after any release of infrastructure, platform, data or application) is highly desirable as is periodic health checking on the availability, functional correctness and performance of important features. Automation of testing of web applications has always been a bit of a pain. Creating scripts is a lot of work and defining robust scripts that do not break with every small change in the user interface is no easy feat. Using such scripts across different browsers and devices is even harder.

Playwright first and foremost tries to address these challenges. Make it as simple and intuitive as possible to create a test script for a web application – that is not brittle, that works across browsers and devices, that is easily integrated into CI/CD tooling and that can handle complex scenarios such as authentication, file upload and download, mock network interaction, publish native mouse and keyboard events, take screenshots of web pages and record a movie of the scenario, Playwright works with a single browser instance (which is a sizable object in terms of memory usage and a substantial startup time) that can then run many (100s) of parallel scenarios in a fast start and light weight execute fashion. Each parallel scenario runs in its own isolated browser context – with its own device settings, memory context, viewport, authentication identity etc.

Many popular test frameworks provide some form of interaction with Playwright. Examples are Mocha, Chai, Jest/Jasmine, AVA, CodeceptJS (see https://playwright.dev/docs/test-runners/) . Note that for testing complex SPA web applications it might be convenient for stand alone testing to mock all calls to back end APIs; several solutions for this are available, one of which is mockiavelli.

An interesting additional type of testing – beyond functional and behavior oriented testing – is visual regression testing. Various tools are available that can be used to spot relevant differences in a user interface – indicative of visual regression. With Playwright’s capacity to take screenshots at specific steps in a end to end functional flow combined with one of these tools – Resemble.js, pixelmatch, Rembrandt.js – we can easily implement an automated check for UI distortion.

The Playwright site includes examples of integration of Playwright with several CI/CI tools, including GitHub action, Travis CI, Azure DevOps Pipelines, Jenkins, GitLab CI, CircelCI, AppVeyor – see https://playwright.dev/docs/ci for details.

Other Use Cases – let the fun begin!

Playwright was developed with test automation top of mind. The resulting library allows for automated browser operations in general. This can be leveraged for much more than just test scenarios. Some use cases that came to my mind:

• Deeplink Bookmarks – navigate to a specific point in a web application that is not directly accessible (with a full context prepared, ready for user action); we use Playwright to run a headful  browser, let it make all preparatory steps so the human user can start immediately with meaningful actions. See below how I made my daily time entry task a bit more efficient.
• Tactical integration: automation of data retrieval (“Screen Scraping”) and data entry – periodically entering data into a website or retrieving information from a web site or application can take a lot of time and is potentially error prone (as well as not fun at all); using Playwright, we can automate these steps without having to implement a full blown code intensive integration component; for example: writing a Node application that reads a CSV file and enters records into a web form is quite straightforward using Playwright
• Health Checks (monitoring of User Interfaces): we can monitor the current status of our web applications by closely watching the activities of our current users; when something breaks, we can spot the error and come into action. However, we can also set up our own “synthetic” user who – through Playwright – is constantly active on our web application, running through the most relevant end to end scenarios and reporting on errors and deviations in response times.
• Automated Reporting – instead of checking various reports, charts an dashboards by navigating to all of them, a Node application can use Playwright to make these visits including all required filtering and adjustment and take screenshots, compiled into a single PDF or PowerPoint document to quickly provide an overview to the human user
• Customized Web Application – Playwright can run in headless mode (no UI visible) or in headful mode. In the latter case, a browser window is opened and can be used by a human user. Through Playwright, the web application can be customized: DOM elements can be added or removed, JavaScript can be added or executed. This makes it possible to fine tune the UI to the needs and preferences of a specific user, for example with convenient short cuts of automatic initializations. See below the example of customizing the DuckDuckGo search engine’s user interface.
• UI turned API – Sometimes we would like to have an API where none is available. Our vendor may offer only a UI on top of the COTS or SaaS application and we would really like to build an automated integration with our other applications. It is relatively to implement a REST API in Node and if that same Node application uses Playwright to interact with the Web Application, we can expose an API on top of it. See below the example of putting an API on top of IMDb.
  
  
• Demos and [step by step] Instructions – Using Playwright running in headful mode, we can create demo of using a web application. We can can show, slowly and step by step, how to carry out specific procedures. At any point, the user can stop the demo, inspect the application, carry out additional actions, then continue with the demo. We can even show floating labels inside the web application during the demo by manipulating the DOM.
• RPA – Robotic Process Automation: automated workflow across multiple systems, possibly a collaboration between human & robot. Much is said about RPA – in very fancy scenarios and in very simple workflows. With Playwright we can easily create Node applications that can combine multiple web applications as well as REST APIs – to gather information, combine that information and enter or send information to destinations. With the Node application running locally on a Windows computer and in combination with tools such as AutoHotKey we can create RPA flows that combine browser based applications and native Windows applications.

Simple (very simple) Code Sample

To give you a tiny flavor of what such a combination of Node and embedded browser looks like, is here the simplest code sample imaginable. It creates a browser instance in headless mode, a new page in that instance and then navigates that page to a specific URL. It takes a snapshot of the page when the navigation is complete – writes it to the local file system as example.png – and closes the browser instance.

Before this Node application can be ran successfully, you first need to install Playwright – using npm i –D playwright. This installs Playwright and browser binaries for Chromium, Firefox and WebKit.

Deeplink Bookmark for Quick Starting Time Entry

My company likes me to frequently enter my activities into our time sheet application. I not like doing that, as it is a rather involved process.

It takes me close to two (definitely non fun) minutes before I can start entering my hours.

Using Node and Playwright, I have create a deep link bookmark that can do most of the heavy lifting:

I only have click on a desktop shortcut. This runs a bat file that in turn runs the Node application I have created using Playwright. The Node application then performs all the steps I previously had to perform myself every day, including the Microsoft login procedure; all I have to do is confirm the authentication in the MFA app on my phone.

Opening the timesheet application is not very much faster than before – even the Playwright robot has to go through the same motions. However, it is so much more convenient that I am almost enjoying entering my hours.

The next step I might take is to add short cut buttons into the timesheet application, for example to copy yesterday’s activities to today.

I have also used Playwright to write a script that creates a CSV file with all timesheet details over a specific period – for additional analysis (how much over time did I have?)

UI Turned API – Exposing IMDb as an API

With a little bit Node and using Playwright, we can put an API on top of almost any web application. Node can easily expose a REST API, handle HTTP requests and when processing a request force a browser session to go through the predefined steps in interacting with a web application – to query information and gather it from the DOM to create a response message or to enter information from the request message into a form and submit said form.

An example would be IMDb – the popular website for movie and series details. IMDb does not provide an official API. Yet sometimes – for examples for workshops and demos – it would be nice to have just such an API. The Movie details page on the IMDb website almost reads like an API response:


The fields on the web page easily map to fields in a structured JSON message.

Using Playwright, I have created a simple Node application that handles an HTTP request that contains the title of a movie; the application instructs the embedded browser to navigate to the IMDb website, enter the title of a movie, execute the search and then retrieves the pieces of information from the web page elements. A JSON response body is composed using these elements and is returned in the HTTP response to the API request.

The source for this simple example is on GitHub: https://github.com/lucasjellema/playwright-scenarios/tree/main/imdb

Personalized Web Application – Customizing DuckDuck Go

You may be familiar with the search engine DuckDuck Go. You use it to search the internet. And it respects your privacy. It has a straightforward home page.

Nothing wrong with this home page. However, as a simple demonstration of what customization of a web application through Playwright might look like, I have done a few things to this page:

• add an HTML element to make it feel as my own
• add various links with special functionality
• manipulate the search string (by adding the site of the AMIS Technology Blog as search context)
• perform a Vanity Search (search on my own name and only entries from the last 30 days)
• execute a search on the current search string in seven different search engines – open each search engine in its own tab

Enter the search string “playwright test” and press Multi Search:

I have created a simple .bat file that runs Node and my search.js application that in turns run Playwright in headful mode. A Windows shortcut on my desktop refers to the bat file; clicking the shortcut is enough to run my personalized edition of DuckDuckGo.

The code for this simple example is in GitHub: https://github.com/lucasjellema/playwright-scenarios/tree/main/search

Conclusion

Playwright is a pretty great tool – for many purposes, including of course its original objective of UI Test Automation. Playwright has seen rapid innovation and adoption over the past year. Last week, release 1,.7 was published, the latest of close to 30 releases in 2020. Many other frameworks and tools now provide integration with or support for Playwright. It seems a worthy successor to Puppeteer and probably Selenium, Cypress and other browser testing tools.

I have had some fun already with applying Playwright to other use cases than the primary one, and I am quite sure I will make more use of that. Deeplink bookmarks to quickly inspect the console of specific cloud resource or start / stop such as resource for example – until I have time to create a proper API based solution; perhaps I will even schedule the bookmark using AutoHotKey. And I am sure I will do some screenscraping and RPA like workflowing with Playwright.

Note that Playwright based applications that run in headless mode can easily run as serverless functions (that is: if they complete within the timeout period of such functions). Microsoft offers a Docker Container Image with Playwright resources that can be used as foundation for custom container images with our own specific Playwright scenarios.

Expect some more articles from me on Playwright. It feels like I have found myself a new toy to play with.

Resources

Playwright Home Page – https://playwright.dev/

My early Playwright trials and explorations – https://github.com/lucasjellema/playwright-scenarios