Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

InjectAxe fails on cy.readFile error when using Cypress Webpack Preprocessor

See original GitHub issue

Issue Description

I’m seeing the following error when running cy.injectAxe in my Cypress tests:

Timed out retrying after 4000ms: cy.readFile("0764") failed because the file does not exist at the following path:

/home/megan/voicethread/code/frontend/wizard/0764

Because this error occurred during a before each hook we are skipping the remaining tests in the current suite

node_modules/cypress-axe/dist/index.js:16:8
  14 | exports.configureAxe = exports.injectAxe = void 0;
  15 | exports.injectAxe = function () {
> 16 |     cy.readFile(require.resolve('axe-core/axe.min.js')).then(function (source) {
     |        ^
  17 |         return cy.window({ log: false }).then(function (window) {
  18 |             window.eval(source);
  19 |         });

require.resolve('axe-core/axe.min.js') seems to evaluate to "0764" instead of the intended JS.

This issue seems to be connected to Cypress’s Webpack Preprocessor, which I’m using to handle importing files with absolute path aliases.

const webpack = require('@cypress/webpack-preprocessor')

module.exports = (on, config) => {
  on('file:preprocessor', webpack({
    webpackOptions: require('@vue/cli-service/webpack.config'),
    watchOptions: {},

    // Add the ability to use aliases like @shared
    resolve: {
      alias: require('../../../../aliases.config').webpack
    }
  }))

  return Object.assign({}, config, {
    fixturesFolder: 'tests/e2e/fixtures',
    integrationFolder: 'tests/e2e/specs',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',
    supportFile: 'tests/e2e/support/index.js'
  })
}

When I remove the on('file:preprocessor') listener from my plugins.js, file, the cy.injectAxe command succeeds.

Node version: 12.13.1 Cypress version: 6.3.0 @cypress/webpack-preprocessor version: 5.5.0

Issue Analytics

State:
Created 2 years ago
Reactions:5
Comments:8

Top GitHub Comments

1reaction

JamesHenrycommented, May 11, 2021

Thank you @kevin-donovan-zocdoc! I had to apply your workaround when working in an Nx monorepo because Nx wires up TypeScript support for you using on('file:preprocessor', preprocessTypescript(config));

1reaction

kevin-donovan-zocdoccommented, Apr 1, 2021

This is the most popular workaround #6 (comment). However it doesn’t quite work in all cases - at least not for me. It does get rid of the original error, but once you call checkA11y it will error out. It’s not great, but hardcoding the path and using window.eval worked consistently for me:

Cypress.Commands.add('injectAxe', () => {
    cy.readFile('node_modules/axe-core/axe.min.js').then(source => {
        return cy.window({ log: false }).then(window => {
            window.eval(source);
        });
    });
});

I think the reason the original workaround didn’t work is because of some webpack config I have or possibly the script is injected into the wrong window (Cypress has 2 windows, I did find that window.axe was present in one but not the other and checkA11y was looking in the latter window). I could be wrong, but that was the extent of my debugging.

Top Results From Across the Web

cypress-axe - Bountysource

I'm seeing the following error when running cy.injectAxe in my Cypress tests: Timed out retrying after 4000ms: cy.readFile("0764") failed because the file ...

Webpack Compilation Error with Cypress 10 and Cucumber in ...

I modified the above solution: import webpack from "@cypress/webpack-preprocessor"; and I removed the rule for . ts files, keeping just the .

Detecting accessibility issues on CI with cypress-axe

Inject Axe into the page — we need to do it once, after calling cy.visit . Run the checks using our checkAccessibility command...

cypress-axe - bytemeta

cypress-axe repo issues. ... InjectAxe fails on cy.readFile error when using Cypress Webpack Preprocessor. reallymello. reallymello CLOSED.