Free tools Windows power users keep installed
One-click scans. No signup required.
Use Babel to transpile ES2015 syntax, run Mocha tests through Karma, and launch ChromeHeadless for browser-accurate execution. The reliable CI command is karma start --single-run --browsers ChromeHeadless karma.conf.js. This setup lets tests use modern JavaScript while still exercising a real Chrome environment rather than only Node.js.
What the setup does
Mocha supplies the test structure (describe and it), Chai supplies assertions, Karma serves and loads the test bundle, Babel converts ES2015 and later syntax for the browsers you target, and karma-chrome-launcher starts Chrome in headless mode. Chrome for Developers describes browser execution as an advantage over testing directly in Node because the tests run in the same environment used by site visitors.
The workflow has five parts:
- Install Babel and the Karma/Mocha/Chai packages.
- Add a Babel configuration with
@babel/preset-env. - Point Karma at source and test files and select
ChromeHeadless. - Write Mocha tests using ES2015 syntax.
- Run Karma in watch mode locally or with
--single-runin CI.
Prerequisites and project layout
Use a supported Node.js release for your project and verify the versions installed in the target CI image. You also need Chrome or Chromium available to the Karma launcher. The launcher documentation states that headless mode requires browser version 59 or newer. A typical project can look like this:
es2015-karma-demo/
src/
sum.js
test/
sum.spec.js
babel.config.json
karma.conf.js
package.jsonThe exact minimum Chrome version and package behavior can change, so check the Node, Chrome/Chromium, Karma, and launcher versions used by your project rather than assuming a tutorial’s 2017 defaults still apply.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitches#1 Best Overall
Install Babel, Karma, Mocha, and Chai
From the project directory, install the test dependencies:
npm i --save-dev @babel/core @babel/preset-env babel-loader karma karma-chrome-launcher karma-mocha karma-chai mocha chaikarma-chrome-launcher 3.2.0 is the package version recorded in the npm listing accessed on September 29, 2026; your lockfile may resolve a different compatible release. The essential packages are Babel core and preset, Karma, the Chrome launcher, the Karma adapters for Mocha and Chai, and Mocha and Chai themselves.
Configure Babel for ES2015 and later
Create babel.config.json at the repository root:
{
"presets": ["@babel/preset-env"]
}@babel/preset-env enables transforms for ES2015+ syntax. Babel’s preset does not itself decide which browser versions your application supports unless you provide targets; for a controlled test project, make the target policy explicit when you need consistent output across environments. Keep the configuration in version control so local and CI runs transpile the same way.
Configure Karma to load transpiled tests in ChromeHeadless
Create karma.conf.js:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai'],
files: [
'src/**/*.js',
'test/**/*.spec.js'
],
preprocessors: {
'src/**/*.js': ['babel'],
'test/**/*.spec.js': ['babel']
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['ChromeHeadless'],
singleRun: false,
concurrency: Infinity
});
};The frameworks array loads the Karma adapters. The file globs include both application and test files, while the Babel preprocessors transform each before the browser receives it. ChromeHeadless starts a visible-free browser; change singleRun to true in a CI-specific configuration or override it from the command line.
Recommended Free Tools
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
If your installation does not recognize the babel preprocessor, install the Karma Babel preprocessor used by your chosen setup and add it to devDependencies. Keep the preprocessor and Babel versions aligned with your lockfile; the core workflow remains the same.
Write an ES2015 Mocha test
For example, create src/sum.js:
export const sum = (a, b) => a + b;Create test/sum.spec.js:
import { expect } from 'chai';
import { sum } from '../src/sum.js';
describe('sum', () => {
it('adds two numbers', () => {
expect(sum(2, 3)).to.equal(5);
});
});Arrow functions are valid Mocha callbacks after Babel transpiles them. The browser executes the resulting code, so browser APIs, module behavior as bundled by your setup, and browser-specific timing are tested in a browser context rather than approximated by a Node-only runner.
Run locally and in continuous integration
Watch mode for development
Start Karma without closing the browser after the first run:
npx karma start karma.conf.jsWith autoWatch: true, Karma reruns when matching files change. This is useful while editing tests, but it leaves a browser process running and is not normally the right CI behavior.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Rank #3
Single-run mode for CI
Add a script to package.json:
{
"scripts": {
"test:browser": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
}Run it with:
npm run test:browser--single-run captures the browser, executes the suite once, reports failures, and exits. A nonzero exit status makes the CI job fail. This avoids hanging jobs and gives repeatable automation when combined with a committed lockfile and a pinned CI image.
Make Chrome available in CI
Use a system Chrome or Chromium
If Chrome is installed at a nonstandard path, set CHROME_BIN before starting Karma. The launcher supports ChromeHeadless and ChromiumHeadless as well as this environment variable:
CHROME_BIN=/usr/bin/google-chrome npm run test:browserUse the actual executable path in your image. Confirm it is executable by the CI user and that its version is at least 59 for headless mode.
Provision Chrome with Puppeteer
For containers without a system browser, install Puppeteer and set the executable path before Karma starts. A small launcher file such as karma-ci.js can do this:
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
process.env.CHROME_BIN = require('puppeteer').executablePath();
require('./node_modules/karma/bin/karma');Invoke that entry point with the same Karma arguments, or set CHROME_BIN in the CI step that launches Karma. SAP’s CI guidance also recommends the Karma Chrome launcher and Puppeteer for container scenarios. Puppeteer can make browser provisioning reproducible, but it increases install time and cache size; a maintained system-Chrome image can be faster when your organization already controls it.
Add a custom launcher when flags are required
Some restricted containers need extra flags or a separate debugging port. Extend the built-in launcher:
customLaunchers: {
ChromeHeadlessCI: {
base: 'ChromeHeadless',
flags: [
'--no-sandbox',
'--disable-dev-shm-usage',
'--remote-debugging-port=9223'
]
}
},
browsers: ['ChromeHeadlessCI']Only add flags required by your runtime and security policy. --no-sandbox reduces isolation and should not be used casually; prefer a container configuration that permits Chrome’s sandbox whenever possible. A custom launcher can also select a different remote-debugging port to avoid collisions when several jobs share a host.
Debug failures systematically
“No captured browser” or Chrome exits immediately
- Check that Chrome or Chromium is installed and executable by the CI account.
- Print
$CHROME_BIN --versionand confirm a headless-capable version (59 or newer). - Set
CHROME_BINto the real path, not a directory or symlink that the job cannot access. - In containers, try
--disable-dev-shm-usagewhen the shared-memory mount is too small, and use--no-sandboxonly when your isolation design explicitly requires it.
“Cannot find module @babel/preset-env” or ES2015 syntax errors
- Run
npm ls @babel/core @babel/preset-envand install missing packages. - Verify that
babel.config.jsonis at the directory from which Karma resolves the project. - Ensure both source and test globs have a Babel preprocessor.
- Delete and reinstall dependencies from the lockfile if local and CI trees differ.
Tests are not discovered
- Check that the test filename matches the configured glob, such as
test/**/*.spec.js. - Use Karma’s informational log level and inspect the files it serves.
- Confirm the test adapter names are exactly
mochaandchaiand that both adapters are installed.
The job hangs after tests finish
Use --single-run and make sure no CI script starts Karma in watch mode. A test that leaves timers, sockets, or browser resources open can also prevent completion; isolate that test and close the resource in an afterEach or after hook.
Results differ between a laptop and CI
Compare Node, Karma, launcher, Chrome/Chromium, and Babel versions. Pin dependencies with a lockfile, use a known browser image or Puppeteer’s downloaded executable, and avoid relying on local environment variables. If parallel jobs share a machine, assign distinct custom remote-debugging ports.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Choose a reproducible execution strategy
| Concern | Local watch | CI single-run |
|---|---|---|
| Command | npx karma start karma.conf.js |
karma start --single-run --browsers ChromeHeadless karma.conf.js |
| Browser lifetime | Persistent for reruns | Captured, tested once, then closed |
| Provisioning | System Chrome is convenient | System Chrome or Puppeteer for repeatability |
| Primary goal | Fast feedback while editing | Deterministic pass/fail exit status |
Babel coverage, browser provisioning, execution mode, CI reproducibility, and debugging flags are the meaningful comparison axes. A project that only tests transpiled output in Node may miss browser behavior; a project that launches an unpinned browser in CI may trade convenience for drift.
Or skip the browser setup
If your immediate task is obtaining a clean screenshot of a page rather than executing its test suite, ScreenshotNeo provides a one-request API and an MCP server for AI agents. It accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers.
Use the API documentation at https://screenshotneo.com/docs/ for all options, including full-page and selector captures, dark mode, device and viewport settings, retina scale, PDF output, custom CSS or JavaScript, clicks, waits, blocked resources, headers, cookies, user agents, geolocation, caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, and usage reporting.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo includes take_screenshot, get_page_info, and capture_pdf tools through MCP for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots each month with no card; paid plans start at $5 for 3,000 shots. Sign up free for ScreenshotNeo to try it without a card.
Frequently Asked Questions
Can I use Chromium instead of Google Chrome?
Yes. The Karma launcher provides a ChromiumHeadless launcher; set the appropriate executable with CHROME_BIN when it is not on the default path.
Should Babel transform tests as well as application code?
Yes. Include both source and test globs in Karma’s Babel preprocessors so imports, arrow functions, and other ES2015+ syntax are converted before Chrome loads them.
Why use Headless Chrome instead of Node-only Mocha?
Headless Chrome executes the suite in a browser environment, exposing browser APIs and browser-specific behavior that a Node process does not reproduce.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
