DEV Community

Maksim
Maksim

Posted on • Originally published at maksimrv.Medium on

Unit testing JavaScript with Karma. Playwright & Puppeteer

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
Enter fullscreen mode Exit fullscreen mode

The Puppeteer would install chromium for the target platform automatically

Downloading Chromium r818858 - 132.4 Mb [====================] 100% 0.0s
Enter fullscreen mode Exit fullscreen mode

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

process.env.CHROME_BIN = require('puppeteer').executablePath();
Enter fullscreen mode Exit fullscreen mode

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/](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
Enter fullscreen mode Exit fullscreen mode

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'],
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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

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/](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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)