fix: proper imports in esm context (#718)

packages/puppeteer/esmTest.mjs

@@ -1,7 +1,34 @@
 import defaultExport, { AxePuppeteer } from './dist/index.mjs';
 import assert from 'assert';
+import puppeteer from 'puppeteer';
+import { fileURLToPath, pathToFileURL } from 'url';
+import { join } from 'path';
 
 const exportIsFunction = typeof(defaultExport) === 'function';
 const exportIsSame = defaultExport === AxePuppeteer;
 assert(exportIsFunction, 'export is not a function');
 assert(exportIsSame, 'default and named export is not the same');
+
+
+const options = {};
+
+if (process.env.CI) {
+  options.args = [];
+  options.args.push('--no-sandbox', '--disable-setuid-sandbox');
+  options.executablePath = '/usr/bin/google-chrome-stable';
+}
+
+async function integrationTest() {
+  let path = fileURLToPath(new URL('.', import.meta.url));
+  path = join(path, './node_modules/axe-test-fixtures/fixtures/index.html');
+
+  const browser = await puppeteer.launch(options);
+  const page = await browser.newPage();
+  await page.setBypassCSP(true);
+  await page.goto(pathToFileURL(path));
+  const results = await new AxePuppeteer(page).analyze();
+  assert(results.violations.length > 0, 'could not find violations');
+  await page.close();
+  await browser.close();
+}
+integrationTest();

packages/puppeteer/package.json

@@ -40,6 +40,7 @@
     "@types/test-listen": "^1.1.0",
     "axe-test-fixtures": "github:dequelabs/axe-test-fixtures#v1",
     "chai": "^4.3.6",
+    "cross-dirname": "^0.1.0",
     "express": "^4.18.2",
     "mocha": "^10.0.0",
     "nyc": "^15.1.0",

packages/puppeteer/src/legacy.ts

@@ -1,5 +1,7 @@
 import * as fs from 'fs';
 import { Frame } from 'puppeteer';
+import { getFilename } from 'cross-dirname';
+import { pathToFileURL } from 'url';
 
 interface IInjectAxeArgs {
   source?: string | Function;
@@ -52,7 +54,19 @@ export async function injectJS(
 }
 
 async function injectJSModule(frame: Frame): Promise<void> {
-  const source = fs.readFileSync(require.resolve('axe-core'), 'utf8');
+  let axeCorePath = '';
+  if (typeof require === 'function' && typeof require.resolve === 'function') {
+    axeCorePath = require.resolve('axe-core');
+  } else {
+    const { createRequire } = (await import('node:module')) as any;
+    // `getFilename` is needed because esm's `import.meta.url` is illegal syntax in cjs
+    const filename = pathToFileURL(getFilename()).toString();
+
+    const require = createRequire(filename);
+    axeCorePath = require.resolve('axe-core');
+  }
+
+  const source = fs.readFileSync(axeCorePath, 'utf8');
   await injectJSSource(frame, source);
 }
 

packages/puppeteer/src/utils.ts

@@ -2,6 +2,8 @@ import * as fs from 'fs';
 import * as Axe from 'axe-core';
 import { Frame } from 'puppeteer';
 import { axeConfigure, axeShadowSelect } from './browser';
+import { getFilename } from 'cross-dirname';
+import { pathToFileURL } from 'url';
 import { pageIsLoaded } from './browser';
 
 export async function frameSourceInject(
@@ -11,8 +13,22 @@ export async function frameSourceInject(
 ): Promise<void> {
   await assertFrameReady(frame);
   if (!source) {
-    const pathFile = require.resolve('axe-core');
-    source = fs.readFileSync(pathFile, 'utf8');
+    let axeCorePath = '';
+    if (
+      typeof require === 'function' &&
+      typeof require.resolve === 'function'
+    ) {
+      axeCorePath = require.resolve('axe-core');
+    } else {
+      const { createRequire } = (await import('node:module')) as any;
+      // `getFilename` is needed because esm's `import.meta.url` is illegal syntax in cjs
+      const filename = pathToFileURL(getFilename()).toString();
+
+      const require = createRequire(filename);
+      axeCorePath = require.resolve('axe-core');
+    }
+
+    source = fs.readFileSync(axeCorePath, 'utf8');
   }
   await frame.evaluate(source);
   await frame.evaluate(axeConfigure, config as Axe.Spec);

packages/webdriverio/esmTest.mjs

@@ -1,5 +1,33 @@
 import defaultExport from './dist/index.mjs';
 import assert from 'assert';
+import * as webdriverio from 'webdriverio';
+import { fileURLToPath, pathToFileURL } from 'url';
+import { join } from 'path';
 
 const exportIsFunction = typeof(defaultExport) === 'function';
 assert(exportIsFunction, 'export is not a function');
+
+
+async function integrationTest() {
+  let path = fileURLToPath(new URL('.', import.meta.url));
+  path = join(path, './node_modules/axe-test-fixtures/fixtures/index.html');
+
+  const options = {
+    automationProtocol: 'devtools',
+    path: '/',
+    capabilities: {
+      browserName: 'chrome',
+      'goog:chromeOptions': {
+        args: ['--headless']
+      }
+    },
+    logLevel: 'error'
+  };
+  const client = await webdriverio.remote( options );
+  await client.url(pathToFileURL(path).toString());
+
+  const results = await new defaultExport({ client }).analyze();
+  assert(results.violations.length > 0, 'could not find violations');
+  process.exit(0);
+}
+integrationTest()

packages/webdriverio/package.json

@@ -59,6 +59,7 @@
     "axe-test-fixtures": "github:dequelabs/axe-test-fixtures#v1",
     "chai": "^4.3.6",
     "chromedriver": "^112.0.0",
+    "cross-dirname": "^0.1.0",
     "delay": "^5.0.0",
     "express": "^4.18.2",
     "mocha": "^10.0.0",

packages/webdriverio/src/index.ts

@@ -12,6 +12,8 @@ import {
   axeRunLegacy,
   configureAllowedOrigins
 } from './utils';
+import { getFilename } from 'cross-dirname';
+import { pathToFileURL } from 'url';
 
 import type { Browser, Element } from 'webdriverio';
 import type {
@@ -23,6 +25,21 @@ import type {
 } from 'axe-core';
 import type { Options, CallbackFunction, PartialResults } from './types';
 
+let axeCorePath = '';
+async function loadAxePath() {
+  if (typeof require === 'function' && typeof require.resolve === 'function') {
+    axeCorePath = require.resolve('axe-core');
+  } else {
+    const { createRequire } = (await import('node:module')) as any;
+    // `getFilename` is needed because esm's `import.meta.url` is illegal syntax in cjs
+    const filename = pathToFileURL(getFilename()).toString();
+
+    const require = createRequire(filename);
+    axeCorePath = require.resolve('axe-core');
+  }
+}
+loadAxePath();
+
 export default class AxeBuilder {
   private client: Browser;
   private axeSource: string;
@@ -46,9 +63,8 @@ export default class AxeBuilder {
     if (axeSource) {
       this.axeSource = axeSource;
     } else {
-      const sourceDir = require.resolve('axe-core');
       try {
-        this.axeSource = fs.readFileSync(sourceDir, 'utf-8');
+        this.axeSource = fs.readFileSync(axeCorePath, 'utf-8');
       } catch (e) {
         throw new Error(
           'Unable to find axe-core source. Is axe-core installed?'

packages/webdriverio/tsconfig.json

@@ -3,7 +3,7 @@
     "moduleResolution": "node",
     "target": "esnext",
     "module": "esnext",
-    "lib": ["es2015", "es2016", "esnext", "dom"],
+    "lib": ["esnext", "dom"],
     "strict": true,
     "pretty": true,
     "sourceMap": true,