Beheer je Scans

Standaard, in wat bekend staat als automatische modus, bepaalt axe Watcher automatisch wanneer een webpagina moet worden geanalyseerd (of deze nu wordt bezocht door je testpakket of op basis van gedetecteerde wijzigingen in de DOM van de pagina). Soms resulteert deze automatische analyse in gedrag dat niet compatibel is met de doelen van je organisatie: het analyseren van te veel pagina's (pagina's die je niet interesseren of pagina's die tot andere afdelingen binnen je organisatie behoren). Je kunt de automatische modus uitschakelen, zodat je zelf kunt bepalen wanneer (of of) een webpagina moet worden geanalyseerd (bekend als handmatige modus).

Scenario's

Delen van een Website Scannen

Je kunt de handmatige modus gebruiken om slechts een deel van een website te scannen. Bijvoorbeeld, als je team verantwoordelijk is voor de winkelwagenfunctionaliteit op je site maar je testpakket cataloguspagina's moet bezoeken (die niet bij je team horen) om producten aan de winkelwagen toe te voegen, wil je waarschijnlijk voorkomen dat de toegankelijkheid van de cataloguspagina's wordt getest. Zodra je de winkelwagenpagina in je testpakket hebt bereikt, kun je de automatische analyse weer inschakelen. Daarna, wanneer de winkelwagentests zijn voltooid, kun je de automatische analyse weer uitschakelen.

Volgende Stappen

• Automatische Analyse Uitschakelen in Configuratie om te voorkomen dat de cataloguspagina's worden getest.
• Automatische Analyse Inschakelen voor je winkelwagenpagina.
• Automatische Analyse Uitschakelen via een Oproep aan het eind van het testen van je winkelwagenpagina om te voorkomen dat pagina's die na de winkelwagenpagina worden bezocht, worden getest.

Dynamisch Laden van Inhoud

Je kunt de handmatige modus gebruiken om te voorkomen dat pagina's met complexe laadsequenties worden getest. Als de pagina die je wilt testen dynamisch veel bronnen op de achtergrond laadt, kun je de automatische modus uitschakelen totdat deze volledig is geladen. Dit beperkt toegankelijkheidsproblemen tot die welke enkel bestaan wanneer de pagina volledig is geladen. Het voorkomt ook toegankelijkheidscontroles tijdens laadanimaties of andere laadelementen.

Volgende Stappen

• Automatische Analyse Uitschakelen in Configuratie zodat de laadanimaties en UI niet worden getest op toegankelijkheidsfouten.
• Automatische Analyse Inschakelen om de automatische toegankelijkheidstest te hervatten zodra de pagina volledig is geladen.

Specifieke Pagina Toestanden Vangen

Als je ervoor wilt zorgen dat een specifieke paginatoestand wordt gescand, kun je handmatig een toegankelijkheidsanalyse starten nadat je de pagina hebt ingesteld.

Volgende Stappen

• Automatische Analyse Uitschakelen in Configuratie om te voorkomen dat er toegankelijkheidsanalyses plaatsvinden voordat de pagina zich in de door jou gewenste toestand bevindt.
• Pagina's Handmatig Analyseren om de specifieke paginatoestand te testen waarin je geïnteresseerd bent.

Bereik van een Grote Test Suite Beperken

Door de automatische analyse uit te schakelen, kun je een grotere, uitgebreidere test-suite gebruiken, maar je toegankelijkheidstests beperken tot slechts een deel ervan. In dit geval hoef je je grotere test-suite niet op te splitsen in kleinere test-suites en alleen toegankelijkheid te testen in de test-suites die je belangrijk vindt.

Volgende Stappen

• Automatische Analyse Uitschakelen in Configuratie om te voorkomen dat de automatische toegankelijkheidsanalyse aan het begin van je test-suite start.
• Automatische Analyse Inschakelen wanneer je het deel van je test-suite bereikt dat je wilt testen.
• Automatische Analyse Uitschakelen via een Oproep om de toegankelijkheidstests uit te schakelen voor delen van de test-suite die je niet wilt testen op toegankelijkheidsfouten.

Hoe Handmatige Modus te Gebruiken

Je kunt de automatische analyse uitschakelen in je configuratie (zie Automatische Analyse Uitschakelen in Configuratie hieronder).

Paginanalyse wordt bestuurd door drie methoden op het Controller object of de equivalente commando's in Cypress.

1. analyze() (in Cypress: cy.axeWatcherAnalyze()) om een analyse van de huidige pagina uit te voeren.
2. start() (in Cypress: ", "context": "paragraph cy.axeWatcherStart()) om automatische toegankelijkheidsanalyse mogelijk te maken.", "context": "paragraph
3. stop() (in Cypress: ", "context": "paragraph cy.axeWatcherStop()) om automatische toegankelijkheidsanalyse uit te schakelen.", "context": "paragraph

Een Controller-object verkrijgen", "context": "heading level 3

(JavaScript/TypeScript) Voor informatie over het verkrijgen van een ", "context": "paragraph Controller object, zie ", "context": "paragraph stap vier", "context": "strong text van de instructiepagina van uw testframework:", "context": "paragraph

JavaScript", "context": "strong text:", "context": "paragraph

