Kontrollieren Sie Ihre Scans

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

Der manuelle Modus von Watcher ermöglicht es Ihnen, auszuwählen, wann oder welche Seiten Ihrer Website auf Barrierefreiheit untersucht werden.

Not for use with personal data

Standardmäßig bestimmt Axe Watcher in dem, was als automatischer Modus bekannt ist, automatisch, wann eine Webseite analysiert werden soll (ob sie von Ihrer Test-Suite besucht wird oder basierend auf erkannten Änderungen am DOM der Seite). Manchmal führt diese automatische Analyse zu einem Verhalten, das nicht mit den Zielen Ihrer Organisation kompatibel ist: Es werden zu viele Seiten analysiert (Seiten, die für Sie nicht relevant sind oder Seiten, die anderen Abteilungen Ihrer Organisation gehören). Sie können den automatischen Modus deaktivieren, wodurch es Ihnen ermöglicht wird, selbst zu bestimmen, wann (oder ob) eine Webseite analysiert werden soll (bekannt als manueller Modus).

Szenarien

Teile einer Website scannen

Sie können den manuellen Modus verwenden, um nur einen Teil einer Website zu scannen. Wenn Ihr Team beispielsweise für die Einkaufswagen-Funktionalität auf Ihrer Seite verantwortlich ist, aber Ihre Test-Suite Katalogseiten besuchen muss (die nicht Ihrem Team gehören), um Produkte in den Einkaufswagen zu legen, möchten Sie wahrscheinlich die Barrierefreiheit der Katalogseiten nicht testen. Sobald Sie in Ihrer Test-Suite die Einkaufswagenseite erreicht haben, können Sie die automatische Analyse wieder aktivieren. Und wenn die Tests für den Einkaufswagen abgeschlossen sind, können Sie die automatische Analyse erneut deaktivieren.

Nächste Schritte

Dynamisches Laden von Inhalten

Sie können den manuellen Modus verwenden, um den Test von Seiten mit komplexen Ladeabläufen zu vermeiden. Wenn die Seite, die Sie testen möchten, viele Ressourcen im Hintergrund dynamisch lädt, können Sie den automatischen Modus deaktivieren, bis sie vollständig geladen ist. Dies begrenzt Barrierefreiheitsprobleme auf diejenigen, die nur dann existieren, wenn die Seite vollständig geladen ist. Es würde auch verhindern, dass während Ladeanimationen oder anderen Lade-UI Barrierefreiheitsprüfungen durchgeführt werden.

Nächste Schritte

Spezifische Seitenzustände erfassen

Wenn Sie sicherstellen möchten, dass ein bestimmter Seitenzustand gescannt wird, können Sie eine Barrierefreiheitsanalyse manuell ausführen, nachdem Sie Ihre Seite eingerichtet haben.

Nächste Schritte

Einschränkung des Umfangs einer großen Test-Suite

Durch das Deaktivieren der automatischen Analyse können Sie eine größere, umfassendere Test-Suite verwenden, aber Ihre Barrierefreiheitsprüfungen auf nur einen Teil davon beschränken. In diesem Fall müssen Sie Ihre größere Test-Suite nicht in kleinere aufteilen und die Barrierefreiheit nur in den Test-Suiten prüfen, die Sie interessieren.

Nächste Schritte

Wie man den manuellen Modus verwendet

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

Die Seitenanalyse wird von drei Methoden auf dem Controller-Objekt oder den entsprechenden Befehlen in Cypress gesteuert.

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

Ein Controller-Objekt erhalten

(JavaScript/TypeScript) Für Informationen, wie Sie ein Controller Objekt erhalten, siehe Schritt vier der Anleitungsseite Ihres Testframeworks:

JavaScript:

TypeScript:

(Java) Für Java finden Sie weitere Informationen in Schritt drei auf der Anleitungsseite des Testframeworks. Schritt vier zeigt, wie man das wrappedDriver aufruft, um seine flush()-Methode zu verwenden:

Cypress

(JavaScript/TypeScript) Für Cypress können Sie das globale cy-Objekt mit diesen gleichwertigen Befehlen verwenden:

Controllermethode Cypress-Befehl
analyse() axeWatcherAnalyze()
flush() axeWatcherFlush()
start() axeWatcherStart()
stop() axeWatcherStop()

Playwright Test

