Browsers instellen en configureren voor gebruik met Axe Watcher

Axe Watcher ondersteunt de volgende browsers:

• Google Chrome voor Testing
• Chromium
• Microsoft Edge (met Java Selenium vereist Microsoft Edge Watcher 4.5.1 of later en Selenium 4 of later; met WebdriverIO vereist Microsoft Edge Watcher 4.6.0 of later)

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 bij elke Axe Watcher-integratie, onderhevig aan de minimale versies die hieronder worden vermeld. Als Edge al op de machine is geïnstalleerd, is geen aparte download nodig. Configureer je platform om Edge te starten in plaats van Chrome voor testen 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 Selenium met Microsoft Edge

Gebruik EdgeOptions en EdgeDriver in plaats van ChromeOptions en ChromeDriver. Geen CHROME_PATH is nodig: Selenium start de Edge-installatie die het op de machine vindt, en Selenium Manager (Selenium 4.6 en later) downloadt automatisch een bijpassende msedgedriver. Bij eerdere versies van Selenium 4 plaatst u een msedgedriver die overeenkomt met uw geïnstalleerde Edge-versie op uw 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));

Om een Edge-installatie te starten die niet op de standaardlocatie staat, roept u setBinary() op uw EdgeOptions aan voordat watcher.configure(); configure() behoudt het binaire pad dat u instelt:

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

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