Configurar e Configurar Navegadores para Uso com o Axe Watcher

O Axe Watcher suporta os seguintes navegadores:

• Google Chrome para Testes
• Chromium
• Microsoft Edge (JavaScript/TypeScript ou Java com Playwright; não é compatível com Java Selenium)

Playwright e Puppeteer gerenciam suas próprias instalações de navegador: eles sempre baixam uma versão do Chromium que o Axe Watcher suporta, então você não precisa instalar um binário de navegador por conta própria nessas plataformas. WebdriverIO, WebDriverJS e Java Selenium, por outro lado, se conectam a um navegador já instalado na máquina, portanto, você deve instalar um binário de navegador compatível por conta própria e apontar sua configuração de teste para ele, conforme abordado nas seções abaixo.

Instale o Chrome para Testes ou o Chromium

Escolha um dos seguintes métodos de instalação:

• Usando npm: @puppeteer/browsers é uma ferramenta independente de download de navegador; não requer que o Puppeteer esteja instalado em seu projeto. Para instalar o Chrome para Testes, execute:

  npx @puppeteer/browsers install chrome@stable

  Para instalar o Chromium, execute:

  npx @puppeteer/browsers install chromium@latest

  O comando imprime o caminho para o binário instalado ao final de sua saída, por exemplo:

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

  Defina a variável de ambiente CHROME_PATH para esse caminho antes de executar seus testes.

  important

  @puppeteer/browsers install faz o download do navegador em um subdiretório do diretório de trabalho atual. Execute o comando de um local onde um grande download seja apropriado e considere adicionar o diretório resultante ao seu .gitignore.

• Usando o GitHub Actions: Adicione a seguinte etapa ao seu arquivo de fluxo de trabalho. Para instalar o Chrome para Testes:

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

  Para instalar o Chromium, use latest para chrome-version:

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

  Em ambos os casos, o caminho do binário está disponível a partir da saída da etapa:

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

Configure Sua Plataforma

Uma vez que CHROME_PATH esteja definido, configure seu ambiente de teste da seguinte forma.

WebdriverIO

Passe o caminho do binário dentro de goog:chromeOptions em suas capacidades do WebdriverIO.

Para o autônomo (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

Chame webdriverConfig() primeiro para obter o objeto de opções do Chrome, depois defina o caminho do binário antes de construir o 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

Defina o caminho do binário em ChromeOptions antes de chamar 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));

Use o Microsoft Edge em Vez

O Microsoft Edge é compatível com JavaScript/TypeScript e com Java Playwright; não é compatível com Java Selenium. Se o Edge já estiver instalado na máquina, nenhum download separado é necessário. Configure sua plataforma para iniciar o Edge em vez do Chrome para Testes ou Chromium.

WebdriverIO com Microsoft Edge

Defina browserName para MicrosoftEdge em suas capacidades do WebdriverIO.

Para o autônomo (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 com Microsoft Edge

Construa o navegador com MicrosoftEdge como o navegador alvo:

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

Java Playwright com Microsoft Edge

O Playwright abre o Edge através de seu canal msedge, portanto, não é necessário um caminho de binário separado. Defina o canal para msedge nas opções de lançamento após chamar 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());