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 Ihnen zu bestimmen, wann oder welche Seiten Ihrer Website auf Barrierefreiheitsprobleme geprüft werden

Not for use with personal data

Standardmäßig, in dem, was als automatischer Modusbezeichnet wird, bestimmt axe Watcher automatisch, wann eine Webseite analysiert werden soll (entweder wenn 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 übereinstimmt: Es werden zu viele Seiten analysiert (Seiten, die für Sie nicht relevant sind oder die zu anderen Abteilungen Ihrer Organisation gehören). Sie können den automatischen Modus deaktivieren, wodurch Sie bestimmen können, 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 den Warenkorb Ihrer Website verantwortlich ist, aber Ihre Test-Suite Katalogseiten (die nicht Ihrem Team gehören) besuchen muss, um Produkte in den Warenkorb zu legen, möchten Sie wahrscheinlich die Barrierefreiheit der Katalogseiten nicht testen. Sobald Sie die Warenkorbseite in Ihrer Test-Suite erreicht haben, können Sie die automatische Analyse wieder aktivieren. Wenn die Warenkorbbtests 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 Seiten mit komplexen Ladeabläufen nicht zu testen. Wenn die Seite, die Sie testen möchten, dynamisch viele Ressourcen im Hintergrund lädt, können Sie den automatischen Modus deaktivieren, bis sie vollständig geladen ist. Dadurch werden Barrierefreiheitsprobleme auf diejenigen beschränkt, die nur dann existieren, wenn die Seite vollständig geladen ist. Es verhindert auch die Barrierefreiheitsprüfungen während Ladeanimationen oder anderer Lade-Oberflächen.

Nächste Schritte

Erfassung bestimmter Seitenzustände

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

Nächste Schritte

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

Indem Sie die automatische Analyse deaktivieren, können Sie eine größere, umfassendere Test-Suite verwenden, aber Ihre Barrierefreiheitsprüfung auf nur einen Teil davon beschränken. In diesem Fall müssen Sie Ihre größere Test-Suite nicht in kleinere Test-Suites aufteilen und die Barrierefreiheit nur in den Test-Suites testen, die Sie interessieren.

Nächste Schritte

Wie man den manuellen Modus verwendet

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

Die Seitenanalyse wird durch drei Methoden am 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.

Abrufen eines Controller-Objekts

(JavaScript/TypeScript) Für Informationen zum Abrufen eines Controller -Objekts siehe Schritt vier auf der Anleitungsseite Ihres Test-Frameworks:

JavaScript:

TypeScript:

(Java) Für Java siehe Schritt drei auf der Anleitungsseite des Test-Frameworks. Schritt vier zeigt, wie man den wrappedDriver , um seine flush() -Methode aufzurufen:

Cypress

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

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

Playwright Test

(JavaScript/TypeScript) Für Playwright Test kann das Controller -Objekt (PlaywrightController) von pagebezogen werden, das ein axeWatcher -Objekt enthält. Sie können das axeWatcher -Objekt verwenden, um die Controller -Methoden aufzurufen (Beispiel unten 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

Sie können die automatische Barrierefreiheitsprüfung deaktivieren, indem Sie

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

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

Automatische Analyse durch einen Aufruf deaktivieren

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

cy.axeWatcherStop()

(JavaScript/TypeScript) Die anderen Test-Integrationen verwenden die stop() -Methode in Ihrem Controller-Objekt:

await controller.stop()

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

Siehe Beschaffung eines Controller-Objekts für weitere Informationen zum Erhalten eines Controller-Objekts für Ihr Test-Framework.

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 Test-Integrationen) 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 Beschaffung eines Controller-Objekts für weitere Informationen zum Erhalten eines Controller-Objekts für Ihr Test-Framework.

Automatische Analyse aktivieren

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

cy.axeWatcherStart()

Die anderen Test-Integrationen verwenden die start -Methode in Ihrem Controller-Objekt:

await controller.start()

Siehe Beschaffung eines Controller-Objekts für weitere Informationen zum Erhalten eines Controller-Objekts für Ihr Test-Framework.

Watcher nur bei bestimmten Testläufen ausführen

End-to-End-Tests können zeitaufwändig oder kostspielig hinsichtlich Cloud-Computing sein. Möglicherweise möchten Sie nicht, dass Watcher bei jedem Commit oder jedem Testlauf Seiten analysiert, sondern nur dann, wenn Sie ausdrücklich einen Barrierefreiheitsscan wünschen. Sie können die Analyse hinter einer Umgebungsvariable verstecken, indem Sie den Wert der Variablen an autoAnalyzeübergeben. Dies gibt Ihnen zwei unterschiedliche Testbefehle: einen ohne Analyse und einen mit Analyse.

(JavaScript/TypeScript) Beispielsweise 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 Ihrer package.jsonhinzu, eines mit gesetzter Variable, 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 festzulegen. Sie können einen beliebigen Namen für die Umgebungsvariable wählen; ACCESSIBILITY_TESTING ist nur ein Beispiel.

Der gleiche Ansatz gilt für andere JavaScript- und TypeScript-Test-Frameworks: 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. Einige Watcher-Einstellungen erfolgen weiterhin in Ihrer Testumgebung, unabhängig vom Wert der Umgebungsvariable.

Siehe auch

Is this page helpful?

Help us improve this page

Still need help?