Axe Watcher vereist een ondersteunde browser die al op uw systeem is geïnstalleerd: Chrome for Testing (een aparte browserinstallatie, anders dan Google Chrome), Chromium of Microsoft Edge. Google Chrome, versie 139 of later, wordt niet ondersteund. Zie Browsers instellen en configureren voor gebruik met Axe Watcher voor installatie- en configuratie-instructies.
Installeer in de hoofdmap van je testmap het @axe-core/watcher-pakket en al zijn afhankelijkheden met npm of je voorkeurspakketbeheerder (bijvoorbeeld yarn of pnpm).
npm install --save-dev @axe-core/watcherImplementeer in je testbestanden de functie wdioConfig(), de functie wrapWdio() en de klasse WdioController van @axe-core/watcher/wdio:
const {
wdioConfig,
wrapWdio,
WdioController
} = require('@axe-core/watcher/wdio')Omvat in je testopstellingscode (typisch in een before of beforeAll-blok) bestaande code voor het creëren van een browser-instantie met een oproep naar wdioConfig(), terwijl je je API-sleutel verstrekt:
const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID
const SERVER_URL = process.env.SERVER_URL
const browser = await wdio.remote(
wdioConfig({
axe: {
apiKey: ACCESSIBILITY_API_KEY,
projectId: PROJECT_ID,
serverURL: SERVER_URL
}
})
)Zorg ervoor dat je ACCESSIBILITY_API_KEY en PROJECT_ID in je omgeving instelt op je persoonlijke API-sleutel (te vinden in je Axe-account, tabblad **API-SLEUTELS**) en je project-ID (weergegeven bovenaan deze instructies toen je je project maakte of beschikbaar van de Projecten-pagina door **Project configureren** te kiezen onder **Instellingen**). Als je organisatie een regionale, private cloud of on-premises Axe Developer Hub-instantie gebruikt, stel dan ook SERVER_URL in op de basis-URL van die instantie (bijvoorbeeld, https://axe-eu.deque.com); zo niet, laat dan SERVER_URL weg en zal de standaard https://axe.deque.com gebruikt worden.
Zodra je een browser-instantie hebt, maak een instantie van de klasse WdioController aan:
const controller = new WdioController(browser)Omvat je browser-instantie met de functie wrapWdio(), waarbij de browser-instantie en de controller-instantie worden verstrekt:
wrapWdio(browser, controller)Zorg er ten slotte voor dat alle testresultaten van Axe Watcher worden gewist. Voeg hiertoe het volgende codeblok toe aan je test-teardown code (meestal in een afterEach blok):
afterEach(async () => {
await controller.flush()
})