• Playwright", "context": "link text
• Puppeteer", "context": "link text
• WebdriverIO", "context": "link text
• WebdriverIO TestRunner", "context": "link text
• WebDriverJS", "context": "link text

TypeScript", "context": "strong text:", "context": "paragraph

• Playwright", "context": "link text
• Puppeteer", "context": "link text
• WebdriverIO", "context": "link text
• WebdriverIO TestRunner", "context": "link text
• WebDriverJS", "context": "link text

(Java) Voor Java, zie ", "context": "paragraph stap drie", "context": "strong text van de instructiepagina van het testframework. ", "context": "paragraph Stap vier", "context": "strong text laat zien hoe u de ", "context": "paragraph wrappedDriver kunt casten om zijn ", "context": "paragraph flush() methode aan te roepen:", "context": "paragraph

• Selenium", "context": "link text

Cypress", "context": "heading level 4

(JavaScript/TypeScript) Voor Cypress kunt u het globale ", "context": "paragraph cy object gebruiken met deze equivalente commando's:", "context": "paragraph

Playwright Test", "context": "heading level 4

(JavaScript/TypeScript) Voor Playwright Test kan het ", "context": "paragraph Controller object (", "context": "paragraphPlaywrightController) verkregen worden uit ", "context": "paragraph page, dat een ", "context": "paragraph axeWatcher object bevat. U kunt het ", "context": "paragraph axeWatcher object gebruiken om de ", "context": "paragraph Controller methodes aan te roepen (het onderstaande voorbeeld is in TypeScript):", "context": "paragraph

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

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

Automatische Analyse Uitschakelen in Configuratie", "context": "heading level 3

U kunt automatische toegankelijkheidstesten uitschakelen door", "context": "paragraph

• (JavaScript/TypeScript) De ", "context": "paragraph autoAnalyze eigenschap in te stellen op het ", "context": "paragraph axe configuratie-object", "context": "link text naar ", "context": "paragraph false.
• (Java) Het aanroepen van de setAutoAnalyze() methode met false.

(JavaScript/TypeScript) Bijvoorbeeld, u stelt autoAnalyze in op false in uw configuratie (de regel is gemarkeerd in het onderstaande Cypress JavaScript-voorbeeld):

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 Uitschakelen via een Oproep

Met Cypress kunt u de axeWatcherStop() opdracht gebruiken:

cy.axeWatcherStop()

(JavaScript/TypeScript) De andere testintegraties gebruiken de stop() methode op uw Controller-object:

await controller.stop()

(Java) In de Java Watcher-integratie gebruikt u de AxeWatcherController.stop() methode.

Zie Verkrijgen van een Controller Object voor meer informatie over het verkrijgen van een controller-object voor uw testframework.

Paginas Handmatig Analyseren

Nadat u automatische analyse heeft uitgeschakeld, kunt u oproepen toevoegen aan (JavaScript/TypeScript) axeWatcherAnalyze() (voor Cypress) of analyze() (met de andere testintegraties). (Java) Voor Java gebruikt u de AxeWatcherController.analyze()](wa-java-watchercontroller#analyze) methode.

Bijvoorbeeld, voor 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')
  })
})

Zie Verkrijgen van een Controller Object voor meer informatie over het verkrijgen van een controller-object voor uw testframework.

Automatische Analyse Inschakelen

Met Cypress kunt u de axeWatcherStart opdracht gebruiken:

cy.axeWatcherStart()

De andere testintegraties gebruiken de start methode op uw Controller-object:

await controller.start()

Zie Verkrijgen van een Controller Object voor meer informatie over het verkrijgen van een controller-object voor uw testframework.

Watcher Alleen op Specifieke Testuitvoeringen Laten Draaien

End-to-end tests kunnen kostbaar zijn in tijd of cloud-computerkosten. Het is mogelijk dat u niet wilt dat Watcher pagina's analyseert bij elke commit of elke testrun, maar alleen wanneer u expliciet een toegankelijkheidsscan wilt. U kunt analyse afschermen met een omgevingsvariabele door de waarde van de variabele door te geven aan autoAnalyze. Dit geeft u twee verschillende testopdrachten: één zonder analyse en één met.

(JavaScript/TypeScript) Bijvoorbeeld, in een Cypress-configuratie:

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

Voeg twee scripts toe aan uw package.json, één met de variabele ingesteld, één zonder:

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

Op Windows gebruikt u cross-env om omgevingsvariabelen op een platformonafhankelijke manier in te stellen. U kunt elke naam voor de omgevingsvariabele kiezen; ACCESSIBILITY_TESTING is slechts een voorbeeld.

Dezelfde aanpak geldt voor andere JavaScript- en TypeScript-testframeworks: lees de variabele in uw configuratiebestand en geef de booleaanse waarde door aan autoAnalyze. (Java) Java-gebruikers kunnen de waarde doorgeven aan setAutoAnalyze().

Zie Ook

• (JavaScript/TypeScript) Voor twee werkende voorbeelden van tests in handmatige modus (voor Cypress en Playwright), zie de volgende voorbeelden in de watcher-voorbeelden repository op GitHub:
  • Voor Cypress, zie Cypress handmatige modus
  • Voor Playwright, zie Playwright handmatige modus