Installeer in de hoofdmap van uw testmap het @axe-core/watcher-pakket en al zijn afhankelijkheden met behulp van npm of uw voorkeurs pakketbeheerder (bijvoorbeeld yarn of pnpm).
npm install --save-dev @axe-core/watcherIn je wdio.config.ts bestand, importeer de wdioTestRunner() functie, de wrapWdio() functie, en de WdioController klasse van @axe-core/watcher/wdio:
import {
wdioTestRunner,
wrapWdio,
WdioController
} from '@axe-core/watcher/wdio'Voordat je je WebdriverIO-configuratie exporteert, omhul deze met een oproep naar wdioTestRunner() terwijl je je API-sleutel verstrekt:
// Original code:
export const config = {
// Your config options here...
}
// Becomes:
const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID
export const config = wdioTestRunner({
axe: {
apiKey: ACCESSIBILITY_API_KEY,
projectId: PROJECT_ID
}, {
// Your config options here...
}
})Zorg ervoor dat u ACCESSIBILITY_API_KEY en PROJECT_ID in uw omgeving instelt op uw persoonlijke API-sleutel (te vinden in uw Axe-account, tabblad API-SLEUTELS) en uw project-ID (weergegeven bovenaan deze instructies toen u uw project maakte of beschikbaar op de Projecten-pagina door Project configureren te kiezen onder Instellingen).
In je testopstartcode (meestal in een before of beforeAll blok), maak een instantie van de WdioController klasse en omhul vervolgens je browser object:
const controller = new WdioController(browser)
wrapWdio(browser, controller)Zorg er ten slotte voor dat alle testresultaten van axe Watcher worden verwerkt. Voeg hiervoor het volgende blok code toe aan je testafbouwcode (meestal in een afterFetch blok):
afterEach(async () => {
await controller.flush()
})