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 (avec Java Selenium, Microsoft Edge nécessite Watcher 4.5.1 ou une version ultérieure et Selenium 4 ou une version ultérieure; avec WebdriverIO, Microsoft Edge nécessite Watcher 4.6.0 ou une version ultérieure)

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 chaque intégration Axe Watcher, sous réserve des versions minimales notées ci-dessous. Si Edge est déjà installé sur la machine, aucun téléchargement séparé n'est requis. 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 Selenium avec Microsoft Edge

Utilisez EdgeOptions et EdgeDriver à la place de ChromeOptions et ChromeDriver. Aucun CHROME_PATH n'est nécessaire : Selenium lance l'installation d'Edge qu'il trouve sur la machine, et Selenium Manager (Selenium 4.6 et versions ultérieures) télécharge automatiquement un msedgedriver correspondant. Sur les versions antérieures de Selenium 4, placez un msedgedriver qui correspond à votre version d'Edge installée sur votre PATH.

AxeWatcherOptions options =
    new AxeWatcherOptions()
        .setApiKey(System.getenv("ACCESSIBILITY_API_KEY"))
        .setProjectId(System.getenv("PROJECT_ID"));
AxeWatcher watcher = new AxeWatcher(options);
EdgeOptions edgeOptions = new EdgeOptions();
edgeOptions = watcher.configure(edgeOptions);
WebDriver wrappedDriver = watcher.wrapDriver(new EdgeDriver(edgeOptions));

Pour lancer une installation d'Edge qui n'est pas dans l'emplacement par défaut, appelez setBinary() sur votre EdgeOptions avant watcher.configure() ; configure() préserve le chemin binaire que vous avez défini :

EdgeOptions edgeOptions = new EdgeOptions();
edgeOptions.setBinary(System.getenv("EDGE_PATH"));
edgeOptions = watcher.configure(edgeOptions);

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());