Einrichten und Konfigurieren von Browsern für die Verwendung mit Axe Watcher

Axe Watcher unterstützt die folgenden Browser:

• Google Chrome für Tests
• Chromium
• Microsoft Edge (JavaScript/TypeScript oder Java mit Playwright; nicht unterstützt mit Java Selenium)

Playwright und Puppeteer verwalten ihre eigenen Browserinstallationen: Sie laden immer eine Chromium-Version herunter, die Axe Watcher unterstützt, sodass Sie auf diesen Plattformen keinen Browser-Binärdatei selbst installieren müssen. WebdriverIO, WebDriverJS und Java Selenium verbinden sich dagegen mit einem bereits auf der Maschine installierten Browser, sodass Sie eine unterstützte Browser-Binärdatei selbst installieren und Ihre Testkonfiguration entsprechend anpassen müssen, wie in den untenstehenden Abschnitten beschrieben.

Chrome für Tests oder Chromium installieren

Wählen Sie eine der folgenden Installationsmethoden:

• Verwendung von npm: @puppeteer/browsers ist ein eigenständiges Browser-Download-Tool; es erfordert nicht, dass Puppeteer in Ihrem Projekt installiert ist. Um Chrome für Tests zu installieren, führen Sie folgendes aus:

  npx @puppeteer/browsers install chrome@stable

  Um stattdessen Chromium zu installieren, führen Sie aus:

  npx @puppeteer/browsers install chromium@latest

  Der Befehl gibt am Ende seiner Ausgabe den Pfad zur installierten Binärdatei aus, zum Beispiel:

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

  Setzen Sie die CHROME_PATH Umgebungsvariable auf diesen Pfad, bevor Sie Ihre Tests ausführen.

  important

  @puppeteer/browsers install lädt den Browser in ein Unterverzeichnis des aktuellen Arbeitsverzeichnisses herunter. Führen Sie den Befehl von einem Ort aus, an dem ein großer Download geeignet ist, und überlegen Sie, das resultierende Verzeichnis zu Ihrem .gitignore hinzuzufügen.

• Verwendung von GitHub Actions: Fügen Sie den folgenden Schritt zu Ihrer Workflow-Datei hinzu. Um Chrome für Tests zu installieren:

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

  Um stattdessen Chromium zu installieren, verwenden Sie latest für chrome-version:

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

  In beiden Fällen ist der Binärpfad aus der Ausgabe des Schritts verfügbar:

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

Plattform konfigurieren

Sobald CHROME_PATH gesetzt ist, konfigurieren Sie Ihr Testsetup wie folgt.

WebdriverIO

Pass the binary path inside goog:chromeOptions in your WebdriverIO capabilities.

Für den eigenständige Paket (wdioConfig()):

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

Für 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

Rufen Sie zuerst webdriverConfig() auf, um das Chrome-Options-Objekt zu erhalten, und setzen Sie dann den Binärpfad, bevor Sie den Browser aufbauen:

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

Setzen Sie den Binärpfad auf ChromeOptions, bevor Sie watcher.configure() aufrufen:

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

Verwenden Sie stattdessen Microsoft Edge

Microsoft Edge wird mit JavaScript/TypeScript und mit Java Playwright unterstützt; es wird nicht mit Java Selenium unterstützt. Wenn Edge bereits auf dem Rechner installiert ist, ist kein separater Download erforderlich. Konfigurieren Sie Ihre Plattform so, dass Edge anstelle von Chrome für Tests oder Chromium gestartet wird.

WebdriverIO mit Microsoft Edge

Setzen Sie browserName auf MicrosoftEdge in Ihren WebdriverIO-Fähigkeiten.

Für den eigenständige Paket (wdioConfig()):

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

Für WDIO Testrunner (wdioTestRunner()):

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

WebDriverJS mit Microsoft Edge

Bauen Sie den Browser mit MicrosoftEdge als Ziel-Browser auf:

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

Java Playwright mit Microsoft Edge

Playwright startet Edge über seinen msedge-Kanal, sodass kein separater Binärpfad erforderlich ist. Setzen Sie den Kanal auf msedge in den Startoptionen, nachdem Sie watcher.configure() aufgerufen haben:

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