feat: Support aXe-core 3.0 Shadow DOM selectors (#49)

dequelabs · Feb 21, 2018 · 790b421 · 790b421
1 parent 44a9858
commit 790b421
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 4 deletions.
diff --git a/index.js b/index.js
@@ -98,7 +98,7 @@ axeTestUrls(urls, program, {
 				'  Violation of %j with %d occurrences!\n') +
 				'    %s. Correct invalid elements at:\n' +
 				(violation.nodes.map( node =>
-				'     - ' + node.target + '\n'
+				'     - ' + utils.selectorToString(node.target) + '\n'
 				).join('')) +
 				'    For details, see: %s',
 				violation.id,

diff --git a/lib/utils.js b/lib/utils.js
@@ -62,13 +62,18 @@ module.exports.getAxeSource = function getAxeSource(axePath) {
 	return fs.readFileSync(axePath, 'utf8')
 }
 
-
 module.exports.getAxeVersion = function getAxeVersion(source) {
 	const match = source.match(/\.version\s*=\s'([^']+)'/)
 	return (match ? match[1] : 'unknown version')
 }
 
-
 module.exports.splitList = function (val) {
 	return (val.split(/[,;]/)).map(str => str.trim());
-}
+}
+
+module.exports.selectorToString = function (selectors, separator) {
+	separator = separator || ' ';
+  return selectors
+    .reduce((prev, curr) => (prev.concat(curr)), [])
+    .join(separator);
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
   "devDependencies": {
     "chai": "^4.0.0",
     "mocha": "^3.4.2",
+    "node-static": "^0.7.10",
     "snyk": "^1.41.1"
   },
   "snyk": true

diff --git a/test/integrations.js b/test/integrations.js
@@ -0,0 +1,70 @@
+/* global mocha */
+'use strict';
+
+var assert = require('chai').assert
+
+var chromedriver = require('chromedriver')
+var chrome = require('selenium-webdriver/chrome')
+var http = require('http')
+var nodeStatic = require('node-static')
+var axeTestUrls = require('../lib/axe-test-urls')
+var {startDriver, stopDriver} = require('../lib/webdriver')
+
+describe('integrations', function () {
+  var program, urls, server;
+
+  before(function () {
+    // Start a server
+    var file = new nodeStatic.Server('.');
+    server = http.createServer(function (request, response) {
+      request.addListener('end', function () {
+        file.serve(request, response);
+      }).resume();
+    })
+    server.listen(8182);
+  })
+
+  after(function () {
+    server.close();
+  })
+
+  beforeEach(function () {
+    program = {
+      browser: 'chrome-headless'
+    }
+    startDriver(program)
+    urls = ['http://localhost:8182/test/testpage.html']
+  })
+
+  afterEach(function (done) {
+    stopDriver(program)
+
+    var service = chrome.getDefaultService()
+    if (service.isRunning()) {
+      service.stop().then(() => {
+        // An unfortunately hacky way to clean up
+        // the service. Stop will shut it down,
+        // but it doesn't reset the local state
+        service.address_ = null;
+        chrome.setDefaultService(null);
+        done()
+      })
+    } else {
+      done()
+    }
+  })
+
+  it('finds results in light and shadow DOM', function () {
+    var listResult
+    return axeTestUrls(urls, program, {
+      onTestComplete: function (results) {
+        listResult = results.violations.find(result => result.id === 'list')
+        assert.lengthOf(listResult.nodes, 2);
+        assert.deepEqual(listResult.nodes[0].target, ['#list'])
+        assert.deepEqual(listResult.nodes[1].target, [['#shadow-root', '#shadow-list']])
+      }
+    }).then(function () {
+      assert.isDefined(listResult)
+    })
+  })
+})
diff --git a/test/testpage.html b/test/testpage.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>List Item Test</title>
+</head>
+<body>
+  <main>
+    <h1>Page heading</h1>
+    <ul id="list">
+      <p>Item One</p>
+      <p>Item Two</p>
+    </ul>
+
+    <div id="shadow-root"></div>
+  </main>
+  <script>
+document.querySelector('#shadow-root')
+.attachShadow({ mode: 'open' })
+.innerHTML = 
+  '    <ul id="shadow-list">' +
+  '      <p>Item One</p>' +
+  '      <p>Item Two</p>' +
+  '    </ul>';
+  </script>
+</body>
+</html>