Browsers instellen en configureren voor gebruik met Axe Watcher

Axe Watcher ondersteunt de volgende browsers:

• Google Chrome voor Testing
• Chromium
• Microsoft Edge (JavaScript/TypeScript of Java met Playwright; niet ondersteund met Java Selenium)

Playwright en Puppeteer beheren hun eigen browserinstallaties: ze downloaden altijd een Chromium-versie die Axe Watcher ondersteunt, dus u hoeft op die platforms zelf geen browser te installeren. WebdriverIO, WebDriverJS en Java Selenium maken daarentegen verbinding met een browser die al op de machine is geïnstalleerd, dus u moet zelf een ondersteunde browser installeren en uw testconfiguratie daarop richten, zoals besproken in de onderstaande secties.

Installeer Chrome voor Testing of Chromium

Kies een van de volgende installatiemethoden:

• Gebruik van npm: @puppeteer/browsers is een zelfstandig downloadhulpmiddel voor browsers; het vereist niet dat Puppeteer in uw project is geïnstalleerd. Om Chrome voor Testing te installeren, voert u het volgende uit:

  npx @puppeteer/browsers install chrome@stable

  Om Chromium in plaats daarvan te installeren, voer uit:

  npx @puppeteer/browsers install chromium@latest

  Het commando geeft aan het einde van de uitvoer het pad naar de geïnstalleerde binary weer, bijvoorbeeld:

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

  Stel de CHROME_PATH-omgevingsvariabele in op dat pad voordat u uw tests uitvoert.

  important

  @puppeteer/browsers install downloadt de browser naar een subdirectory van de huidige werkdirectory. Voer het commando uit op een locatie waar een grote download geschikt is, en overweeg de resulterende directory toe te voegen aan uw .gitignore.

• Gebruik van GitHub Actions: Voeg de volgende stap toe aan uw workflowbestand. Om Chrome voor Testing te installeren:

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

  Om in plaats daarvan Chromium te installeren, gebruik latest voor chrome-version:

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

  In beide gevallen is het binary pad beschikbaar vanuit de uitvoer van de stap:

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

Configureer Uw Platform

Wanneer CHROME_PATH is ingesteld, configureert u uw testopstelling als volgt.

WebdriverIO

Geef het binaire pad door in goog:chromeOptions in uw WebdriverIO-mogelijkheden.

Voor de standalone pakket (wdioConfig()):

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

Voor 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

Roep eerst webdriverConfig() aan om het Chrome-optieobject te krijgen, stel dan het binaire pad in voordat u de browser bouwt:

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

Stel het binaire pad in op ChromeOptions voordat u watcher.configure() aanroept:

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

Gebruik in plaats daarvan Microsoft Edge

Microsoft Edge wordt ondersteund met JavaScript/TypeScript en met Java Playwright; het wordt niet ondersteund met Java Selenium. Als Edge al op de machine is geïnstalleerd, is geen aparte download vereist. Configureer uw platform om Edge te starten in plaats van Chrome voor Testing of Chromium.

WebdriverIO met Microsoft Edge

Stel browserName in op MicrosoftEdge in uw WebdriverIO-mogelijkheden.

Voor de standalone pakket (wdioConfig()):

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

Voor WDIO Testrunner (wdioTestRunner()):

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

WebDriverJS met Microsoft Edge

Bouw de browser met MicrosoftEdge als doelbrowser:

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

Java Playwright met Microsoft Edge

Playwright start Edge via zijn msedge kanaal, dus er is geen apart binair pad nodig. Stel het kanaal in op msedge in de opstartopties na het aanroepen van 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());