Karma

Link to Karma copied to clipboard

Karma testing with axe DevTools

This integration with Karma works independent of the selected UI framework. This integration will work testing React, Angular, Vue, etc..

Prerequisites

In order to test your content using Karma and axe DevTools, you first need the following packages installed into your project:

  • @axe-devtools/karma-json-reporter
  • @axe-devtools/browser
  • @axe-devtools/cli

Karma config setup

We first will need to setup our karma.config (or karma.conf) file to include the @axe-devtools/karma-json-reporter as a plugin.

plugins: [
  require('@axe-devtools/karma-json-reporter')
]

Then add axeDevTools to the reporters property. You can also and the axeDevToolsReporter property with the destination directory (dir). By default the reports will be created in the axeDevToolsReports directory at the root level of your project.

reporters: ['axeDevTools'],
axeDevToolsReporter: {
  dir: 'axe-results'
},

Once configured, the @axe-devtools/karma-json-reporter will add a global reporter object to your tests called axeDevToolsReporter.

Test case setup

To run axe within your test specs for each component or page component, add the following import:

import * as AxeDevTools from "@axe-devtools/browser";

Then within your tests setup functions (e.g. before() or beforeEach()) add the following init() function to give it a particular ruleset. By default the wcag2.1 ruleset is used.

before(() => {
  AxeDevTools.init("wcag2.1");
});

Now we need to create a test like the one shown below, where we will scan the component or page component for accessibility issues. However, in order to properly call AxeDevTools.run(), any non-native components will need to be compiled into a native element in order to properly scan the component.

it("should have no accessibility violations", async () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  
  const results = await AxeDevTools.run(compiled);
  expect(results.violations).toHaveLength(0);
});

Reporting with Karma and axe DevTools

Setup Reporting in Test

Each time AxeDevTools.run() is called, add a call to axeDevToolsReporter.logTestResult() and pass it the results of the axe run. The logTestResult function can optionally take an id as the first parameter which will be used as the name of the test.

it("should have no accessibility violations", async () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  
  const results = await AxeDevTools.run(compiled);
  axeDevToolsReporter.logTestResult(results);
  expect(results.violations).toHaveLength(0);
});

Now when the tests are run, the @axe-devtools/karma-json-reporter will create a JSON file for each logged axe DevTools scan (called axeDevToolsResults).

Running the axe DevTools CLI

Once the tests are completed and the reports have been generated, we can generate an axe DevTools report using the @axe-devtools/cli.

"test": "karma start && axe reporter ./axe-results --format=html",

Troubleshooting

If you have trouble with getting scan results, contact your Deque representative directly, reach us via our support desk, or send us an email. We'll be happy to help.

For more information about axe DevTools in general, see the axe DevTools overview page

See Also

Is this page helpful?

Help us improve this page

Still need help?