False positives when using Cypress-axe
See original GitHub issueI started using cypress-axe
to catch a11y issues when running end to end tests automatically, but I am finding it challenging to get the tests to pass. I get two errors which I believe are false positives:
- page-has-heading-one
- landmark-one-main
I use react-axe
, which prints a11y issues to browser console in development mode, but I don’t see these two issues reported by that package. I tried auditing using Axe Chrome extension, but I do not see these.
I would be happy to provide more information, but at this point, I believe it to be a bug with cypress-axe.
Issue Analytics
- State:
- Created 4 years ago
- Comments:20
Top Results From Across the Web
False positives when using Cypress-axe · Issue #22 - GitHub
It would help to investigate which DOM nodes are failing with those rules in cypress-axe , and report what you find. Are those...
Read more >False Positives in Cypress-axe Plugin for Accessibility Testing
The cypress-axe plugin continually gives false positives when having made the required changes. The false positive is for page-has-heading-one ...
Read more >Setting up Cypress with axe for accessibility - Tim Deschryver
Axe is open source. It returns zero false positives (bugs notwithstanding). It's designed to work on all modern browsers and with whatever ...
Read more >Axe API Documentation - Deque Systems
Only checks rendered content to minimize false positives (that includes visually-hidden content). Getting Started. This section gives a quick description of how ...
Read more >Detecting accessibility issues on CI with cypress-axe
This command runs cypress-axe checkA11y method with a custom violation callback function that prints a list of violations to the terminal, and ...
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
Thanks, @JoshuaKGoldberg for posting the repo for verification. I verified with default Cypress setup (using browserify as the preprocessor), as well as a setup with the webpack preprocessor (no TS). With your TS setup, it looks like this update covers the scenarios that seemed to be causing problems.
Maybe it’s a timing issue with cypress-axe testing page content before it’s fully loaded? I don’t work on cypress-axe myself, but I used to be on the axe-core team and I maintain the cypress docs in Gatsby. So I have lots of ideas of things to try if you aren’t getting a response from the maintainer!
Some things you could do to play around with it:
cy.get('header')
or some other element that contains the h1 instead ofcy.wait
to see if anything changes with DOM readinessLooks like better-cypress-axe bundles axe-core with it instead of a peer dependency, maybe it’s related to an axe-core version? not sure.