Steuern der Seitenanalyse

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

• Automatische Analyse in der Konfiguration deaktivieren , um das Testen der Katalogseiten zu vermeiden.
• Automatische Analyse aktivieren für Ihre Warenkorbseite.
• Automatische Analyse per Anruf deaktivieren am Ende des Tests Ihrer Warenkorbseite, um zu verhindern, dass Seiten, die nach der Warenkorbseite besucht werden, getestet werden.

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

• Automatische Analyse in der Konfiguration deaktivieren damit die Ladeanimationen und die Benutzeroberfläche nicht auf Zugänglichkeitsfehler getestet werden.
• Automatische Analyse aktivieren , um die automatische Zugänglichkeitsprüfung fortzusetzen, sobald die Seite vollständig geladen ist.

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

• Automatische Analyse in der Konfiguration deaktivieren , um zu verhindern, dass die Barrierefreiheitsanalyse durchgeführt wird, bevor die Seite den gewünschten Zustand aufweist.
• Seiten manuell analysieren , um den spezifischen Seitenzustand zu testen, der Sie interessiert.

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

• Automatische Analyse in der Konfiguration deaktivieren , um zu verhindern, dass die automatische Zugänglichkeitsanalyse zu Beginn Ihrer Testsuite gestartet wird.
• Automatische Analyse aktivieren , wenn Sie den Teil Ihrer Testsuite erreichen, den Sie testen möchten.
• Automatische Analyse per Anruf deaktivieren , um die Zugänglichkeitstests für Teile der Testsuite zu deaktivieren, die Sie nicht auf Zugänglichkeitsfehler testen möchten.

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:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

TypeScript:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

Cypress

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

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:

• Für Cypress siehe Cypress manueller-Modus
• Informationen zum Playwright finden Sie unter [Playwright manueller-Modus].(https://github.com/dequelabs/watcher-examples/tree/main/playwright/manual-mode)

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