☕ Run Mocha tests using headless Google Chrome
mocha-chromerequires Node v8.0.0 or higher. Unfortunately the project won't be
directly supporting a lower version number at this time. However, old-node
users may choose to use the --old-and-busted flag, because your version is not
the new hotness - it's old and busted;
--old-and-busted Take pity upon users of old-node. This option will run moche-chrome
under Node < 8 using babel-register. Use at your own risk, and
without support.That will run the cli using babel-register, which inherently runs slower
due to the nature of babel-register. If you're attempting to use the api,
you'll have to mimic the .babelrc and babel-register setup in this repo.
mocha-chrome is a dev tool, which means you can use tools like
NVM and nodenv
to manage your installed versions, and temporarily switch to v8+ to run tests on
your machine. Most modern CI environments also support specifying the version of
Node to run.
To begin, you'll need to install mocha-chrome:
$ npm install mocha-chrome --save-devThen you'll need a local npm install of mocha:
$ npm install mocha --save-devTo run the tests, you'll need an HTML file with some basics:
<!doctype>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../../node_modules/mocha/mocha.css" />
<script src="../../node_modules/mocha/mocha.js"></script>
<script src="../../node_modules/chai/chai.js"></script>
</head>
<body>
<div id="mocha"></div>
<script>
expect = chai.expect;
// add tests here
mocha.run();
</script>
</body>
</html>You can then add your tests either through an external script file or
inline within a <script> tag. Running the tests is easy, either with the CLI
binary, or programmatically.
$ mocha-chrome --help
Usage
$ mocha-chrome <file.html> [options]
Options
--chrome-flags A JSON string representing an array of flags to pass to Chrome
--ignore-console Suppress console logging
--ignore-exceptions Suppress exceptions logging
--ignore-resource-errors Suppress resource error logging
--log-level Specify a log level; trace, debug, info, warn, error
--mocha A JSON string representing a config object to pass to Mocha
--no-colors Disable colors in Mocha's output
--old-and-busted Take pity upon users of old-node. This option will run moche-chrome
under Node < 8 using babel-register. Use at your own risk, and
without support.
--reporter Specify the Mocha reporter to use
--timeout Specify the test startup timeout to use
--version
Examples
$ mocha-chrome test.html --no-colors
$ mocha-chrome test.html --reporter dot
$ mocha-chrome test.html --mocha '{"ui":"tdd"}'mocha-chrome is technically an event emitter. Due to the asynchronous nature of
nearly every interaction with headless Chrome, a simple event bus is used to
handle actions from the browser. You have access to those events if running
mocha-chrome programatically.
Example usage can be found in both test.js and bin/mocha-chrome.
Fired to indicate that mocha-chrome should configure mocha.
Fired when all tests have ended.
stats : object - A Mocha stats object. eg:
{
suites: 1,
tests: 1,
passes: 1,
pending: 0,
failures: 0,
start: '2017-08-03T02:12:02.007Z',
end: '2017-08-03T02:12:02.017Z',
duration: 10
}Fired to indicate that the mocha script in the client has been loaded.
Fired when a resource fails to load.
data : object - An object containing information about the resource. eg:
{ url, method, reason }Fired when a resource fails to load.
tests : number - The number of tests being run.
Fired to indicate that mocha-chrome should inform mocha of the width of
the current console/terminal.
Reporters are limited to those which don't use process.stdout.write to manipulate
terminal output. eg. spec, xunit, etc. Examples of reporters which don't presently
produce expected output formatting include dot and nyan. The cause of this
limitation is the lack of a good means to pipe Mocha's built-in stdout.write
through the Chrome Devtools Protocol to mocha-chrome.
Third party reporters are not currently supported, but support is planned. Contribution on that effort is of course welcome.
Chrome has long-since disabled cookies for files loaded via the file:// protocol.
The once-available --enable-file-cookies has been removed and we're left with few options.
If you're in need of cookie support for your local-file test, you may use the following snippet,
which will shim document.cookie with very basic support:
Object.defineProperty(document, 'cookie', {
get: function () {
return this.value || '';
},
set: function (cookie) {
cookie = cookie || '';
const cutoff = cookie.indexOf(';');
const pair = cookie.substring(0, cutoff >= 0 ? cutoff : cookie.length);
const cookies = this.value ? this.value.split('; ') : [];
cookies.push(pair);
return this.value = cookies.join('; ');
}
});Please refer to the "Running it all on Travis CI" portion of the guide on Automated testing with Headless Chrome from Google. Though the article primarily addresses Karma, the setup for Travis CI is identical.
$ npm testYep, that's it.
We welcome your contributions! Please have a read of CONTRIBUTING.
I'd like to thank @nathanboktae for his work on mocha-phantomjs
and mocha-phantomjs-core;
two projects I've used extensively over the years, and from which the inspiration
for this module originates. Many of the nuances of working with mocha in a hosted
or connected browser environment were solved within mocha-phantomjs-core and I
am personally grateful.