javascript - Take action if checkally() finds no violations - Stack Overflow

admin管理员组

文章数量:1410724

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?

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?

• javascript
• cypress
• accessibility
• axe

Share Improve this question Follow edited Mar 19 at 0:36 Alexander.Korda 14066 bronze badges asked Mar 11 at 14:57 Keith FosbergKeith Fosberg 12111 gold badge22 silver badges1212 bronze badges 0

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

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')
  })

I want to note that the above, accepted answer, is correct. Being new to this, I didn't know about the usage of cy.wrap(), so I wrote around the issue.

This was my solution:

In Test script:

            cy.task('setStatus', true);
            cy.injectAxe();
            cy.checkA11y('#wrapper', TTv5Conf, (results) => cy.task('displayError',results), true);
            cy.task('getStatus').then(flag => {
                if(flag === "true"){
                    cy.task('writeLog', 'No 508 Compliance  violations were found on this screen.\n')
                }
            });

In config: (Note; I aliased these so I could bridge between Cypress code running in the browser and standalone code running in the shell.)

      on('task', {
        'writeLog': (message) => {
          return utilityFunctions.writeLog(message);
        },
        'buildTable': (message) => {
          return utilityFunctions.buildTable(message);
        },
        'getLogFileName': () => {
          return utilityFunctions.getLogFileName();
        },
        'displayError': (violations) => {
          return utilityFunctions.displayError(violations);
        },
        'setStatus': (bit) => {
          return utilityFunctions.setStatus(bit);
        },
        'getStatus': () => {
          return utilityFunctions.getStatus();
        },
      });

Actual functions:

function displayError(violations: Result[]) {
    const mssg = 
        `${violations.length} accessibility violation${
          violations.length === 1 ? '' : 's'
        } ${violations.length === 1 ? 'was' : 'were'} detected`;
        writeLog(mssg);

    const violationMap = violations.map(
        ({ id, impact, description, nodes,help,helpUrl }) => ({
          id, impact, description, nodes, help, helpUrl
        })
    )

    const myData = ['Violation Type','Number Of Elements','Affected Elements','Help','Help Resource'];
    var myDeepData: string[][] = [];
    myDeepData.push(myData);
    violationMap.forEach(name =>{
        var elementList = '';
        name.nodes.forEach(nd => {
            elementList = elementList + `${nd.target}\n`;
        });     
        const rowData = [name.id,name.nodes.length.toString(),elementList,name.help,name.helpUrl];
        myDeepData.push(rowData);
    });
    buildTable(myDeepData);
    setStatus(false);
    return null;
}

function setStatus(bit: boolean) {
    const { env } = require('process');
    env.error_flag = bit;
    return null;
}

function getStatus() {
    const { env } = require('process');
    return env.error_flag;
}

本文标签： javascriptTake action if checkally() finds no violationsStack Overflow