fix(playwright): allow include/exclude chaining when given a string b…

…y the user (#391)
dequelabs · Oct 29, 2021 · 4b8ab26 · 4b8ab26
1 parent 6e16139
commit 4b8ab26
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 6 deletions.
diff --git a/packages/playwright/src/index.ts b/packages/playwright/src/index.ts
@@ -19,8 +19,8 @@ import AxePartialRunner from './AxePartialRunner';
 
 export default class AxeBuilder {
   private page: Page;
-  private includes: string[];
-  private excludes: string[];
+  private includes: string[][];
+  private excludes: string[][];
   private option: RunOptions;
   private source: string;
   private legacyMode = false;
@@ -42,7 +42,8 @@ export default class AxeBuilder {
    * @returns this
    */
 
-  public include(selector: string): this {
+  public include(selector: string | string[]): this {
+    selector = Array.isArray(selector) ? selector : [selector];
     this.includes.push(selector);
     return this;
   }
@@ -54,7 +55,8 @@ export default class AxeBuilder {
    * @returns this
    */
 
-  public exclude(selector: string): this {
+  public exclude(selector: string | string[]): this {
+    selector = Array.isArray(selector) ? selector : [selector];
     this.excludes.push(selector);
     return this;
   }

diff --git a/packages/playwright/src/utils.ts b/packages/playwright/src/utils.ts
@@ -9,8 +9,8 @@ import type { AnalyzePageParams, AnalyzePageResponse } from './types';
  */
 
 export const normalizeContext = (
-  includes: string[],
-  excludes: string[]
+  includes: string[][],
+  excludes: string[][]
 ): ContextObject => {
   const base: ContextObject = {
     exclude: []

diff --git a/packages/playwright/tests/axe-playwright.spec.ts b/packages/playwright/tests/axe-playwright.spec.ts
@@ -413,6 +413,95 @@ describe('@axe-core/playwright', () => {
 
       assert.notInclude(flattenTarget, '.exclude');
     });
+
+    it('with chaining includes', async () => {
+      await page.goto(`${addr}/context.html`);
+
+      const results = await new AxeBuilder({ page })
+        .include('.include')
+        .include('.include2')
+        .analyze();
+      const flattenTarget = flatPassesTargets(results);
+
+      assert.strictEqual(flattenTarget[0], '.include');
+      assert.strictEqual(flattenTarget[1], '.include2');
+      assert.notInclude(flattenTarget, '.exclude');
+      assert.notInclude(flattenTarget, '.exclude2');
+    });
+
+    it('with chaining excludes', async () => {
+      await page.goto(`${addr}/context.html`);
+      const results = await new AxeBuilder({ page })
+        .exclude('.exclude')
+        .exclude('.exclude2')
+        .analyze();
+      const flattenTarget = flatPassesTargets(results);
+
+      assert.notInclude(flattenTarget, '.exclude');
+      assert.notInclude(flattenTarget, '.exclude2');
+    });
+
+    it('with chaining includes and excludes', async () => {
+      await page.goto(`${addr}/context.html`);
+      const results = await new AxeBuilder({ page })
+        .include('.include')
+        .include('.include2')
+        .exclude('.exclude')
+        .exclude('.exclude2')
+        .analyze();
+      const flattenTarget = flatPassesTargets(results);
+
+      assert.strictEqual(flattenTarget[0], '.include');
+      assert.strictEqual(flattenTarget[1], '.include2');
+      assert.notInclude(flattenTarget, '.exclude');
+      assert.notInclude(flattenTarget, '.exclude2');
+    });
+
+    it('with include using an array of strings', async () => {
+      await page.goto(`${addr}/context.html`);
+      const expected = ['.selector-one', '.selector-two', '.selector-three'];
+
+      const axeSource = `
+      window.axe = {
+        configure(){},
+          run({ include }){
+            return Promise.resolve({ include })
+          }
+      }
+    `;
+      const results = new AxeBuilder({ page, axeSource: axeSource }).include([
+        '.selector-one',
+        '.selector-two',
+        '.selector-three'
+      ]);
+
+      const { include: actual } = (await results.analyze()) as any;
+
+      assert.deepEqual(actual[0], expected);
+    });
+
+    it('with exclude using an array of strings', async () => {
+      await page.goto(`${addr}/context.html`);
+      const expected = ['.selector-one', '.selector-two', '.selector-three'];
+
+      const axeSource = `
+      window.axe = {
+        configure(){},
+          run({ exclude }){
+            return Promise.resolve({ exclude })
+          }
+      }
+    `;
+      const results = new AxeBuilder({ page, axeSource: axeSource }).exclude([
+        '.selector-one',
+        '.selector-two',
+        '.selector-three'
+      ]);
+
+      const { exclude: actual } = (await results.analyze()) as any;
+
+      assert.deepEqual(actual[0], expected);
+    });
   });
 
   describe('axe.finishRun errors', () => {

diff --git a/packages/playwright/tests/fixtures/context.html b/packages/playwright/tests/fixtures/context.html
@@ -6,6 +6,8 @@
   <body>
     <h1>Context Test</h1>
     <div class="include">include me</div>
+    <div class="include2">include me</div>
     <div class="exclude">exclude me</div>
+    <div class="exclude2">exclude me</div>
   </body>
 </html>