Steuern der Seitenanalyse

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

Im manuellen Modus von Watcher können Sie auswählen, wann und welche Seiten Ihrer Website auf Barrierefreiheitsprobleme analysiert werden.

Not for use with personal data

Normalerweise analysiert der axe Developer Hub automatisch jede von Ihrer Testsuite besuchte Seite (bekannt als automatischer Modus). Manchmal führt diese automatische Analyse dazu, dass zu viele Seiten analysiert werden, Seiten, deren Analyse für Sie nicht wichtig ist, oder Seiten, die anderen Abteilungen in Ihrer Organisation gehören – Seiten, für die Ihr Team keine Verantwortung trägt – analysiert werden. Sie können den automatischen Modus deaktivieren, sodass Sie bestimmen, wann (oder ob) jede Seite analysiert werden soll (bekannt als manueller Modus).

Szenarien

Teile einer Website durchsuchen

Sie können den manuellen Modus verwenden, um nur einen Teil einer Website zu scannen. Wenn Ihr Team beispielsweise für die Warenkorbfunktion auf Ihrer Site verantwortlich ist, Ihre Testsuite jedoch Katalogseiten (die nicht Ihrem Team gehören) besuchen muss, um Produkte in den Warenkorb zu legen, möchten Sie wahrscheinlich nicht die Zugänglichkeit der Katalogseiten testen. Sobald Sie die Warenkorbseite in Ihrer Testsuite erreicht haben, können Sie die automatische Analyse wieder aktivieren. Anschließend können Sie nach Abschluss der Warenkorbtests die automatische Analyse wieder deaktivieren.

Nächster Schritt

Dynamisches Laden von Inhalten

Sie können den manuellen Modus verwenden, um das Testen von Seiten mit komplexen Ladesequenzen zu vermeiden. Wenn die Seite, die Sie testen möchten, viele Ressourcen dynamisch im Hintergrund lädt, können Sie den automatischen Modus deaktivieren, bis die Seite vollständig geladen ist. Dadurch werden die Zugänglichkeitsprobleme auf diejenigen beschränkt, die erst auftreten, wenn die Seite vollständig geladen ist. Es würde auch Zugänglichkeitsprüfungen während des Ladens von Animationen oder anderen Lade-Benutzeroberflächen verhindern.

Nächster Schritt

Erfassen bestimmter Seitenzustände

Wenn Sie sicherstellen möchten, dass ein bestimmter Seitenstatus gescannt wird, können Sie nach dem Einrichten Ihrer Seite manuell eine Barrierefreiheitsprüfung starten.

Nächster Schritt

Begrenzung des Umfangs einer großen Testsuite

Durch Deaktivieren der automatischen Analyse können Sie eine größere, umfassendere Testsuite verwenden, Ihre Zugänglichkeitstests jedoch auf nur einen Teil davon beschränken. In diesem Fall müssen Sie Ihre größere Testsuite nicht in kleinere Testsuites aufteilen und können die Zugänglichkeit nur in den Testsuites testen, die für Sie wichtig sind.

Nächster Schritt

So verwenden Sie den manuellen Modus

Sie können die automatische Analyse in Ihrer Konfiguration deaktivieren (siehe Automatische Analyse in der Konfiguration deaktivieren unten).

Die Seitenanalyse wird durch drei Methoden auf dem Controller -Objekt oder die entsprechenden Befehle in Cypress gesteuert.

  1. analyze() (in Cypress: cy.axeWatcherAnalyze()), um eine Analyse der aktuellen Seite durchzuführen.
  2. start() (in Cypress: cy.axeWatcherStart()), um eine automatische Zugänglichkeitsanalyse zu aktivieren.
  3. stop() (in Cypress: cy.axeWatcherStop()), um die automatische Zugänglichkeitsanalyse zu deaktivieren.

Abrufen eines Controller-Objekts

Informationen zum Abrufen eines Controller Objekts finden Sie in Schritt vier auf der Anleitungsseite Ihres Test-Frameworks:

JavaScript:

