Instrucciones para WebDriverJS y TypeScript

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Configurando tus pruebas con WebDriverJS y TypeScript

Not for use with personal data
important

Axe Watcher requiere un navegador compatible ya instalado en su sistema: Chrome para pruebas (una instalación de navegador separada, diferente de Google Chrome), Chromium o Microsoft Edge. Google Chrome, versión 139 o posterior, no es compatible. Consulte Instalación y Configuración de Navegadores para Usar con Axe Watcher para obtener instrucciones de instalación y configuración.

  1. En el nivel raíz de tu carpeta de pruebas, instala el paquete @axe-core/watcher y todas sus dependencias usando npm o tu gestor de paquetes preferido (por ejemplo, yarn o pnpm).

    npm install --save-dev @axe-core/watcher

  2. En tu archivo o archivos de prueba, importa la función webdriverConfig(), la función wrapWebdriver() y la clase WebdriverController de @axe-core/watcher/webdriver:

    import {
  webdriverConfig,
  wrapWebdriver,
  WebdriverController
} from '@axe-core/watcher/webdriver'

  3. Actualiza tu código de configuración de prueba (típicamente en un bloque before o beforeAll), especificando las opciones de Chrome al instanciar tu instancia browser, proporcionando tu clave API:

    // Original code:
const browser = await new Builder()
  .forBrowser('chrome')
  .build()

// Becomes:
const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID
const SERVER_URL = process.env.SERVER_URL

const browser = await new Builder()
  .forBrowser('chrome')
  .setChromeOptions(
    webdriverConfig({
      axe: {
        apiKey: ACCESSIBILITY_API_KEY,
        projectId: PROJECT_ID,
        serverURL: SERVER_URL
      }
    }
  )
  .build()

    Asegúrate de configurar ACCESSIBILITY_API_KEY y PROJECT_ID en tu entorno con tu clave de API personal (que se encuentra en tu cuenta de Axe, pestaña API KEYS) y tu ID de proyecto (mostrado en la parte superior de estas instrucciones cuando creaste tu proyecto o disponible en la página de Proyectos eligiendo Configurar proyecto en Configuración). Si tu organización utiliza una instancia local, privada o en la nube regional de Axe Developer Hub, también configura SERVER_URL con la URL base de esa instancia (por ejemplo, https://axe-eu.deque.com); de lo contrario, omite SERVER_URL y se usará el https://axe.deque.com predeterminado.

  4. Crea una instancia del WebdriverController:

    const controller = new WebdriverController(browser)
    note

    Si habilita captura de pantalla (takeScreenshots: true), tenga en cuenta que WebdriverController no implementa la captura de pantalla en @axe-core/watcher 4.6.0. Para capturar capturas de pantalla, subclase WebdriverController, sobrescriba captureScreenshot() para llamar al método takeScreenshot() propio de Selenium y cree una instancia de su subclase en su lugar:

    class ScreenshotWebdriverController extends WebdriverController {
  async captureScreenshot() {
    return await this.driver.takeScreenshot()
  }
}

const controller = new ScreenshotWebdriverController(browser)

  5. Envuelve tu instancia browser con la función wrapWebdriver():

    browser = wrapWebdriver(browser, controller)

  6. Finalmente, asegúrese de que se eliminen todos los resultados de prueba de Axe Watcher. Para hacerlo, agregue el siguiente bloque de código a su código de finalización de pruebas (típicamente en un bloque afterEach):

    afterEach(async () => {
  await controller.flush()
})

Is this page helpful?

Help us improve this page

Still need help?