fix: only set allowedOrigin when needed (#566)

Co-authored-by: Steven Lambert <2433219+straker@users.noreply.github.com>

.circleci/config.yml

@@ -174,7 +174,8 @@ jobs:
     steps:
       - checkout
       - restore_dependency_cache
-      - run: cd packages/webdriverio && npx browser-driver-manager@1.0.4 install chrome chromedriver --verbose
+      - browser-tools/install-chrome
+      - browser-tools/install-chromedriver
       - run: npm run coverage --prefix=packages/webdriverio
 
   reporter-earl:

packages/playwright/src/index.ts

@@ -183,7 +183,8 @@ export default class AxeBuilder {
 
   private async inject(frames: Frame[]): Promise<void> {
     for (const iframe of frames) {
-      await iframe.evaluate(this.script());
+      await iframe.evaluate(await this.script());
+      await iframe.evaluate(await this.axeConfigure());
     }
   }
 
@@ -193,13 +194,7 @@ export default class AxeBuilder {
    */
 
   private script(): string {
-    return `
-      ${this.source}
-      axe.configure({
-        ${this.legacyMode ? '' : 'allowedOrigins: ["<unsafe_all_origins>"],'}
-        branding: { application: 'playwright' }
-      })
-    `;
+    return this.source;
   }
 
   private async runLegacy(context: SerialContextObject): Promise<AxeResults> {
@@ -285,7 +280,7 @@ export default class AxeBuilder {
     );
 
     blankPage.evaluate(this.script());
-
+    blankPage.evaluate(await this.axeConfigure());
     return await blankPage
       .evaluate(axeFinishRun, {
         partialResults,
@@ -295,4 +290,21 @@ export default class AxeBuilder {
         await blankPage.close();
       });
   }
+
+  private async axeConfigure(): Promise<string> {
+    const hasRunPartial = await this.page.evaluate<boolean>(
+      'typeof window.axe?.runPartial === "function"'
+    );
+
+    return `
+    ;axe.configure({
+      ${
+        !this.legacyMode && !hasRunPartial
+          ? 'allowedOrigins: ["<unsafe_all_origins>"],'
+          : 'allowedOrigins: ["<same_origin>"],'
+      }
+      branding: { application: 'playwright' }
+    })
+    `;
+  }
 }

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

@@ -63,7 +63,7 @@ describe('@axe-core/playwright', () => {
       }).analyze();
 
       assert.equal(res?.status(), 200);
-      assert.strictEqual(results.testEngine.version, '4.0.3');
+      assert.strictEqual(results.testEngine.version, '4.2.3');
       assert.isNotNull(results);
       assert.isArray(results.violations);
       assert.isArray(results.incomplete);
@@ -395,6 +395,7 @@ describe('@axe-core/playwright', () => {
         ['#shadow-root', '#shadow-frame'],
         'input'
       ]);
+
       assert.deepEqual(nodes[2].target, ['#slotted-frame', 'input']);
     });
 
@@ -707,7 +708,7 @@ describe('@axe-core/playwright', () => {
         }).analyze();
 
         assert.equal(res?.status(), 200);
-        assert.strictEqual(results.testEngine.version, '4.0.3');
+        assert.strictEqual(results.testEngine.version, '4.2.3');
         assert.isNotNull(results);
         assert.isArray(results.violations);
         assert.isArray(results.incomplete);
@@ -817,12 +818,55 @@ describe('@axe-core/playwright', () => {
 
         assert.equal(res?.status(), 200);
         assert.deepEqual(nodes[0].target, ['#light-frame', 'input']);
-        assert.deepEqual(nodes[1].target, ['#slotted-frame', 'input']);
-        assert.deepEqual(nodes[2].target, [
+        assert.deepEqual(nodes[1].target, [
           ['#shadow-root', '#shadow-frame'],
           'input'
         ]);
+        assert.deepEqual(nodes[2].target, ['#slotted-frame', 'input']);
       });
     });
   });