(JavaScript/TypeScript) Für Playwright Test kann das Controller-Objekt (PlaywrightController) aus page bezogen werden, das ein axeWatcher-Objekt enthält. Sie können das axeWatcher-Objekt verwenden, um die Controller-Methoden aufzurufen (das untenstehende Beispiel ist in TypeScript):

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

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

Automatische Analyse in der Konfiguration deaktivieren

Sie können die automatische Barrierefreiheitstests deaktivieren, indem Sie

(JavaScript/TypeScript) Zum Beispiel setzen Sie autoAnalyze auf false in Ihrer Konfiguration (die Zeile ist im untenstehenden Cypress-JavaScript-Beispiel hervorgehoben):

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

const API_KEY = process.env.API_KEY
const PROJECT_ID = process.env.PROJECT_ID

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

Deaktivierung der automatischen Analyse über einen Aufruf

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

cy.axeWatcherStop()

(JavaScript/TypeScript) Die anderen Testintegrationen verwenden die stop()-Methode auf Ihrem Controller-Objekt:

await controller.stop()

(Java) In der Java Watcher-Integration verwenden Sie die AxeWatcherController.stop()-Methode.

Siehe Ein Controller-Objekt erhalten für weitere Informationen darüber, wie Sie ein Controller-Objekt für Ihr Testframework erhalten.

Seiten manuell analysieren

Nachdem Sie die automatische Analyse deaktiviert haben, können Sie Aufrufe zu (JavaScript/TypeScript) axeWatcherAnalyze() (für Cypress) oder analyze() (mit den anderen Testintegrationen) hinzufügen. (Java) Für Java verwenden Sie die AxeWatcherController.analyze()-Methode.

Zum Beispiel für 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')
  })
})

Siehe Ein Controller-Objekt erhalten für weitere Informationen darüber, wie Sie ein Controller-Objekt für Ihr Testframework erhalten.

Automatische Analyse aktivieren

Mit Cypress können Sie den axeWatcherStart-Befehl verwenden:

cy.axeWatcherStart()

Die anderen Testintegrationen verwenden die start-Methode auf Ihrem Controller-Objekt:

await controller.start()

Siehe Ein Controller-Objekt erhalten für weitere Informationen darüber, wie Sie ein Controller-Objekt für Ihr Testframework erhalten.

Watcher nur bei bestimmten Testruns ausführen

End-to-End-Tests können zeitaufwendig oder kostspielig in Bezug auf Cloud-Computing sein. Sie möchten vielleicht nicht, dass Watcher bei jedem Commit oder jedem Testrun Seiten analysiert, sondern nur, wenn Sie explizit einen Accessibility-Scan wünschen. Sie können die Analyse über eine Umgebungsvariable steuern, indem Sie den Wert der Variablen an autoAnalyze übergeben. Dies gibt Ihnen zwei verschiedene Testbefehle: einen ohne Analyse und einen mit.

(JavaScript/TypeScript) Zum Beispiel in einer Cypress-Konfiguration:

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

const API_KEY = process.env.API_KEY
const PROJECT_ID = process.env.PROJECT_ID
const ACCESSIBILITY_TESTING = process.env.ACCESSIBILITY_TESTING === 'true'

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

Fügen Sie zwei Skripte zu Ihrem package.json hinzu, eines mit gesetzter Variablen und eines ohne:

{
  "scripts": {
    "test:e2e": "cypress run",
    "test:e2e:accessibility": "ACCESSIBILITY_TESTING=true cypress run"
  }
}

Unter Windows verwenden Sie cross-env, um Umgebungsvariablen plattformübergreifend zu setzen. Sie können jeden beliebigen Namen für die Umgebungsvariable wählen; ACCESSIBILITY_TESTING ist nur ein Beispiel.

Der gleiche Ansatz gilt für andere JavaScript- und TypeScript-Testframeworks: Lesen Sie die Variable in Ihrer Konfigurationsdatei und übergeben Sie ihren booleschen Wert an autoAnalyze. (Java) Java-Nutzer können den Wert an setAutoAnalyze() übergeben.

note

Dieser Ansatz steuert, ob Watcher Seiten analysiert, nicht ob Watcher initialisiert wird. Ein Teil der Watcher-Einrichtung erfolgt weiterhin in Ihrer Testumgebung, unabhängig vom Wert der Umgebungsvariable.

Siehe auch

Is this page helpful?

Help us improve this page

Still need help?