Controlla le tue scansioni

Per impostazione predefinita, in quella che è conosciuta come modalità automatica, axe Watcher determina automaticamente quando analizzare una pagina web (sia se visitata dalla tua suite di test sia in base a cambiamenti rilevati nel DOM della pagina). A volte, questa analisi automatica risulta in un comportamento che non è compatibile con gli obiettivi della tua organizzazione: analizzare troppe pagine (pagine di cui non ti importa o che appartengono ad altri dipartimenti della tua organizzazione). Puoi disattivare la modalità automatica, il che ti permetterà di determinare quando (o se) analizzare una pagina web (nota come modalità manuale).

Scenari

Scansione di parti di un sito web

Puoi usare la modalità manuale per scansionare solo una parte di un sito web. Per esempio, se il tuo team si occupa delle funzionalità del carrello sul tuo sito ma la tua suite di test deve visitare le pagine del catalogo (che non sono gestite dal tuo team) per aggiungere prodotti al carrello, probabilmente vorrai evitare di testare l'accessibilità delle pagine del catalogo. Una volta raggiunta la pagina del carrello nella tua suite di test, puoi riabilitare l'analisi automatica. Poi, quando i test sul carrello sono completi, puoi disabilitare nuovamente l'analisi automatica.

Prossimi Passi

• Disabilita Analisi Automatica nella Configurazione per evitare di testare le pagine del catalogo.
• Abilita Analisi Automatica per la tua pagina del carrello.
• Disabilita Analisi Automatica tramite una Chiamata alla fine del test della tua pagina del carrello per evitare che le pagine visitate dopo quella del carrello vengano testate.

Caricamento di Contenuto Dinamico

Puoi usare la modalità manuale per evitare di testare pagine con sequenze di caricamento complesse. Se la pagina che vuoi testare carica dinamicamente molte risorse in background, puoi disabilitare la modalità automatica fino a quando non è completamente caricata. Questo limiterà i problemi di accessibilità a quelli che esistono solo una volta che la pagina è completamente caricata. Impedirà anche controlli di accessibilità durante le animazioni di caricamento o altre interfacce di caricamento.

Prossimi Passi

• Disabilita Analisi Automatica nella Configurazione in modo che le animazioni di caricamento e le interfacce utente non siano testate per errori di accessibilità.
• Abilita Analisi Automatica per riprendere i test di accessibilità automatici una volta che la pagina è completamente caricata.

Catturare Stati Specifici della Pagina

Se vuoi assicurarti che uno specifico stato della pagina venga scansionato, puoi attivare manualmente un'analisi di accessibilità dopo aver configurato la tua pagina.

Prossimi Passi

• Disabilita Analisi Automatica nella Configurazione per impedire che l'analisi di accessibilità avvenga prima che la pagina sia nello stato richiesto.
• Analizza Manualmente le Pagine per testare lo stato specifico della pagina che ti interessa.

Limitare la Portata di una Grande Suite di Test

Disabilitando l'analisi automatica, puoi utilizzare una suite di test più grande e completa ma limitare i tuoi test di accessibilità solo a una parte di essa. In questo caso, non hai bisogno di suddividere la tua suite di test più grande in suite di test più piccole e testare l'accessibilità solo nelle suite che ti interessano.

Prossimi Passi

• Disabilita Analisi Automatica nella Configurazione per evitare che l'analisi automatica dell'accessibilità inizi all'inizio della tua suite di test.
• Abilita Analisi Automatica quando raggiungi la parte della tua suite di test che desideri testare.
• Disabilita Analisi Automatica tramite una Chiamata per disabilitare i test di accessibilità per parti della suite di test che non ti interessa testare per errori di accessibilità.

Come Usare la Modalità Manuale

Puoi disabilitare l'analisi automatica nella tua configurazione (vedi Disabilita Analisi Automatica nella Configurazione sotto).

L'analisi delle pagine è controllata da tre metodi sull'oggetto Controller o dai comandi equivalenti in Cypress.

1. analyze() (in Cypress: cy.axeWatcherAnalyze()) per eseguire un'analisi della pagina corrente.
2. start() (in Cypress: cy.axeWatcherStart()) per abilitare l'analisi automatica dell'accessibilità.
3. stop() (in Cypress: cy.axeWatcherStop()) per disabilitare l'analisi automatica dell'accessibilità.

