Configuración de navegadores para usar con Axe Watcher

Axe Watcher admite los siguientes navegadores:

• Google Chrome para Pruebas
• Chromium
• Microsoft Edge (con Java Selenium, Microsoft Edge requiere Watcher 4.5.1 o posterior y Selenium 4 o posterior; con WebdriverIO, Microsoft Edge requiere Watcher 4.6.0 o posterior)

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 cada integración de Axe Watcher, con sujeción a las versiones mínimas señaladas a continuación. Si Edge ya está instalado en el equipo, no se requiere una descarga por separado. Configure su plataforma para iniciar Edge en lugar de Chrome para pruebas 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 Selenium con Microsoft Edge

Use EdgeOptions y EdgeDriver en lugar de ChromeOptions y ChromeDriver. No se necesita CHROME_PATH: Selenium lanza la instalación de Edge que encuentra en la máquina, y Selenium Manager (Selenium 4.6 y posterior) descarga automáticamente un msedgedriver correspondiente. En versiones anteriores de Selenium 4, coloque un msedgedriver que coincida con su versión instalada de Edge en su 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));

Para iniciar una instalación de Edge que no esté en la ubicación predeterminada, llame a setBinary() en su EdgeOptions antes de watcher.configure(); configure() conserva la ruta binaria que usted establece:

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

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