component-driven / cypress-axe

Test accessibility with axe-core in Cypress
MIT License
622 stars 86 forks source link

Can we expect html report for the accessibility issues #49

Open rishichenna opened 4 years ago

sapegin commented 4 years ago

Why do you want to have an HTML specifically? How are you planning to use it?

boochamoocha commented 4 years ago

Need the same - json and html reports after all tests running.

Maybe you could give me a clue about how to collect vulnerabilities and then use it?

sapegin commented 4 years ago

For now you can use violationCallback.

cy.checkA11y(subject, null, violations => cy.task('reportA11y', violations), skipFailures)

And then do whatever you want with them in your cypress/plugins/index.js file. For example, I pint a summary to the terminal:

import { sortBy } from 'lodash';

const a11yViolations = {};

function appendA11yViolations(violations) {
  for (const { id, impact, description, nodes } of violations) {
    if (!a11yViolations[id]) {
      a11yViolations[id] = { impact, description, count: 0 };
    }
    a11yViolations[id].count += nodes.length;
  }
}

function printA11ySummary() {
  const orders = { critical: 1000, serious: 2000, moderate: 3000, minor: 4000 };
  const sorted = sortBy(a11yViolations, ({ impact, count }) => orders[impact] - count);
  console.table(sorted);
}

export default (on, config) => {
  on('task', {
    reportA11y(violations) {
      appendA11yViolations(violations);
      return null;
    },
    afterAll() {
      printA11ySummary();
      return null;
    },
  });

  return config;
};

And add this to your cypress/support/index.js:

// Send an event we can subscribe to inside a plugin
after(() => {
  cy.task('afterAll');
});

I want to include such functionality in the next major release. JSON is definitely a good option but I'm not so sure about HTML — it's a lot more work on templates and styling so I need more details on how folks are going to use it.