TypeScript:

Cypress

Für Cypress können Sie das globale cy -Objekt mit diesen entsprechenden Befehlen verwenden:

Controller-Methode Cypress-Befehl
analysieren() axeWatcherAnalyze()
flush() axeWatcherFlush()
start() axeWatcherStart()
stop() axeWatcherStop()

Playwright Test

Für den Playwright-Test kann das Controller -Objekt (PlaywrightController) von der Seite abgerufen werden, die ein axeWatcher -Objekt enthält. Sie können das axeWatcher -Objekt verwenden, um die Controller -Methoden aufzurufen (das folgende Beispiel ist in TypeScript):

import { test, expect } from './fixtures'

test('example test', async ({ page }) => {
  await page.goto('https://example.com')
  await page.axeWatcher.analyze()
})

Deaktivieren der automatischen Analyse in der Konfiguration

Als Sie Ihre Testsuite geändert haben, um Barrierefreiheitstests hinzuzufügen, mussten Sie ein axe Konfigurationsobjekt erstellen. Sie können die automatische Prüfung der Barrierefreiheit deaktivieren, indem Sie in Ihrem (dh-api-reference#autoanalyze) [axe] Objekt [autoAnalyze] auf false(dh-api-reference#axeconfiguration-interface) setzen.

Beispielsweise setzen Sie autoAnalyze in Ihrer Konfiguration auf false (die Zeile ist im Cypress JavaScript-Beispiel unten hervorgehoben):

const { defineConfig } = require('cypress');
const { cypressConfig } = require('@axe-core/watcher');

const API_KEY = process.env.API_KEY

module.exports = defineConfig(  
  cypressConfig({
    axe: {
      apiKey: API_KEY,
      autoAnalyze: false    },
    // Your existing Cypress configuration code here
  })
);

Deaktivieren der automatischen Analyse über einen Aufruf

Mit Cypress können Sie den Befehl axeWatcherStop() verwenden:

cy.axeWatcherStop()

Die anderen Testintegrationen verwenden die Methode stop() für Ihr Controller-Objekt:

await controller.stop()

Weitere Informationen zum Abrufen eines Controller-Objekts für Ihr Test-Framework finden Sie unter Abrufen eines Controller-Objekts .

Seiten manuell analysieren

Nachdem Sie die automatische Analyse deaktiviert haben, können Sie Aufrufe von axeWatcherAnalyze() (für Cypress) oder analyze() (mit den anderen Testintegrationen) hinzufügen. Beispielsweise in Cypress:

describe('My Login Application', () => {
  it('should login with valid credentials', () => {
    cy.visit('https://the-internet.herokuapp.com/login')
      // Analyze the page.
      .axeWatcherAnalyze()      .get('#username')
      .type('tomsmith')
      .get('#password')
      .type('SuperSecretPassword!')
      .get('button[type="submit"]')
      .click()
      .wait(1000)
      // Analyze the page.
      .axeWatcherAnalyze()      // Restart automatic axe analysis.
      .axeWatcherStart()
      .get('#flash')
      .should('exist')
  })
})

Weitere Informationen zum Abrufen eines Controller-Objekts für Ihr Test-Framework finden Sie unter Abrufen eines Controller-Objekts .

Automatische Analyse aktivieren

Mit Cypress können Sie den Befehl axeWatcherStart verwenden:

cy.axeWatcherStart()

Die anderen Testintegrationen verwenden die startmethode für Ihr Controller-Objekt:

await controller.start()

Weitere Informationen zum Abrufen eines Controller-Objekts für Ihr Test-Framework finden Sie unter Abrufen eines Controller-Objekts .

Siehe auch

– Zwei funktionierende Beispiele für Tests im manuellen Modus (für Cypress und Playwright) finden Sie in den folgenden Beispielen im watcher-examples -Repository auf GitHub:

– In der API-Referenz finden Sie Referenzinformationen zu allen APIs, die vom Paket @axe-core/watcher bereitgestellt werden.

Is this page helpful?

Help us improve this page

Still need help?