Unit testing JavaScript with Karma. Playwright & Puppeteer
Tags: puppeteer, playwrights, javascript, karma
Published: 2021-03-27 23:13:17

---
title: Unit testing JavaScript with Karma. Playwright & Puppeteer
published: true
date: 2021-01-30 17:12:51 UTC
tags: puppeteer,playwrights,javascript,karma
canonical_url: 
---

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/](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/](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.