Axe-core: Executing source in axe-core creates a referenceError

[vytch]

Hi

Expectation:
We should be able to import the axe-core into a page.

Actual:
What this module does is to execute the source in axe-core. This leads to the following error:

ReferenceError: t is not defined
If I copy the content of source directly into a page I get the same problem.
If instead of using the source I use axe.js then it works. (I can do an axe.run)

Motivation:
we are trying to use axe-core in cypress.
This module will try to inject axe into the page by doing the following:

const axe = require('axe-core')
window.eval(axe.source)

axe-core version: 3.1.2
cypress-axe: 0.4.0

[straker]

Thanks for the bug report. Unfortunately I'm not able to reproduce the issue in either Cypress or just copying and pasting the result of axe.source into the browsers console.

I'm not familiar with Cypress, so forgive me if I'm doing something wrong. But I went and downloaded the latest version of Cypress (v3.1.5 ) and set up an integration test to inject axe into the page. Using the latest version of axe (v3.2.2) and the previous version (v3.1.2) I was able to successfully inject axe into the currently active page with no errors:

describe('My First Test', function() {
  it('Visits the Kitchen Sink', function() {
    cy.visit('https://example.cypress.io')

    cy.window().then((win) => {
      // inject axe
      win.eval(axe.source);
      console.log('axe version:', win.axe.version);

      win.axe.run(function (err, results) {
        if (err) throw err;

        console.log({results});
      });
    });
  });
});

I was also able to successfully inject it into the page as a custom command as cypress-axe does.

[artemkochnev]

@straker we're running into the same issue. I've narrowed this down to an issue with bundling axe-core with webpack. We're doing this because we're using Typescript in our Cypress tests following the recommendations here: https://docs.cypress.io/guides/tooling/typescript-support.html#Transpiling-TypeScript-test-files

The issue is that when webpack bundles the file, it inlines the first check for if define exists, and this is also present in the axe.source since it is just the stringified version of function.

By adding { parser: { amd: false } } to our webpack rules, we can force define to not exist, but then it dies on the check to see if module exists because it tries to use _typeof(module)

I threw together a minimal repro here: https://github.com/artemkochnev/cypress-axe-error-repro

I'm not sure if there's any way that axe-core can fix this, or if it just isn't meant to work with webpack.

[straker]

@artemkochnev Thanks for the updated information, it was very helpful. I can now duplicate the problem with your repo. From what I can tell, Cypresses use of Webpack is rewritting the axe-core code and replacing this line

if ((typeof module === 'undefined' ? 'undefined' : _typeof(module)) === 'object' && module.exports && typeof axeFunction.toString === 'function') {

with

if (( false ? undefined : _typeof(module)) === 'object' && module.exports && typeof axeFunction.toString === 'function') {

Which normally works as module is being defined by webpack, but when you get the axe.source which doesn't contain the wrapper webpack function with the module parameter, it breaks as it tries to do _typeof(module).

As you noted in https://github.com/avanslaars/cypress-axe/issues/6, if you're using Cypress and webpack you'll have to load axe through a script tag rather than injecting the axe.source through window.eval.

[YOU54F]

As stated this is an issue with webpack, I have switched to

https://github.com/cypress-io/cypress-browserify-preprocessor

which has resolved the issue