Istruzioni per WebDriverJS e JavaScript

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Configurazione dei test con WebDriverJS e JavaScript

Not for use with personal data
important

Axe Watcher richiede un browser supportato già installato sul tuo sistema: Chrome for Testing (un'installazione del browser separata, distinta da Google Chrome), Chromium o Microsoft Edge. Google Chrome, versione 139 o successiva, non è supportato. Vedi Impostazione e configurazione dei browser per l'uso con Axe Watcher per le istruzioni di installazione e configurazione.

  1. 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
  2. Nel tuo file o nei tuoi file di test, importa la funzione webdriverConfig(), la funzione wrapWebdriver() e la classe WebdriverController da @axe-core/watcher/webdriver:

    const {
      webdriverConfig,
      wrapWebdriver,
      WebdriverController
    } = require('@axe-core/watcher/webdriver')
  3. Aggiorna il codice di configurazione del test (tipicamente in un blocco before o beforeAll), specificando le opzioni di Chrome quando istanzi la tua istanza browser, fornendo la tua chiave API:

    // Original code:
    let browser = await new Builder()
      .forBrowser('chrome')
      .build()
    
    // Becomes:
    const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
    const PROJECT_ID = process.env.PROJECT_ID
    const SERVER_URL = process.env.SERVER_URL
    
    let browser = await new Builder()
      .forBrowser('chrome')
      .setChromeOptions(
        webdriverConfig({
          axe: {
            apiKey: ACCESSIBILITY_API_KEY,
            projectId: PROJECT_ID,
            serverURL: SERVER_URL
          }
        }
      )
      .build()

    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.

  4. Crea un'istanza di WebdriverController:

    const controller = new WebdriverController(browser)
    note

    Se abiliti acquisizione schermata (takeScreenshots: true), nota che WebdriverController non implementa l'acquisizione schermata in @axe-core/watcher 4.6.0. Per acquisire schermate, sottoclassa WebdriverController, sovrascrivi captureScreenshot() per chiamare il metodo takeScreenshot() di Selenium e istanzia la tua sottoclasse invece:

    class ScreenshotWebdriverController extends WebdriverController {
      async captureScreenshot() {
        return await this.driver.takeScreenshot()
      }
    }
    
    const controller = new ScreenshotWebdriverController(browser)
  5. Avvolgi la tua istanza browser con la funzione wrapWebdriver():

    browser = wrapWebdriver(browser, controller)
  6. Infine, assicurati che tutti i risultati dei test di Axe Watcher siano eliminati. Per fare ciò, aggiungi il seguente blocco di codice al tuo codice di chiusura dei test (tipicamente in un blocco afterEach):

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