feat: Use chrome-headless as default browser replacing PhantomJS

BREAKING CHANGE: PhantomJS is no longer maintained. We will be
replacing it with headless Chrome

Author: WilcoFiers

circle.yml

@@ -0,0 +1,13 @@
+machine:
+  node:
+    version: v6.1.0
+
+dependencies:
+  pre:
+  # Update Google Chrome.
+  - google-chrome --version
+  - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+  - sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb stable main" >> /etc/apt/sources.list.d/google.list'
+  - sudo apt-get update
+  - sudo apt-get --only-upgrade install google-chrome-stable
+  - google-chrome --version

index.js

@@ -20,22 +20,30 @@ program.version(version)
 .option('-b, --browser [browser-name]', 'Which browser to run (Webdriver required)')
 .option('-s, --save [filename]', 'Save the output as a JSON file. Filename is optional')
 .option('-d, --dir <path>', 'Output directory')
-.option('-a, --axe-source', 'Path to axe.js file')
+.option('-a, --axe-source <path>', 'Path to axe.js file')
 .option('-q, --exit', 'Exit with `1` failure code if any a11y tests fail')
 .option('--timeout <n>', 'Set how much time (second) axe has to run (default: 90)', 90)
 .option('--timer', 'Log the time it takes to run')
 .option('--show-errors', 'Display the full error stack')
 // TODO: Replace this with a reporter option, this required adding
 // a reporter option to axe-webdriverjs
 .option('--no-reporter', 'Turn the CLI reporter off')
+
 // .option('-c, --config <file>', 'Path to custom axe configuration')
 .parse(process.argv);
 
 program.browser = utils.parseBrowser(program.browser)
 program.axeSource = utils.getAxeSource(program.axeSource);
 
+if (!program.axeSource) {
+	console.log(error(
+		'Unable to find the axe-core source file.'
+	));
+	return 
+}
+
 let cliReporter;
