fix(webdriverJS): include/exclude chaining and iframe selectors (#404)

packages/webdriverjs/src/index.ts

@@ -1,7 +1,12 @@
 import { WebDriver } from 'selenium-webdriver';
 import { RunOptions, Spec, AxeResults, ContextObject } from 'axe-core';
 import { source } from 'axe-core';
-import { CallbackFunction, BuilderOptions, PartialResults } from './types';
+import {
+  CallbackFunction,
+  BuilderOptions,
+  PartialResults,
+  Selector
+} from './types';
 import { normalizeContext } from './utils/index';
 import AxeInjector from './axe-injector';
 import {
@@ -16,8 +21,8 @@ import * as assert from 'assert';
 class AxeBuilder {
   private driver: WebDriver;
   private axeSource: string;
-  private includes: string[];
-  private excludes: string[];
+  private includes: Selector[];
+  private excludes: Selector[];
   private option: RunOptions;
   private config: Spec | null;
   private builderOptions: BuilderOptions;
@@ -41,7 +46,8 @@ class AxeBuilder {
    * Selector to include in analysis.
    * This may be called any number of times.
    */
-  public include(selector: string): this {
+  public include(selector: Selector): this {
+    selector = Array.isArray(selector) ? selector : [selector];
     this.includes.push(selector);
     return this;
   }
@@ -50,7 +56,8 @@ class AxeBuilder {
    * Selector to exclude in analysis.
    * This may be called any number of times.
    */
-  public exclude(selector: string): this {
+  public exclude(selector: Selector): this {
+    selector = Array.isArray(selector) ? selector : [selector];
     this.excludes.push(selector);
     return this;
   }

packages/webdriverjs/src/types.ts

@@ -1,5 +1,5 @@
 import type { WebDriver } from 'selenium-webdriver';
-import type { Spec, AxeResults } from 'axe-core';
+import type { Spec, AxeResults, BaseSelector } from 'axe-core';
 import * as axe from 'axe-core';
 
 export interface Options {
@@ -25,3 +25,5 @@ export type CallbackFunction = (
 export type InjectCallback = (err?: Error) => void;
 
 export type PartialResults = Parameters<typeof axe.finishRun>[0];
+
+export type Selector = BaseSelector | BaseSelector[];

packages/webdriverjs/src/utils/index.ts

@@ -1,23 +1,21 @@
 import type { ContextObject } from 'axe-core';
+import { Selector } from '../types';
 
 /**
  * Get running context
  */
 export const normalizeContext = (
-  include: string[],
-  exclude: string[]
+  include: Selector[],
+  exclude: Selector[]
 ): ContextObject => {
-  if (!exclude.length) {
-    if (!include.length) {
-      return { exclude: [] };
-    }
-    return { include };
+  const base: ContextObject = {
+    exclude: []
+  };
+  if (exclude.length && Array.isArray(base.exclude)) {
+    base.exclude.push(...exclude);
   }
-  if (!include.length) {
-    return { exclude };
+  if (include.length) {
+    base.include = include;
   }
-  return {
-    include,
-    exclude
-  };
+  return base;
 };

packages/webdriverjs/tests/axe-webdriverjs.spec.ts

@@ -1,5 +1,5 @@
 import 'mocha';
-import { Spec } from 'axe-core';
+import { AxeResults, Spec } from 'axe-core';
 import { WebDriver } from 'selenium-webdriver';
 import * as express from 'express';
 import * as chromedriver from 'chromedriver';
@@ -404,48 +404,101 @@ describe('@axe-core/webdriverjs', () => {
   });
 
   describe('include/exclude', () => {
+    const flatPassesTargets = (results: AxeResults): string[] => {
+      return results.passes
+        .reduce((acc, pass) => {
+          return acc.concat(pass.nodes as any);
+        }, [])
+        .reduce((acc, node: any) => {
+          return acc.concat(node.target);
+        }, []);
+    };
     it('with include and exclude', async () => {
-      let error: Error | null = null;
       await driver.get(`${addr}/context.html`);
       const builder = new AxeBuilder(driver)
         .include('.include')
         .exclude('.exclude');
+      const results = await builder.analyze();
 
-      try {
-        await builder.analyze();
-      } catch (e) {
-        error = e as Error;
-      }
-
-      assert.strictEqual(error, null);
+      assert.isTrue(flatPassesTargets(results).includes('.include'));
+      assert.isFalse(flatPassesTargets(results).includes('.exclude'));
     });
 
     it('with only include', async () => {
-      let error: Error | null = null;
       await driver.get(`${addr}/context.html`);
       const builder = new AxeBuilder(driver).include('.include');
+      const results = await builder.analyze();
 
-      try {
-        await builder.analyze();
-      } catch (e) {
-        error = e as Error;
-      }
-
-      assert.strictEqual(error, null);
+      assert.isTrue(flatPassesTargets(results).includes('.include'));
     });
 
     it('with only exclude', async () => {
-      let error: Error | null = null;
       await driver.get(`${addr}/context.html`);
       const builder = new AxeBuilder(driver).exclude('.exclude');
+      const results = await builder.analyze();
 
-      try {
-        await builder.analyze();
-      } catch (e) {
-        error = e as Error;
-      }
+      assert.isFalse(flatPassesTargets(results).includes('.exclude'));
+    });
+
+    it('with chaining only include', async () => {
+      await driver.get(`${addr}/context.html`);
+      const builder = new AxeBuilder(driver)
+        .include('.include')
+        .include('.include2');
+      const results = await builder.analyze();
+
+      assert.isTrue(flatPassesTargets(results).includes('.include'));
+      assert.isTrue(flatPassesTargets(results).includes('.include2'));
+    });
+
+    it('with chaining only exclude', async () => {
+      await driver.get(`${addr}/context.html`);
+      const builder = new AxeBuilder(driver)
+        .exclude('.exclude')
+        .exclude('.exclude2');
+      const results = await builder.analyze();
+
+      assert.isFalse(flatPassesTargets(results).includes('.exclude'));
+      assert.isFalse(flatPassesTargets(results).includes('.exclude2'));
+    });
+
+    it('with chaining include and exclude', async () => {
+      await driver.get(`${addr}/context.html`);
+      const builder = new AxeBuilder(driver)
+        .include('.include')
+        .include('.include2')
+        .exclude('.exclude')
+        .exclude('.exclude2');
+      const results = await builder.analyze();
+
+      assert.isTrue(flatPassesTargets(results).includes('.include'));
+      assert.isTrue(flatPassesTargets(results).includes('.include2'));
+      assert.isFalse(flatPassesTargets(results).includes('.exclude'));
+      assert.isFalse(flatPassesTargets(results).includes('.exclude2'));
+    });
+
+    it('with include and exclude iframe selectors with no violations', async () => {
+      await driver.get(`${addr}/context.html`);
+      const builder = new AxeBuilder(driver)
+        .include(['#ifr-one', 'html'])
+        .exclude(['#ifr-one', 'main'])
+        .exclude(['#ifr-one', 'img']);
+
+      const results = await builder.analyze();
+
+      assert.lengthOf(results.violations, 0);
+    });
+
+    it('with include and exclude iframe selectors with violations', async () => {
+      await driver.get(`${addr}/context.html`);
+      const builder = new AxeBuilder(driver)
+        .include(['#ifr-one', 'html'])
+        .exclude(['#ifr-one', 'main']);
+      const results = await builder.analyze();
 
-      assert.strictEqual(error, null);
+      assert.lengthOf(results.violations, 2);
+      assert.strictEqual(results.violations[0].id, 'image-alt');
+      assert.strictEqual(results.violations[1].id, 'region');
     });
   });
 

packages/webdriverjs/tests/fixtures/context.html

@@ -6,6 +6,10 @@
   <body>
     <h1>Context Test</h1>
     <div class="include">include me</div>
+    <div class="include2">include me two</div>
     <div class="exclude">exclude me</div>
+    <div class="exclude2">exclude me two</div>
+
+    <iframe src="iframe-one.html" id="ifr-one"></iframe>
   </body>
 </html>

packages/webdriverjs/tests/fixtures/iframe-one.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>iframe one</title>
+  </head>
+  <body>
+    <main>
+      <h1>iframe context test</h1>
+      <input />
+    </main>
+    <!-- to produce 1 violations -->
+    <img />
+  </body>
+</html>