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.
Top comments (0)