We need to test our code to ensure 'A more functional, maintainable, responsive and consistent UI'.
Questions to answer
- Is axe-core is unit or e2e
- What additional testing do we need that axe-core does not provide, if any
Description
Description
Details
Details
Related Changes in Gerrit:
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Set up cypress-axe | mediawiki/extensions/Wikibase | master | +89 -3 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T394621 [MEX] Mobile Editing Experience of Items Project | |||
| Resolved | karapayneWMDE | T394886 [MEX] M2 - Iteration 2 - Basic UI elements | |||
| Open | None | T415326 [MEX] M5 - additional functionality and clean up | |||
| Open | None | T398036 [MEX] M5 - Testing | |||
| Resolved | karapayneWMDE | T400154 [MEX] M2 - Create tests for view files | |||
| Resolved | karapayneWMDE | T400678 [MEX] Spike - accessibility testing |
Event Timeline
Comment Actions
Context: Axe is an accessibility testing engine for websites and other HTML-based user interfaces. We have used it previously with Cypress.
Manual testing will also be required but will be covered in T400471
Timebox: 8 hours
Comment Actions
I've just pushed a WIP patch of the cypress support in case this is helpful as a reference / basis for the person working on this ticket.
Comment Actions
According to the documentation, axe-core can be used in different contexts, e.g. in Jest using jest-axe or in Cypress using cypress-axe. jest-axe has one caveat, which is that checking color contrast doesn’t work in JSDOM. Also, there are some potential issues in jest-axe when testing isolated components, because Axe expects to be testing a whole page for accessibility.
My feeling is that Axe testing makes more sense in Cypress than in Jest; we’ll probably have more instances of a “realistic” UI (with real statements) there, compared to mocked component unit tests, and also running in a real browser engine sounds more useful. But if cypress-axe doesn’t work for us for some reason, we should also be able to get it working with Jest, or even do both at once.
Comment Actions
Change #1176508 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] WIP: cypress-axe
Comment Actions
I think this is now stalled on T400471: [MEX] Create end2end testing framework. There’s a basic cypress-axe setup, and it works (and includes a demonstration for how to ignore certain rules, if we want that), but it currently tests Special:Version. Once we have a working test for wbui2025 in the other task, we can update the test to check accessibility there, and potentially fix issues we run into.
Comment Actions
Change #1176508 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Set up cypress-axe