Ottenere un Oggetto Controller

(JavaScript/TypeScript) Per informazioni su come ottenere un Controller oggetto, vedere il passo quattro della pagina delle istruzioni del vostro framework di test:

JavaScript:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

TypeScript:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

(Java) Per Java, vedere il passo tre della pagina delle istruzioni del framework di test. Il passo quattro mostra come fare il cast dell' wrappedDriver per chiamare il suo flush() metodo:

• Selenium

Cypress

(JavaScript/TypeScript) Per Cypress, è possibile utilizzare l'oggetto globale cy con questi comandi equivalenti:

Test di Playwright

(JavaScript/TypeScript) Per il test di Playwright, l' Controller oggetto (PlaywrightController) può essere ottenuto da page, che contiene un axeWatcher oggetto. È possibile utilizzare l' axeWatcher oggetto per invocare i Controller metodi (l'esempio sotto è in TypeScript):

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

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

Disabilitare l'Analisi Automatica nella Configurazione

È possibile disabilitare il test automatico dell'accessibilità

• (JavaScript/TypeScript) Impostando la proprietà autoAnalyze sull' oggetto di configurazione di axe a false.
• (Java) Chiamare il setAutoAnalyze() metodo con false.

(JavaScript/TypeScript) Ad esempio, imposti autoAnalyze su false nella tua configurazione (la riga è evidenziata nel campione di JavaScript di Cypress qui sotto):

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

Disabilitare l'Analisi Automatica tramite una Chiamata

Con Cypress, puoi usare il comando axeWatcherStop() :

cy.axeWatcherStop()

(JavaScript/TypeScript) Le altre integrazioni di test usano il metodo stop() sul tuo oggetto Controller:

await controller.stop()

(Java) Nella integrazione Java Watcher, usi il metodo AxeWatcherController.stop() .

Vedi Ottenere un Oggetto Controller per ulteriori informazioni su come ottenere un oggetto controller per il tuo framework di test.

Analizzare Manualmente le Pagine

Dopo aver disabilitato l'analisi automatica, puoi aggiungere chiamate a (JavaScript/TypeScript) axeWatcherAnalyze() (per Cypress) o analyze() (con le altre integrazioni di test). (Java) Per Java, usi il metodo AxeWatcherController.analyze()](wa-java-watchercontroller#analyze).

Ad esempio, per 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')
  })
})

Vedi Ottenere un Oggetto Controller per ulteriori informazioni su come ottenere un oggetto controller per il tuo framework di test.

Abilitare l'Analisi Automatica

Con Cypress, puoi usare il comando axeWatcherStart :

cy.axeWatcherStart()

Le altre integrazioni di test usano il metodo start sul tuo oggetto Controller:

await controller.start()

Vedi Ottenere un Oggetto Controller per ulteriori informazioni su come ottenere un oggetto controller per il tuo framework di test.

Eseguire Watcher Solo su Esecuzioni di Test Specifiche

I test end-to-end possono essere costosi in termini di tempo o di costi di cloud computing. Potresti non voler che Watcher analizzi le pagine a ogni commit o ogni esecuzione di test, ma solo quando desideri esplicitamente una scansione dell'accessibilità. Puoi gestire l'analisi tramite una variabile d'ambiente passando il valore della variabile a autoAnalyze. Questo ti offre due distinti comandi di test: uno senza analisi, e uno con analisi.

(JavaScript/TypeScript) Ad esempio, in una configurazione Cypress:

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

Aggiungi due script al tuo package.json, uno con la variabile impostata, uno senza:

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

Su Windows, usa cross-env per impostare variabili d'ambiente in modo cross-platform. Puoi scegliere qualsiasi nome per la variabile d'ambiente; ACCESSIBILITY_TESTING è solo un esempio.

Lo stesso approccio si applica ad altri framework di test JavaScript e TypeScript: leggi la variabile nel tuo file di configurazione e passa il suo valore booleano a autoAnalyze. (Java) Gli utenti Java possono passare il valore a setAutoAnalyze().

Vedi Anche

• (JavaScript/TypeScript) Per due esempi funzionanti di test in modalità manuale (per Cypress e Playwright), vedi i seguenti esempi nel watcher-examples repo su GitHub:
  • Per Cypress, vedi Modalità manuale di Cypress
  • Per Playwright, vedi Modalità manuale di Playwright