Controllo dell'analisi della pagina

Di solito, axe Developer Hub analizza automaticamente ogni pagina visitata dalla tua suite di test (nota come modalità automatica). A volte, questa analisi automatica fa sì che vengano analizzate troppe pagine, pagine che non ti interessano o pagine che appartengono ad altri reparti della tua organizzazione (pagine sulle quali il tuo team non ha alcuna responsabilità). È possibile disattivare la modalità automatica, in modo da stabilire quando (o se) analizzare ogni pagina (nota come modalità manuale).

Scenari

Scansione di parti di un sito web

È possibile utilizzare la modalità manuale per analizzare solo una parte di un sito web. Ad esempio, se il tuo team è proprietario della funzionalità del carrello degli acquisti sul tuo sito, ma la tua suite di test deve visitare le pagine del catalogo (di cui il tuo team non è proprietario) per aggiungere prodotti al carrello, probabilmente vorrai evitare di testare l'accessibilità delle pagine del catalogo. Una volta raggiunta la pagina del carrello nella suite di test, puoi riattivare l'analisi automatica. Una volta completati i test del carrello, potrai disattivare nuovamente l'analisi automatica.

Prossimi passi

• Disabilita analisi automatica nella configurazione per evitare di testare le pagine del catalogo.
• Abilita l'analisi automatica per la pagina del carrello della spesa.
• Disattiva l'analisi automatica tramite una chiamata al termine del test della pagina del carrello, per evitare che vengano testate anche le pagine visitate successivamente.

Caricamento di contenuti dinamici

È possibile 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 finché non viene caricata completamente. In questo modo i problemi di accessibilità saranno limitati a quelli che si presentano solo dopo il caricamento completo della pagina. Impedirebbe inoltre i controlli di accessibilità durante il caricamento delle animazioni o di altre interfacce utente di caricamento.

Prossimi passi

• Disabilita analisi automatica nella configurazione in modo che le animazioni di caricamento e l'interfaccia utente non vengano testate per errori di accessibilità.
• Abilita analisi automatica per riprendere i test di accessibilità automatici una volta che la pagina è completamente caricata.

Acquisizione di stati di pagina specifici

Se vuoi assicurarti che venga analizzato uno specifico stato della pagina , puoi avviare manualmente un'analisi dell'accessibilità dopo aver configurato la pagina.

Prossimi passi

• Disabilita analisi automatica nella configurazione per evitare che l'analisi dell'accessibilità venga eseguita prima che la pagina sia nello stato richiesto.
• Analizza manualmente le pagine per testare lo stato specifico della pagina a cui sei interessato.

Limitazione dell'ambito di una suite di test di grandi dimensioni

Disattivando l'analisi automatica, puoi utilizzare una suite di test più ampia e completa, ma limitare i test di accessibilità a una sola parte di essa. In questo caso, non è necessario suddividere la suite di test più grande in suite di test più piccole, ma testare l'accessibilità solo nelle suite di test che interessano.

Prossimi passi

• Disabilita Analisi Automatica nella Configurazione per impedire che l'analisi automatica dell'accessibilità venga avviata all'inizio della suite di test.
• Abilita Analisi Automatica quando raggiungi la parte della suite di test che desideri testare.
• Disabilita Analisi Automatica tramite Chiamata per disabilitare i test di accessibilità per le parti della suite di test su cui non si desidera testare errori di accessibilità.

Come utilizzare la modalità manuale

È possibile disattivare l'analisi automatica nella configurazione (vedere Disattivare l'Analisi Automatica nella Configurazione di seguito).

L'analisi della pagina è 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

Per informazioni su come ottenere un oggetto Controller , vedere il passaggio quattro della pagina delle istruzioni del framework di test:

JavaScript:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

TypeScript:

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

Cypress

Per Cypress, puoi utilizzare l'oggetto globale cy con questi comandi equivalenti:

Playwright Test

Per Playwright Test, l'oggetto Controller (PlaywrightController) può essere ottenuto dalla Page, che contiene un oggetto axeWatcher . È possibile utilizzare l'oggetto axeWatcher per richiamare 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

Quando hai modificato la suite di test per aggiungere test di accessibilità, hai dovuto creare un oggetto di configurazione axe . Puoi disattivare i test di accessibilità automatici impostando autoAnalyze su false nel tuo oggetto axe .

Ad esempio, puoi impostare autoAnalyze su false nella tua configurazione (la riga è evidenziata nell'esempio JavaScript di Cypress qui sotto):

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

Disabilitare l'analisi automatica tramite una chiamata

Con Cypress, puoi usare il comando axeWatcherStop() :

cy.axeWatcherStop()

Le altre integrazioni di test utilizzano il metodo stop() sull'oggetto Controller:

await controller.stop()

Per ulteriori informazioni su come ottenere un oggetto controller per il framework di test, vedere [Ottenimento di un oggetto controller].(#obtaining-a-controller-object)

Analizza manualmente le pagine

Dopo aver disabilitato l'analisi automatica, puoi aggiungere chiamate a axeWatcherAnalyze() (per Cypress) o analyze() (con le altre integrazioni di test). Ad esempio, 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')
  })
})

Per ulteriori informazioni su come ottenere un oggetto controller per il framework di test, vedere [Ottenimento di un oggetto controller].(#obtaining-a-controller-object)

Abilita analisi automatica

Con Cypress, puoi usare il comando axeWatcherStart :

cy.axeWatcherStart()

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

await controller.start()

Per ulteriori informazioni su come ottenere un oggetto controller per il framework di test, vedere [Ottenimento di un oggetto controller].(#obtaining-a-controller-object)

Vedere anche

• Per due esempi funzionanti di test in modalità manuale (per Cypress e Playwright), vedere i seguenti esempi nel repository watcher-examples su GitHub:
  • Per Cypress, vedere Cypress modalità manuale
  • Per Playwright, vedere Modalità manuale Playwright
• Nel Riferimento API puoi trovare informazioni di riferimento su tutte le API fornite dal pacchetto @axe-core/watcher.