Configuration et Paramétrage des Navigateurs pour Axe Watcher

Axe Watcher prend en charge les navigateurs suivants :

• Google Chrome pour les tests
• Chromium
• Microsoft Edge (JavaScript/TypeScript ou Java avec Playwright ; non pris en charge avec Java Selenium)

Playwright et Puppeteer gèrent leurs propres installations de navigateur : ils téléchargent toujours une version de Chromium que Axe Watcher prend en charge, donc vous n'avez pas besoin d'installer vous-même un binaire navigateur sur ces plateformes. WebdriverIO, WebDriverJS, et Java Selenium se connectent plutôt à un navigateur déjà installé sur la machine, donc vous devez installer vous-même un binaire navigateur compatible et l'indiquer dans votre configuration de test, comme décrit dans les sections ci-dessous.

Installer Chrome pour les tests ou Chromium

Choisissez l'une des méthodes d'installation suivantes :

• Utilisation de npm : @puppeteer/browsers est un outil de téléchargement de navigateur autonome ; il n'est pas nécessaire d'installer Puppeteer dans votre projet. Pour installer Chrome pour les tests, exécutez :

  npx @puppeteer/browsers install chrome@stable

  Pour installer Chromium à la place, exécutez :

  npx @puppeteer/browsers install chromium@latest

  La commande imprime le chemin vers l'exécutable installé à la fin de son output, par exemple :

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

  Définissez la variable d'environnement CHROME_PATH sur ce chemin avant de lancer vos tests.

  important

  @puppeteer/browsers install télécharge le navigateur dans un sous-dossier du répertoire de travail actuel. Exécutez la commande depuis un endroit où un téléchargement volumineux est approprié, et envisagez d'ajouter le répertoire résultant à votre .gitignore.

• Utilisation de GitHub Actions : Ajoutez l'étape suivante à votre fichier de flux de travail. Pour installer Chrome pour les tests :

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

  Pour installer Chromium à la place, utilisez latest pour chrome-version :

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

  Dans les deux cas, le chemin du binaire est disponible à partir de la sortie de l'étape :

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

Configurer votre plateforme

Une fois que CHROME_PATH est défini, configurez votre environnement de test comme suit.

WebdriverIO

Passez le chemin binaire dans goog:chromeOptions dans vos capacités WebdriverIO.

Pour le package autonome (wdioConfig()) :

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

Pour 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

Appelez d'abord webdriverConfig() pour obtenir l'objet des options Chrome, puis définissez le chemin binaire avant de construire le navigateur :

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

Définissez le chemin binaire sur ChromeOptions avant d'appeler 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));

Utiliser Microsoft Edge à la place

Microsoft Edge est pris en charge avec JavaScript/TypeScript et avec Java Playwright ; il n'est pas pris en charge avec Java Selenium. Si Edge est déjà installé sur la machine, aucun téléchargement supplémentaire n'est nécessaire. Configurez votre plateforme pour lancer Edge au lieu de Chrome pour les tests ou Chromium.

WebdriverIO avec Microsoft Edge

Définissez browserName sur MicrosoftEdge dans vos capacités WebdriverIO.

Pour le package autonome (wdioConfig()) :

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

Pour WDIO Testrunner (wdioTestRunner()) :

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

WebDriverJS avec Microsoft Edge

Construisez le navigateur avec MicrosoftEdge comme navigateur cible :

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

Java Playwright avec Microsoft Edge

Playwright lance Edge via son canal msedge, donc aucun chemin binaire séparé n'est nécessaire. Définissez le canal sur msedge dans les options de lancement après avoir appelé 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());