InjectAxe fails on cy.readFile error when using Cypress Webpack Preprocessor
See original GitHub issueI’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 3 years ago
- Reactions:5
- Comments:8
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 ...
Read more >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 .
Read more >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...
Read more >cypress-axe - bytemeta
cypress-axe repo issues. ... InjectAxe fails on cy.readFile error when using Cypress Webpack Preprocessor. reallymello. reallymello CLOSED.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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));
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 usingwindow.eval
worked consistently for me: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 andcheckA11y
was looking in the latter window). I could be wrong, but that was the extent of my debugging.