E2E Tests: Integrating Microsoft Playwright with mocha and chai

4 min readJan 31, 2020

Microsoft Playwright

Recently, Microsoft has announced a new framework that automates browser actions with nodeJS. The browsers supported by this library are: Chromium, WebKit, Firefox and Edge (which is based on chromium). It is worth mentioning that Playwright is not a Test Automation Framework itself but it can be integrated with test libraries (chai, mocha, jasmine, jest, cucumber) and become a Test Automation Framework.

A similar library that aims to do the same is puppeteer by google, but the main difference is that puppeteer only supports chrome, while playwright supports several different browsers.

Because it is a very recent project, Microsoft does not have a commercial website and a good documentation, all information is on its official github repository.

Navigating through the API is not very pleasant and it is not very easy to find functions we are looking for (part of this is because there are no many examples online)

Writing the first script

The first script in the Readme notes shows how to visit a web page and capture a screenshot.

Make sure you have node installed in your machine:

node -v

Let’s start a new node project in an empty directory and install playwright dependency

npm init (Press enter in every prompt or change anything if you prefer)
npm install --save playwright

After that, create a .js file called playwright_ex01.js or any other name of your choice and paste/type this source code:

Playwright script

Run script:

node ./playwright_ex01.js

The script goes to http://whatsmyuseragent.org and takes a screenshot 3 times (one time per browser: chromium, firefox and webkit)
It is worth mentioning that all browsers are included in playwright module, which is very convinient when running in docker or CI environments for example. However the library takes a long time to install and it takes too much space.

Test Automation

Now we have a good overview of playwright, let us move forward and try to use this library for QA Automation.

Playwright itself is not a QA Automation library, so it won’t make assertions neither test reports.

But we can integrate with other libraries and build our very own UI Automation Framework. I chose to integrate with 2 other npm libraries: mocha and chai because they are ones of most popular javascript testing libraries and easy to configure.

Mocha is basically the test runner layer. Usually we create a directory called test and create several files with extension .spec.js containing all the tests for each feature. For each file we organize the tests inside describe -> it. “Describe” keyword is only for grouping tests, and each “it” will be the test.

Chai.js is basically playing the assertion role, it is the most assertion library used in javascript and we can chose different ways to write (expect, should, assert) and has lots of assertions functions, as you can see here.

Now that we are familiar with each library of our test automation, we need to integrate them with each other. Make sure you have a package.json file similar to this (pay attention in scripts, directories, and dependencies sections):

Create a file called todo.spec.js inside test directory and paste the following code:

The code is very straight forward, it simply runs 2 tests:

Verify if To Do list is loaded empty
Adds a new To Do item in the list and verify if was added

Run with: npm test

After each test, I take a screenshot and save using the test name, and before each test a new chromium session is started. Here you can see a test output:

If you want to see the browser running the tests, change { headless: false } to { headless: true }

Final thoughts

It is very early to get to a final conclusion whether if it is worth to adopt microsoft playwright as a UI Test automation.

The library is not very mature, and hopefully Microsoft will work very hard to improve it.

In my opinion, if I was to develop a very simple web scraping script, playwright is a good tool for that, and I would chose it for that. But, considering real complex scenarios we have in our work as a QA Automation Engineer, I would definetely chose other frameworks instead of playwright because of simplicity, maturity and efficiency like webdriverIO or cypressIO

Source code

You can find the source project code here