Instruções para WebDriverJS e 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 seus testes com WebDriverJS e TypeScript

Not for use with personal data
important

O Axe Watcher requer um navegador compatível já instalado em seu sistema: Chrome para Testes (uma instalação de navegador separada, distinta do Google Chrome), Chromium ou Microsoft Edge. O Google Chrome, versão 139 ou posterior, não é compatível. Veja Configurar e Preparar Navegadores para Uso com Axe Watcher para instruções de instalação e configuração.

  1. No nível raiz da sua pasta de testes, instale o pacote @axe-core/watcher e todas as suas dependências usando o npm ou seu gerenciador de pacotes preferido (por exemplo, yarn ou pnpm).

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

  2. No seu arquivo ou arquivos de teste, importe a função webdriverConfig(), a função wrapWebdriver() e a classe WebdriverController de @axe-core/watcher/webdriver:

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

  3. Atualize o código de configuração do seu teste (normalmente em um bloco before ou beforeAll), especificando as opções do Chrome ao instanciar sua instância browser, fornecendo sua chave de API:

    // Original code:
let 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

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

    Certifique-se de configurar ACCESSIBILITY_API_KEY e PROJECT_ID no seu ambiente com sua chave de API pessoal (encontrada na sua Conta Axe, aba **API KEYS**) e o ID do seu projeto (mostrado no topo destas instruções quando você criou seu projeto ou disponível na página de Projetos escolhendo **Configurar projeto** em **Configurações**). Se sua organização usar uma instância regional, nuvem privada ou local do Axe Developer Hub, também configure SERVER_URL com a URL base dessa instância (por exemplo, https://axe-eu.deque.com); caso contrário, omita SERVER_URL e o padrão https://axe.deque.com será utilizado.

  4. Crie uma instância do WebdriverController:

    const controller = new WebdriverController(browser)
    note

    Se você ativar captura de tela (takeScreenshots: true), note que WebdriverController não implementa captura de captura de tela no @axe-core/watcher 4.6.0. Para capturar capturas de tela, subclasse WebdriverController, mantenha sua própria referência à instância Selenium WebDriver, substitua captureScreenshot() para retornar o resultado do takeScreenshot() desse driver, e instancie sua subclasse em vez disso:

    import type { WebDriver } from 'selenium-webdriver'

class ScreenshotWebdriverController extends WebdriverController {
  #screenshotDriver: WebDriver

  constructor(driver: WebDriver) {
    super(driver)
    this.#screenshotDriver = driver
  }

  async captureScreenshot(): Promise<string> {
    return await this.#screenshotDriver.takeScreenshot()
  }
}

const controller = new ScreenshotWebdriverController(browser)

  5. Envolva sua instância browser com a função wrapWebdriver():

    browser = wrapWebdriver(browser, controller)

  6. Por fim, certifique-se de que todos os resultados de teste do Axe Watcher sejam eliminados. Para fazer isso, adicione o seguinte bloco de código ao seu código de desmontagem de teste (normalmente em um bloco afterEach):

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

Is this page helpful?

Help us improve this page

Still need help?