-if (program['no-reporter']) {
+if (program.reporter === false) {
 	cliReporter = function () {};
 } else {
 	cliReporter = function (...args) {

lib/axe-test-urls.js

@@ -2,9 +2,7 @@
 
 const WebDriver = require('selenium-webdriver');
 const AxeBuilder = require('axe-webdriverjs');
-
-const startDriver = require('./webdriver').startDriver;
-const stopDriver = require('./webdriver').stopDriver;
+const { startDriver, stopDriver } = require('./webdriver');
 
 function testPages(urls, config, events) {
 	const driver = config.driver;
@@ -17,8 +15,8 @@ function testPages(urls, config, events) {
 
 	// End of the line, no more page left
 	if (urls.length === 0) {
-		stopDriver(config);
-		return Promise.resolve([]);
+		stopDriver(config)
+		return Promise.resolve([])
 	}
 
 	return new Promise((resolve, reject) => {
@@ -35,17 +33,17 @@ function testPages(urls, config, events) {
 
 		driver.get(currentUrl)
 		.then(function () {
-		  	// Wait for the page to be loaded
-		  	return driver.executeAsyncScript(function(callback) {
-	          var script = document.createElement('script');
-	          script.innerHTML = 'document.documentElement.classList.add("deque-axe-is-ready");';
-	          document.documentElement.appendChild(script);
-	          callback();
-	        });
-	    })
-	    .then(function () {
-	        return driver.wait(WebDriver.until.elementsLocated(WebDriver.By.css('.deque-axe-is-ready')));
-	    })
+			// Wait for the page to be loaded
+			return driver.executeAsyncScript(function (callback) {
+				var script = document.createElement('script');
+				script.innerHTML = 'document.documentElement.classList.add("deque-axe-is-ready");';
+				document.documentElement.appendChild(script);
+				callback();
+			});
+		})
+		.then(function () {
+			return driver.wait(WebDriver.until.elementsLocated(WebDriver.By.css('.deque-axe-is-ready')));
+		})
 		.then(() => {
 			if (config.timer) {
 				console.timeEnd('page load time');
@@ -74,7 +72,7 @@ function testPages(urls, config, events) {
 				console.time('axe-core execution time');
 			}
 
-	  	// Run axe
+			// Run axe
 			axe.analyze(function (results) {
 				if (config.timer) {
 					console.timeEnd('axe-core execution time');
@@ -89,7 +87,7 @@ function testPages(urls, config, events) {
 				.then(out => {
 					resolve([results].concat(out))
 				});
-	    });
+			});
 		}).catch((e) => {
 			driver.quit();
 			reject(e)

lib/utils.js

@@ -7,7 +7,7 @@ module.exports.parseUrl = function parseUrl(url) {
 
 module.exports.parseBrowser = function parseBrowser(browser) {
 	if (!browser) {
-		return 'phantomjs'
+		return 'chrome-headless'
 	}
 
 	const l = browser.length;
@@ -35,37 +35,37 @@ module.exports.parseBrowser = function parseBrowser(browser) {
 		case 'microsoftedge'.substr(0,l):
 			return 'MicrosoftEdge';
 
-		case 'phantomjs'.substr(0,l):
-			return 'phantomjs';
-
 		default: throw new Error('Unknown browser ' + browser)
 	}
 }
 
 module.exports.getAxeSource = function getAxeSource(axePath) {
 	const path = require('path')
 	const fs = require('fs')
+	// Abort if axePath should exist, and it isn't
+	if (axePath && !fs.existsSync(axePath)) {
+		return
+	// Look for axe in CWD
+	} else if (!axePath) {
+		axePath = path.join(process.cwd(), './axe.js')
+	}
 
-  axePath = path.join(process.cwd(), axePath || './axe.js');
-
-  // Look for axe in CWD
-  if (!fs.existsSync(axePath)) {
-	  axePath = path.join(process.cwd(), './axe.js');
+	if (!fs.existsSync(axePath)) {
+		// Look for axe in CDW ./node_modules
+		axePath = path.join(process.cwd(), './node_modules/axe-core/axe.js')
 	}
-  if (!fs.existsSync(axePath)) {
-    // Look for axe in CDW ./node_modules
-    axePath = path.join(process.cwd(), './node_modules/axe-core/axe.js')
-  }
-  if (!fs.existsSync(axePath)) {
-  	// if all else fails, use the locally installed axe
-  	axePath = path.join(__dirname, '../node_modules/axe-core/axe.js')
-  }
-  return fs.readFileSync(axePath, 'utf8');
+	if (!fs.existsSync(axePath)) {
+		// if all else fails, use the locally installed axe
+		axePath = path.join(__dirname, '../node_modules/axe-core/axe.js')
+	}
+
+	return fs.readFileSync(axePath, 'utf8')
 }
 
 
 module.exports.getAxeVersion = function getAxeVersion(source) {
-	return source.match(/\.version\s*=\s'([^']+)'/)[1]
+	const match = source.match(/\.version\s*=\s'([^']+)'/)
+	return (match ? match[1] : 'unknown version')
 }
 
 

lib/webdriver.js

@@ -1,44 +1,43 @@
-const WebDriverBuilder = require('selenium-webdriver').Builder;
-const phantomjs = require('phantomjs-prebuilt');
+const chromedriver = require('chromedriver')
+const { Builder, Capabilities } = require('selenium-webdriver')
+const chrome = require('selenium-webdriver/chrome')
 
 module.exports = {
 	startDriver: startDriver,
 	stopDriver: stopDriver,
 }
 
-function startDriver(config) {
-	const builder = new WebDriverBuilder().forBrowser(config.browser)
-	const scriptTimeout = config.timeout * 1000;
-
-	if (config.browser !== 'phantomjs') {
-		// Launch a browser
-		config.driver = builder.build();
-		config.driver.manage().timeouts().setScriptTimeout(scriptTimeout);
-
-		return Promise.resolve(config);
-
-	} else {
-		// Start phantomjs-prebuilt
-		return phantomjs.run('--webdriver=4444')
-		.then(phantom => {
-			// Save phantom, so we can close it when we are done
-			config.phantom = phantom;
-
-			// And connect selenium to our phantom server
-			config.driver = builder.usingServer('http://localhost:4444/wd/hub').build();
-			config.driver.manage().timeouts().setScriptTimeout(scriptTimeout);
-
-			return Promise.resolve(config);
-		})
-
-	}
+function startDriver (config) {
+  let builder
+	const scriptTimeout = (config.timeout || 20) * 1000.00
+
+  if (config.browser === 'chrome-headless') {
+    // Tell selenium use the driver in node_modules
+    const service = new chrome.ServiceBuilder(
+        chromedriver.path
+      ).build()
+    chrome.setDefaultService(service)
+
+    const chromeCapabilities = Capabilities.chrome();
+    chromeCapabilities.set('chromeOptions', {
+      'args': ['--headless']
+    })
+
+    builder = new Builder().forBrowser('chrome')
+      .withCapabilities(chromeCapabilities)
+  } else {
+    builder = new Builder().forBrowser(config.browser)
+  }
+
+  // Launch a browser
+  config.driver = builder.build()
+  config.builder = builder
+
+  return config.driver.manage()
+    .timeouts().setScriptTimeout(scriptTimeout)
+    .then(() => config)
 }
 
-function stopDriver(config) {
-	if (config.browser !== 'phantomjs') {
-		config.driver.quit();
-	}
-	if (config.phantom) {
-		config.phantom.kill();
-	}
+function stopDriver (config) {
+  config.driver.quit()
 }