Configuración de navegadores para usar con Axe Watcher

Axe Watcher admite los siguientes navegadores:

• Google Chrome para Pruebas
• Chromium
• Microsoft Edge (JavaScript/TypeScript o Java con Playwright; no compatible con Java Selenium)

Playwright y Puppeteer gestionan sus propias instalaciones de navegadores: siempre descargan una versión de Chromium que Axe Watcher admite, por lo que no necesitas instalar un binario de navegador por ti mismo en esas plataformas. En cambio, WebdriverIO, WebDriverJS y Java Selenium se conectan a un navegador ya instalado en la máquina, por lo que debes instalar tú mismo un binario de navegador compatible y apuntar tu configuración de prueba a él, tal como se detalla en las siguientes secciones.

Instalar Chrome para Pruebas o Chromium

Elige uno de los siguientes métodos de instalación:

• Usando npm: @puppeteer/browsers es una herramienta de descarga de navegador independiente; no requiere que Puppeteer esté instalado en tu proyecto. Para instalar Chrome para Testing, ejecuta:

  npx @puppeteer/browsers install chrome@stable

  Para instalar Chromium en su lugar, ejecuta:

  npx @puppeteer/browsers install chromium@latest

  El comando imprime la ruta al binario instalado al final de su salida, por ejemplo:

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

  Establece la variable de entorno CHROME_PATH en esa ruta antes de ejecutar tus pruebas.

  important

  @puppeteer/browsers install descarga el navegador en un subdirectorio del directorio de trabajo actual. Ejecuta el comando desde un lugar donde una descarga grande sea apropiada, y considera agregar el directorio resultante a tu .gitignore.

• Usando GitHub Actions: Añade el siguiente paso a tu archivo de flujo de trabajo. Para instalar Chrome para Testing:

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

  Para instalar Chromium en su lugar, usa latest para chrome-version:

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

  En ambos casos, la ruta del binario está disponible desde la salida del paso:

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

Configurar tu plataforma

Una vez que CHROME_PATH esté configurado, configura tu entorno de prueba de la siguiente manera.

WebdriverIO

Pasa la ruta del binario dentro de goog:chromeOptions en tus capacidades de WebdriverIO.

Para la paquete independiente (wdioConfig()):

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

Para 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

Llama a webdriverConfig() primero para obtener el objeto de opciones de Chrome, luego establece la ruta del binario antes de construir el navegador:

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

Establece la ruta del binario en ChromeOptions antes de llamar a 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));

Usar Microsoft Edge en su lugar

Microsoft Edge es compatible con JavaScript/TypeScript y con Java Playwright; no es compatible con Java Selenium. Si Edge ya está instalado en la máquina, no se requiere una descarga separada. Configura tu plataforma para que inicie Edge en lugar de Chrome para Testing o Chromium.

WebdriverIO con Microsoft Edge

Configura browserName a MicrosoftEdge en tus capacidades de WebdriverIO.

Para la paquete independiente (wdioConfig()):

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

Para WDIO Testrunner (wdioTestRunner()):

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

WebDriverJS con Microsoft Edge

Construye el navegador con MicrosoftEdge como el navegador objetivo:

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

Java Playwright con Microsoft Edge

Playwright lanza Edge a través de su canal msedge, por lo que no se necesita una ruta de binario separada. Establece el canal a msedge en las opciones de lanzamiento después de llamar a 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());