feat(webdriverio): allow AxeBuilder to use different version of axe…

…-core (#333)

* feat(webdriverio): allow `AxeBuilder` to use different version of axe-core

* path is hard

* ignore fixtures

.eslintignore

@@ -1,5 +1,6 @@
 packages/cli/src/testutils/*
 packages/cli/src/**/**/*.test.ts
 packages/webdriverjs/src/test/fixtures/*
+packages/webdriverio/fixtures/*
 packages/puppeteer/test/fixtures/*
 **/dist/*

package.json

@@ -44,5 +44,8 @@
     "*.{json,css,md,html}": [
       "prettier --write"
     ]
+  },
+  "dependencies": {
+    "axe-test-fixtures": "github:dequelabs/axe-test-fixtures"
   }
 }

packages/webdriverio/fixtures/external

@@ -0,0 +1 @@
+../../../node_modules/axe-test-fixtures/fixtures/

packages/webdriverio/src/index.ts

@@ -1,5 +1,5 @@
 import type { RunOptions, AxeResults } from 'axe-core';
-import { source } from 'axe-core';
+import * as fs from 'fs';
 import * as assert from 'assert';
 import * as cssesc from 'cssesc';
 import type {
@@ -22,13 +22,15 @@ export default class AxeBuilder {
   private excludes: string[];
   private option: RunOptions;
   private disableFrameSelectors: string[];
-  constructor({ client }: Options) {
+  constructor({ client, axeSource }: Options) {
     assert(
       isWebdriverClient(client),
       'An instantiated WebdriverIO client greater than v5 is required'
     );
+    const sourceDir = require.resolve('axe-core');
+    const source = fs.readFileSync(sourceDir, 'utf-8');
     this.client = client;
-    this.axeSource = source;
+    this.axeSource = axeSource || source;
     this.includes = [];
     this.excludes = [];
     this.option = {};
@@ -240,13 +242,13 @@ export default class AxeBuilder {
    * @returns {String}
    */
 
-     private frameSelector(): string {
-      let selector = 'frame';
-      for (const disableFrameSelector of this.disableFrameSelectors) {
-        selector += `:not(${disableFrameSelector})`;
-      }
-      return selector;
+  private frameSelector(): string {
+    let selector = 'frame';
+    for (const disableFrameSelector of this.disableFrameSelectors) {
+      selector += `:not(${disableFrameSelector})`;
     }
+    return selector;
+  }
 
   /**
    * Set browsing context - when `null` sets top level page as context

packages/webdriverio/src/test.ts

@@ -63,7 +63,10 @@ describe('@axe-core/webdriverio', () => {
     let server: Server;
     let addr: string;
     let client: webdriverio.BrowserObject;
-
+    const axeSourcePath = path.resolve(
+      './fixtures/external/axe-core@legacy.js'
+    );
+    const axeSource = fs.readFileSync(axeSourcePath, 'utf-8');
     beforeEach(async () => {
       const app = express();
       let binaryPath;
@@ -109,6 +112,23 @@ describe('@axe-core/webdriverio', () => {
       });
 
       describe('analyze', () => {
+        describe('axeSource', () => {
+          it('returns results with different version of axeSource', async () => {
+            await client.url(`${addr}/index.html`);
+            const results = await new AxeBuilder({
+              client,
+              axeSource
+            }).analyze();
+
+            assert.isNotNull(results);
+            assert.strictEqual(results.testEngine.version, '4.0.3');
+            assert.isArray(results.violations);
+            assert.isArray(results.incomplete);
+            assert.isArray(results.passes);
+            assert.isArray(results.inapplicable);
+          });
+        });
+
         it('returns results', async () => {
           await client.url(`${addr}/index.html`);
           const results = await new AxeBuilder({ client }).analyze();

packages/webdriverio/src/types.ts

@@ -39,6 +39,7 @@ export type CallbackFunction = (
 
 export interface Options {
   client: BrowserObject;
+  axeSource?: string;
 }
 
 declare global {