Unit testing JavaScript with Karma. Playwright & Puppeteer

⬅ How to start with Karma

Karma allows run tests in different browsers. In the basic setup, we assume that a developer has the required browser installed on the local machine. Such assumption complicates the test process because it requires manual work from the developer who wants to start writing tests and introduces a difference in a test environment that we could not control. For example, we decided that our unit tests should be run on a specific version of Chrome. Now we should somehow spread this knowledge in our team. This is an inefficient and error-prone approach.

One of the goals of an experienced engineer to simplify the process of setup and running tests for less experienced teammates. To encourage and spread test culture in the team. Puppeteer and Playwright allow us to simplify, automate and control the browser setup process.

Puppeteer

Let’s start from Puppeteer

npm install puppeteer

The Puppeteer would install chromium for the target platform automatically

Downloading Chromium r818858 - 132.4 Mb [====================] 100% 0.0s

Now let’s add downloaded Chromium as the default browser for Karma

process.env.CHROME_BIN = require('puppeteer').executablePath();

Because our default Karma config has karma-chrome-launcher we can reuse it to star Puppeteer’s Chromium simple define CHROME_BIN environment variable in the karma.conf.js

Let’s run our test and make sure that they pass, and we have not broken anything

npx karma start
30 01 2021 18:02:19.602:INFO [karma-server]: Karma v6.0.3 server started at http://localhost:9876/
30 01 2021 18:02:19.604:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
30 01 2021 18:02:19.609:INFO [launcher]: Starting browser Chrome
30 01 2021 18:02:31.497:INFO [Chrome 88.0.4298.0 (Mac OS 11.0.0)]: Connected on socket -gzowZLOc2OrrmCUAAAB with id 15605462
Chrome 88.0.4298.0 (Mac OS 11.0.0): Executed 2 of 2 SUCCESS (0.011 secs / 0.003 secs)
TOTAL: 2 SUCCESS

Well. Now we can be sure that after run npm install a developer would have full-fledged test environment. We also can run Chrome without UI in headless mode by using ChromeHeadless as a default browser in karma.conf.js

browsers: ['ChromeHeadless'],

Now if you run npx karma start you would not see popped up Chrome window. This may be helpful if you run tests in watch mode to reduce visual noise.

In most cases, Puppeteer would be enough for unit tests. But what should we do if we want to run tests on Firefox or WebKit based browser like Safari? Here we can use Playwright

Playwright

Playwright beside Chrome automatically install Firefox and WebKit

npm install playwright
Downloading chromium v844399 - 98.5 Mb [====================] 100% 0.0s
chromium v844399 downloaded to /Caches/ms-playwright/chromium-844399
Downloading firefox v1225 - 73.9 Mb [====================] 100% 0.0s
firefox v1225 downloaded to /Caches/ms-playwright/firefox-1225
Downloading webkit v1423 - 51.3 Mb [====================] 100% 0.0s
webkit v1423 downloaded to /Caches/ms-playwright/webkit-1423

Let’s use Chrome installed by Playwright. What we need to do is just change CHROME_BIN in karma.conf.js

process.env.CHROME_BIN = require('playwright').chromium.executablePath();

It’s a good idea to rerun our tests to be sure that all works fine.

Setup for Firefox is not so different from Chrome. First we should install official karma-firefox-launcher plugin

npm install karma-firefox-launcher

update karma.conf.js by setting FIREFOX_BIN and changing browser on Firefox

process.env.FIREFOX_BIN = require('playwright').firefox.executablePath();
...
browsers: ['Firefox'],

run tests

npx karma start
30 01 2021 19:04:40.925:INFO [karma-server]: Karma v6.0.3 server started at http://localhost:9876/
30 01 2021 19:04:40.927:INFO [launcher]: Launching browsers Firefox with concurrency unlimited
30 01 2021 19:04:40.934:INFO [launcher]: Starting browser Firefox
30 01 2021 19:04:45.139:INFO [Firefox 85.0 (Mac OS 10.16)]: Connected on socket T1vGhzXoe8dhy_yxAAAB with id 60585180
Firefox 85.0 (Mac OS 10.16): Executed 2 of 2 SUCCESS (0.001 secs / 0.002 secs)
TOTAL: 2 SUCCESS

SUCCESS! 🎉

Now we can automatically install Chrome and Firefox for our tests without bothering a developer who want to write tests. Time to go and write some tests.