How to use the cypress-axe with component-testing (angular)

[Cabinet20]

It seems you are unable to run cy.visit('/') within a component test (angular).

So I am unable to run cy.injectAxe() and cy.checkA11y().

Any suggestions would be appreciated. I was unsure how to flag this as a question, rather than an issue.

[atomicrobokid]

I have the same question :)

[nickjtorres]

Is there more of an example you could provide of the code, or the error you get?

[atomicrobokid]

@nickjtorres I've set up a barebones app here https://github.com/atomicrobokid/teststorybook

You can run the cypress component test with npx nx component-test demo --skip-nx-cache

This is set up using the out of the box NX generators, so ideally should "just work"

[nickjtorres]

@atomicrobokid thanks for including the repo, that is helpful. For this type of setup the axeCorePath seemed to be different, so you can try specifying it. I'm able to get 4 violations on the AppComponent:

describe('Component accessibility tests', () => {
        beforeEach(() => {
            cy.mount(AppComponent);
            cy.injectAxe({axeCorePath: "../../node_modules/axe-core/axe.min.js"});
        });

        it('renders', () => {
          cy.get("button").click();
        });

        it('Should have no accessibility violations',() => {
            cy.checkA11y();
        });
    });   

Results:

 AppComponent
    Component accessibility tests
      √ renders (254ms)
      1) Should have no accessibility violations
  1 passing (713ms)
  1 failing
  1) AppComponent
       Component accessibility tests
         Should have no accessibility violations:
     AssertionError: 4 accessibility violations were detected: expected 4 to equal 0

This seems cool being able to check the accessibility on a single component, but I would caution on it's application in a testing process. I feel like it would be better to run axe on the entire page alongside other components to be able to identify more potential accessibility issues. My only worry is that testers might miss some violations if they aren't also checking how a component plays alongside the page it's used in.

[yourkingnico]

@Cabinet20 I'm curious if specifying the axeCorePath like above works for you also? If so, perhaps for component testing you don't necessarily need to call cy.visit()

[atomicrobokid]

@nickjtorres - works a treat thank you!

We will have page level accessibility tests too, but for the design system level we want to make sure that any components we create are up to standard out of the box before they get consumed by apps

I suspect the path is different because of how NX sets up it's cypress config deep within each app/lib

[atomicrobokid]

Just a heads up for anyone else doing component level testing, you will get failures for things that won't exist at a component level, i.e. page headings, document types etc.

I got around this by adding a custom cypress command (to stop repeating this config) which in turns calls checka11y with the following options:

  cy.checkA11y('', {
    runOnly: {
      type: 'tag',
      values: ['wcag2a']
    },
    rules: {
      'html-has-lang': { enabled: false },
    }
  })