cypress-axe VS cypress-real-events

If you’re setting up automated tests (and you probably should), you can even integrate axe with Cypress

The same engine can be used with Cypress, thanks to the cypress-axe package. It adds several custom commands to the Cypress API, which utilizes “axe-core” under the hood. It makes it possible to perform a11y audits directly while testing.

Cypress

Luckily for us, there’s a new player in town. Cypress is a great tool that provides us with a modern solution for creating, running and maintaining code. Combined with Cypress Testing Library and the accessibility audit tool aXe, you’ll have all the tools you need to gain confidence in your application, and to never deal with manual verifications in prod ever again.

Maybe: https://github.com/component-driven/cypress-axe/issues/82

I have used this great cypress-real-events package before and it seems to have helped this time as well. This library adds a "realHover()" event that works with CSS.

https://github.com/dmtrKovalenko/cypress-real-events TS - Dmitry Kovalenko

The way Cypress is built does not allow simulating “real” user actions out of the box. All of the actions there are triggered via JavaScript. Usually, this is not a problem; however, in terms of keyboard navigation, it is — we won’t be able to use a “Tab” key, which is necessary to simulate how the user would navigate around. Luckily, the Cypress Real Events package comes in handy (or its alternatives, e.g. Cypress Plugin Tab). It uses the Chrome DevTools Protocol (so it only works in Chrome) in order to fire actual system events. Still, it has its downsides, though — you won’t be able to interact with certain system elements like default selects. If you were to determine that this is an important part of your app, other testing frameworks might be necessary.