Istruzioni per WebdriverIO e JavaScript

Nella cartella principale del tuo ambiente di test, installa il pacchetto @axe-core/watcher e tutte le sue dipendenze utilizzando npm o il tuo gestore di pacchetti preferito (ad esempio, yarn o pnpm).

npm install --save-dev @axe-core/watcher

Nei tuoi file di test, importa la funzione wdioConfig(), la funzione wrapWdio() e la classe WdioController da @axe-core/watcher/wdio:

const {
  wdioConfig,
  wrapWdio,
  WdioController
} = require('@axe-core/watcher/wdio')

Nel codice di configurazione del test (tipicamente in un blocco before o beforeAll), avvolgi qualsiasi codice esistente per creare un'istanza di browser con una chiamata a wdioConfig(), fornendo la tua chiave API:

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

Assicurati di impostare ACCESSIBILITY_API_KEY e PROJECT_ID nel tuo ambiente con la tua chiave API personale (che si trova nel tuo account Axe, scheda **API KEYS**) e l'ID del tuo progetto (mostrato nella parte superiore di queste istruzioni quando hai creato il tuo progetto o disponibile nella pagina Progetti scegliendo **Configura progetto** sotto **Impostazioni**). Se la tua organizzazione utilizza un'istanza regionale, cloud privato o on-premise di Axe Developer Hub, imposta anche SERVER_URL sull'URL di base di tale istanza (per esempio, https://axe-eu.deque.com); altrimenti, ometti SERVER_URL e verrà utilizzato il https://axe.deque.com predefinito.

Una volta che hai un'istanza di browser, crea un'istanza della classe WdioController:

const controller = new WdioController(browser)

Avvolgi la tua istanza browser con la funzione wrapWdio(), fornendo l'istanza browser e l'istanza controller:

wrapWdio(browser, controller)

Infine, assicurati che tutti i risultati dei test di Axe Watcher siano stati completamente eliminati. Per fare questo, aggiungi il seguente blocco di codice al tuo codice di smantellamento del test (tipicamente in un blocco afterEach):

afterEach(async () => {
  await controller.flush()
})