+
+  describe('allowedOrigins', () => {
+    const getAllowedOrigins = async (): Promise<string[]> => {
+      return await page.evaluate('axe._audit.allowedOrigins');
+    };
+
+    it('should not set when running runPartial and not legacy mode', async () => {
+      await page.goto(`${addr}/index.html`);
+      await new AxeBuilder({ page }).analyze();
+      const allowedOrigins = await getAllowedOrigins();
+      assert.deepEqual(allowedOrigins, [addr]);
+      assert.lengthOf(allowedOrigins, 1);
+    });
+
+    it('should not set when running runPartial and legacy mode', async () => {
+      await page.goto(`${addr}/index.html`);
+      await new AxeBuilder({ page }).setLegacyMode(true).analyze();
+      const allowedOrigins = await getAllowedOrigins();
+      assert.deepEqual(allowedOrigins, [addr]);
+      assert.lengthOf(allowedOrigins, 1);
+    });
+
+    it('should not set when running legacy source and legacy mode', async () => {
+      await page.goto(`${addr}/index.html`);
+      await new AxeBuilder({ page, axeSource: axeLegacySource })
+        .setLegacyMode(true)
+        .analyze();
+      const allowedOrigins = await getAllowedOrigins();
+      assert.deepEqual(allowedOrigins, [addr]);
+      assert.lengthOf(allowedOrigins, 1);
+    });
+
+    it('should set when running legacy source and not legacy mode', async () => {
+      await page.goto(`${addr}/index.html`);
+      await new AxeBuilder({
+        page,
+        axeSource: axeLegacySource
+      }).analyze();
+      const allowedOrigins = await getAllowedOrigins();
+      assert.deepEqual(allowedOrigins, ['*']);
+      assert.lengthOf(allowedOrigins, 1);
+    });
+  });
 });

packages/puppeteer/test/axePuppeteer.test.ts

@@ -907,7 +907,7 @@ describe('AxePuppeteer', function () {
       assert.equal(res?.status(), 200);
       assert.equal(results.violations[0].id, 'label');
       assert.lengthOf(results.violations[0].nodes, 4);
-      assert.equal(results.testEngine.version, '4.0.3');
+      assert.equal(results.testEngine.version, '4.2.3');
     });
 
     it('throws if the top level errors', done => {
@@ -953,4 +953,44 @@ describe('AxePuppeteer', function () {
       assert.isUndefined(frameTested);
     });
   });
+
+  describe('allowedOrigins', () => {
+    const getAllowedOrigins = async (): Promise<string[]> => {
+      return (await page.evaluate(
+        'axe._audit.allowedOrigins'
+      )) as unknown as string[];
+    };
+
+    it('should not set when running runPartial and not legacy mode', async () => {
+      await page.goto(`${addr}/index.html`);
+      await new AxePuppeteer(page).analyze();
+      const allowedOrigins = await getAllowedOrigins();
+      assert.deepEqual(allowedOrigins, [addr]);
+      assert.lengthOf(allowedOrigins, 1);
+    });
+
+    it('should not set when running runPartial and legacy mode', async () => {
+      await page.goto(`${addr}/index.html`);
+      await new AxePuppeteer(page).setLegacyMode(true).analyze();
+      const allowedOrigins = await getAllowedOrigins();
+      assert.deepEqual(allowedOrigins, [addr]);
+    });
+
+    it('should not set when running legacy source and legacy mode', async () => {
+      await page.goto(`${addr}/index.html`);
+      await new AxePuppeteer(page, axeSource + axeForceLegacy)
+        .setLegacyMode(true)
+        .analyze();
+      const allowedOrigins = await getAllowedOrigins();
+      assert.deepEqual(allowedOrigins, [addr]);
+    });
+
+    it('should set when running legacy source and not legacy mode', async () => {
+      await page.goto(`${addr}/index.html`);
+      await new AxePuppeteer(page, axeSource + axeForceLegacy).analyze();
+      const allowedOrigins = await getAllowedOrigins();
+      assert.deepEqual(allowedOrigins, ['*']);
+      assert.lengthOf(allowedOrigins, 1);
+    });
+  });
 });