Distinguish Impact Levels That Cause Test Failures from Those Serving as Warnings
(Cover image from pexels.com by cottonbro studio)
ACT 1: EXPOSITION
In prior releases, the wick-a11y plugin introduced numerous remarkable features to the accessibility domain of the Cypress ecosystem: comprehensive and detailed analyses; customizable options based on impact levels, rules, and guidelines; summaries of violations; an interactive console; terminal reports; HTML reports with screenshots; and even voice feedback support!
In earlier versions, if you configured impact levels for the accessibility analysis and any issue of that level was detected, the test would report all violations, leading to a failed test.
However, this has changed with the all-new 1.4.0 version. Now, you can configure impact levels separately, allowing you to decide which will cause a test failure and which will merely issue a warning, all while retaining the existing outstanding features.
ACT 2: CONFRONTATION
Let's explore what's included in the new v1.4.0 release of the wick-a11y plugin.
New onlyWarnImpacts Option for cy.checkAccessibility() command
Previous versions of wick-a11y supported the includedImpacts option parameter. This was a list of impact levels to include in the accessibility analysis, and any violation at those impact levels would result in a test failure. If not specified, includedImpacts defaults to ['critical', 'serious'].
The new onlyWarnImpacts option complements the existing parameters by representing a list of impact levels that will generate a warning during accessibility analysis without failing the test. The possible values are "critical," "serious," "moderate," or "minor." If onlyWarnImpacts is not provided, it defaults to [] (empty list).
Let's say we want to report all accessibility issues for all impact levels, but we want our test to fail when 'critical' and 'serious' violations occur, and only report 'moderate' and 'minor' issues as warnings. In that case, our cy.checkAccessibility() command would look something like this:
cy.checkAccessibility(null, { includedImpacts: ['critical', 'serious'] , onlyWarnImpacts: ['moderate', 'minor'] });
This setup will report all accessibility issues across all four severity levels in the Cypress log, the webpage UI, the HTML report, and the Terminal report. However, the test will only fail if 'critical' and 'serious' accessibility violations are found. It will not fail for 'moderate' or 'minor' issues.
Additionally, the summary of accessibility violations, categorized by severity, will distinguish between those that are violations and those that are merely warnings.
Compatibility with Allure Report
Wick-a11y generates out-of-the-box HTML reports with screenshots of all violations detected in the analysis. Previously, the screenshot image was moved from the cypress/screenshot folder (or whatever you have configured as the screenshot folder in your project) to the folder containing the HTML report file generated by wick-a11y.
A wick-a11y user reported that integrating wick-a11y with their Allure report caused their report to fail due to the move operation.
In this new release, v1.4.0, the move task has been replaced with a copy task, ensuring the screenshot of violations remains available for other reporting tools.
ACT3: RESOLUTION
With the release of v1.4.0 of the wick-a11y accessibility Cypress plugin, developers and testers are empowered with enhanced control and flexibility in managing accessibility violations.
This version's ability to distinguish between errors that cause test failures and those that serve as warnings ensures a more nuanced testing process. The introduction of the onlyWarnImpacts option allows teams to prioritize their accessibility efforts while maintaining an effective and user-friendly testing environment.
Additionally, improved integration with reporting tools like Allure affirms wick-a11y's commitment to seamless workflows. Overall, wick-a11y continues to be an essential tool for developers aiming for inclusive web experiences.
Check out the WICK-A11Y CYPRESS ACCESSIBILITY PLUGIN VIDEO TUTORIAL on my new YouTube channel https://www.youtube.com/@SebastianClavijoSuero
Don't forget to follow me, leave a comment, or leave a reaction if you found this article useful or insightful. ❤️ 🦄 🤯 🙌 🔥