Controlla i Tuoi Scansioni

Per impostazione predefinita, in quello che viene chiamato modalità automatica, Axe Watcher determina automaticamente quando analizzare una pagina web (che sia visitata dalla vostra suite di test o basata su modifiche rilevate al DOM della pagina). A volte, questa analisi automatica comporta un comportamento che non è compatibile con gli obiettivi della vostra organizzazione: analizzare troppe pagine (pagine che non vi interessano o pagine che appartengono ad altri dipartimenti nella vostra organizzazione). È possibile disattivare la modalità automatica, il che vi permetterà di decidere quando (o se) analizzare una pagina web (conosciuta come modalità manuale).

Scenari

Scansionare Parti di un Sito Web

Puoi utilizzare la modalità manuale per scansionare solo una parte di un sito web. Ad esempio, se il tuo team si occupa della funzionalità del carrello sul tuo sito ma il tuo suite di test deve visitare le pagine del catalogo (che non sono di competenza del tuo team) per aggiungere prodotti al carrello, probabilmente vuoi evitare di testare l'accessibilità delle pagine del catalogo. Una volta raggiunta la pagina del carrello nel tuo suite di test, puoi riattivare l'analisi automatica. Poi, quando i test sul carrello sono completati, puoi disattivare nuovamente l'analisi automatica.

Prossimi Passi

• Disabilitare l'Analisi Automatica nella Configurazione per evitare di testare le pagine del catalogo.
• Abilitare l'Analisi Automatica per la tua pagina del carrello.
• Disabilitare l'Analisi Automatica tramite una Chiamata alla fine del test della tua pagina del carrello per impedire che le pagine visitate dopo la pagina del carrello vengano testate.

Caricamento di Contenuti Dinamico

Puoi utilizzare 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 disattivare la modalità automatica fino a che non è completamente caricata. Questo limiterà i problemi di accessibilità a quelli che esistono solo quando la pagina è completamente caricata. Eviterà inoltre controlli di accessibilità durante le animazioni di caricamento o altre interfacce di caricamento.

Prossimi Passi

• Disabilitare l'Analisi Automatica nella Configurazione affinché le animazioni di caricamento e l'interfaccia utente non vengano testate per errori di accessibilità.
• Abilitare l'Analisi Automatica per riprendere il test automatico di accessibilità una volta che la pagina è completamente caricata.

Catturare Stati Specifici della Pagina

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

Prossimi Passi

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

Limitare l'Ambito di un Grande Suite di Test

Disattivando l'analisi automatica, puoi utilizzare un suite di test più ampio e completo ma limitare la tua analisi di accessibilità solo a una parte di esso. In questo caso, non è necessario suddividere il tuo grande suite di test in suite di test più piccoli e testare l'accessibilità solo nei suite di test che ti interessano.

Prossimi Passi

• Disabilitare l'Analisi Automatica nella Configurazione per evitare che l'analisi automatica di accessibilità inizi all'inizio del tuo suite di test.
• Abilitare l'Analisi Automatica quando raggiungi la parte del tuo suite di test che desideri testare.
• Disabilitare l'Analisi Automatica tramite una Chiamata per disattivare la verifica di accessibilità per le parti del suite di test che non ti interessa testare per errori di accessibilità.

Come Usare la Modalità Manuale

Puoi disattivare l'analisi automatica nella tua configurazione (vedi Disabilitare l'Analisi Automatica nella Configurazione di seguito).

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 attivare l'analisi automatica dell'accessibilità.
3. stop() (in Cypress: cy.axeWatcherStop()) per disattivare l'analisi automatica dell'accessibilità.

Ottenere un Oggetto Controller

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

JavaScript:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

TypeScript:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

(Java) Per Java, vedi passo tre nella pagina delle istruzioni del framework di test. Passo quattro mostra come eseguire il cast di wrappedDriver per chiamare il suo metodo flush():

• Selenium

Cypress

(JavaScript/TypeScript) Per Cypress, puoi usare l'oggetto globale cy con questi comandi equivalenti:

Playwright Test

(JavaScript/TypeScript) Per Playwright Test, l'oggetto Controller (PlaywrightController) può essere ottenuto da page, che contiene un oggetto axeWatcher. Puoi usare l'oggetto axeWatcher per invocare i metodi Controller (l'esempio seguente è 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

Puoi disabilitare il test di accessibilità automatico

• (JavaScript/TypeScript) Setting the autoAnalyze property on the oggetto di configurazione axe to false.
• (Java) Chiamando il metodo setAutoAnalyze() con false.

(JavaScript/TypeScript) Ad esempio, imposti autoAnalyze su false nella tua configurazione (la linea è evidenziata nell'esempio di JavaScript di Cypress 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().

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

Consulta 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()

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

Eseguire Watcher Solo su Test Specifici

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

(JavaScript/TypeScript) Ad esempio, in una configurazione di 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. Gli utenti di 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 repository watcher-esempi su GitHub:
  • Per Cypress, vedi Cypress modalità-manuale
  • Per Playwright, vedi Playwright modalità-manuale