False positives when using Cypress-axe

I 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.

[avanslaars]

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.

[marcysutton]

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:

• Try adding an intentional violation to the h1 to see if it outputs a rule failure, like an invalid ARIA role (to check if that node is being evaluated at all)
• Try cy.get('header') or some other element that contains the h1 instead of cy.wait to see if anything changes with DOM readiness

Looks 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.