javascriptcypressaccessibilityaxe

Take action if checkally() finds no violations

I am creating 508 compliance scripts using Cypress and the axe library.

I have a statement in my test to invoke a scan:

cy.checkA11y('#wrapper', TTv5Conf, cy.displayError, true);

My callback function details all the violations in a custom log.

I would also like to print a simple string indicating that all is well when there are no violations.

checkAlly has no return, so how do I determine that it found no violations?

Solution

  • It appears you are passing a custom command (or perhaps a custom query) as 3rd parameter instead of a function.

    Understandable since the repo lacks examples. But the source types the third param as a function returning void.

    const checkA11y = (
  context?: axe.ElementContext,
  options?: Options,
  violationCallback?: (violations: axe.Result[]) => void,
  skipFailures = false
) => {

    WRT to handling no violations, the library does not handle the case at all, here is the source for the call to violationCallback()

    if (violations.length) {           <-- doesn't call if no violations
  if (violationCallback) {
    violationCallback(violations);

    so you need to add the code directly in your test, or wrap it in another custom command to correct the bug.

    cy.wrap(true).as('noViolations');

function myViolationCallback(violations) {
  cy.wrap(false).as('noViolations');
  cy.displayError(violations)
}

cy.checkA11y('#wrapper', TTv5Conf, myViolationCallback, true);
cy.get('@noViolations').then((noViolations) => {
  if (noViolations) {
    cy.log('No violations, all is good')
  })