Impostare e configurare i browser per l'utilizzo con Axe Watcher

Axe Watcher supporta i seguenti browser:

• Google Chrome per Testing
• Chromium
• Microsoft Edge (JavaScript/TypeScript o Java con Playwright; non supportato con Java Selenium)

Playwright e Puppeteer gestiscono le proprie installazioni del browser: scaricano sempre una versione di Chromium supportata da Axe Watcher, quindi non è necessario installare un browser manualmente su tali piattaforme. WebdriverIO, WebDriverJS e Java Selenium si connettono invece a un browser già installato sulla macchina, quindi è necessario installare manualmente un browser supportato e configurare il test per puntare ad esso, come spiegato nelle sezioni seguenti.

Installare Chrome per Testing o Chromium

Scegli uno dei seguenti metodi di installazione:

• Usando npm: @puppeteer/browsers è uno strumento di download browser autonomo; non è necessario che Puppeteer sia installato nel tuo progetto. Per installare Chrome per Test, esegui:

  npx @puppeteer/browsers install chrome@stable

  Per installare invece Chromium, esegui:

  npx @puppeteer/browsers install chromium@latest

  Il comando stampa il percorso del binario installato alla fine del suo output, per esempio:

  chrome@stable /home/user/.cache/puppeteer/chrome/linux-136.0.7103.92/chrome-linux64/chrome

  Imposta la variabile d'ambiente CHROME_PATH su quel percorso prima di eseguire i tuoi test.

  important

  @puppeteer/browsers install scarica il browser in una sottodirectory della directory corrente. Esegui il comando da una posizione in cui un download di grandi dimensioni è appropriato e considera di aggiungere la directory risultante al tuo .gitignore.

• Usando GitHub Actions: Aggiungi il seguente passaggio al tuo file di workflow. Per installare Chrome per Test:

  - name: Setup Chrome for Testing
    uses: browser-actions/setup-chrome@latest
    id: setup-chrome
    with:
      chrome-version: stable
      install-chromedriver: true

  Per installare Chromium, invece, usa latest per chrome-version:

  - name: Setup Chromium
    uses: browser-actions/setup-chrome@latest
    id: setup-chrome
    with:
      chrome-version: latest
      install-chromedriver: true

  In entrambi i casi, il percorso del binario è disponibile dall'output del passo:

  ${{ steps.setup-chrome.outputs.chrome-path }}

Configura la tua piattaforma

Una volta impostato CHROME_PATH, configura il tuo ambiente di test come segue.

WebdriverIO

Passa il percorso del binario dentro goog:chromeOptions nelle tue capacità di WebdriverIO.

Per il pacchetto standalone (wdioConfig()):

const browser = await remote(
  wdioConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID
    },
    capabilities: {
      browserName: 'chrome',
      'goog:chromeOptions': {
        binary: process.env.CHROME_PATH
      }
    }
  })
)

Per WDIO Testrunner (wdioTestRunner()):

export const config = wdioTestRunner({
  axe: {
    apiKey: ACCESSIBILITY_API_KEY,
    projectId: PROJECT_ID
  }
}, {
  capabilities: [{
    browserName: 'chrome',
    'goog:chromeOptions': {
      binary: process.env.CHROME_PATH
    }
  }]
})

WebDriverJS

Chiama prima webdriverConfig() per ottenere l'oggetto opzioni di Chrome, quindi imposta il percorso del binario prima di costruire il browser:

const chromeOptions = webdriverConfig({
  axe: {
    apiKey: ACCESSIBILITY_API_KEY,
    projectId: PROJECT_ID
  }
})
chromeOptions.setBinaryPath(process.env.CHROME_PATH)

const browser = await new Builder()
  .forBrowser('chrome')
  .setChromeOptions(chromeOptions)
  .build()

Java Selenium

Imposta il percorso del binario su ChromeOptions prima di chiamare watcher.configure():

AxeWatcherOptions options =
    new AxeWatcherOptions()
        .setApiKey(System.getenv("ACCESSIBILITY_API_KEY"))
        .setProjectId(System.getenv("PROJECT_ID"));
AxeWatcher watcher = new AxeWatcher(options);
ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.setBinary(System.getenv("CHROME_PATH"));
chromeOptions = watcher.configure(chromeOptions);
WebDriver wrappedDriver = watcher.wrapDriver(new ChromeDriver(chromeOptions));

Usa Microsoft Edge

Microsoft Edge è supportato con JavaScript/TypeScript e con Java Playwright; non è supportato con Java Selenium. Se Edge è già installato sulla macchina, non è necessario un download separato. Configura la tua piattaforma per lanciare Edge invece di Chrome per Test o Chromium.

WebdriverIO con Microsoft Edge

Imposta browserName su MicrosoftEdge nelle tue capacità di WebdriverIO.

Per il pacchetto standalone (wdioConfig()):

const browser = await remote(
  wdioConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID
    },
    capabilities: {
      browserName: 'MicrosoftEdge'
    }
  })
)

Per WDIO Testrunner (wdioTestRunner()):

export const config = wdioTestRunner({
  axe: {
    apiKey: ACCESSIBILITY_API_KEY,
    projectId: PROJECT_ID
  }
}, {
  capabilities: [{
    browserName: 'MicrosoftEdge'
  }]
})

WebDriverJS con Microsoft Edge

Costruisci il browser con MicrosoftEdge come browser di destinazione:

const browser = await new Builder()
  .forBrowser('MicrosoftEdge')
  .build()

Java Playwright con Microsoft Edge

Playwright lancia Edge tramite il suo canale msedge, quindi non è necessario un percorso binario separato. Imposta il canale su msedge nelle opzioni di lancio dopo aver chiamato watcher.configure():

AxeWatcherOptions options =
    new AxeWatcherOptions()
        .setApiKey(System.getenv("ACCESSIBILITY_API_KEY"))
        .setProjectId(System.getenv("PROJECT_ID"));
AxeWatcherPlaywright watcher = new AxeWatcherPlaywright(options);
BrowserType.LaunchPersistentContextOptions launchOptions =
    watcher.configure(new BrowserType.LaunchPersistentContextOptions().setChannel("msedge"));
launchOptions.setHeadless(false);
BrowserContext context =
    playwright.chromium().launchPersistentContext(userDataDir, launchOptions);
AxeWatcherPage page = watcher.wrapPage(context.newPage());