Karma

Karma testen met Axe DevTools

Deze integratie met Karma werkt onafhankelijk van het geselecteerde UI-framework. Deze integratie werkt voor het testen van React, Angular, Vue, enz.

Vereisten

Om uw content te testen met behulp van Karma en Axe DevTools, heeft u eerst de volgende pakketten in uw project nodig:

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

Karma configuratie instellen

We moeten eerst ons karma.config (of karma.conf) bestand instellen om de @axe-devtools/karma-json-reporter als een plugin toe te voegen.

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

Voeg vervolgens axeDevTools toe aan de reporters eigenschap. U kunt ook de axeDevToolsReporter eigenschap toevoegen met de doelmap (dir). Standaard worden de rapporten aangemaakt in de axeDevToolsReports map op het hoofdniveau van uw project.

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

Zodra geconfigureerd, zal de @axe-devtools/karma-json-reporter een globale reporter-object aan uw tests toevoegen genaamd axeDevToolsReporter.

Testcase opzetten

Om axe in uw testspecificaties voor elke component of pagina-component uit te voeren, voegt u de volgende import toe:

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

Voeg vervolgens binnen uw tests instellingsfuncties (bijv. before() of beforeEach()) de volgende init() functie toe om het een specifieke regels iem set te geven. Standaard wordt het wcag2.1 regels iem set gebruikt.

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

Nu moeten we een test maken zoals hieronder getoond, waarbij we de component of pagina-component scannen op toegankelijkheidsproblemen. Echter, om AxeDevTools.run() correct aan te roepen, moeten alle niet-native componenten worden gecompileerd tot een native element om de component correct te scannen.

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

Rapporteren met Karma en Axe DevTools

Rapportage instellen in Test

Telkens wanneer AxeDevTools.run() wordt aangeroepen, voeg een aanroep toe aan axeDevToolsReporter.logTestResult() en geef het de resultaten van de axe-run door. De logTestResult functie kan optioneel een id als eerste parameter accepteren die gebruikt zal worden als de naam van de 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);
});

Nu, wanneer de tests worden uitgevoerd, zal de @axe-devtools/karma-json-reporter een JSON-bestand maken voor elke gelogde Axe DevTools scan (genaamd axeDevToolsResults).

De Axe DevTools CLI uitvoeren

Zodra de tests zijn voltooid en de rapporten zijn gegenereerd, kunnen we een Axe DevTools-rapport genereren met behulp van de @axe-devtools/cli.

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

Problemen oplossen

Als u problemen heeft met het verkrijgen van scanresultaten, neem dan direct contact op met uw Deque-vertegenwoordiger, bereik ons via onze supportdesk, of stuur ons een e-mail. We helpen u graag.

Voor meer informatie over Axe DevTools in het algemeen, zie de Axe DevTools overzichtspagina

Zie ook

• Uploaden van JSON-toegankelijkheidsresultaten naar axe Reports beschrijft hoe u uw resultaten kunt uploaden naar axe Reports.
• Verkrijgen van een axe Reports API-sleutel legt uit hoe u een API-sleutel kunt verkrijgen om te beginnen met het gebruik van axe Reports.
• Rapporten maken en filteren laat zien hoe u toegankelijkheidsrapporten kunt maken in CSV, XML of HTML op basis van uw JSON-toegankelijkheidsresultaten. U kunt uw output ook filteren op ernst met dit hulpmiddel.
• Hoe JSON-resultaten op schijf worden opgeslagen beschrijft de naamgevingsconventies voor JSON-toegankelijkheidsresultaten.
• De CLI gebruiken om toegankelijkheidsresultaten naar axe Developer Hub te sturen laat zien hoe u uw .json resultatenbestanden kunt uploaden naar axe Developer Hub.