Riferimento API per la versione JavaScript e TypeScript di Watcher

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Il riferimento API per il pacchetto @axe-core/watcher

Not for use with personal data

Questa guida di riferimento descrive le API fornite dal pacchetto @axe-core/watcher (anche chiamato Axe Watcher o semplicemente Watcher) per JavaScript e TypeScript.

Interfaccia AxeConfiguration

La proprietà axe (un parametro passato a funzioni di configurazione) è il metodo usuale per modificare il tuo AxeConfiguration affinché Axe Watcher configuri i test di accessibilità. Le seguenti proprietà sono contenute in AxeConfiguration:

Nome Tipo Obbligatorio Descrizione
apiKey string (contenente un UUID) La tua chiave segreta personale dell'API.
autoAnalyze boolean no Se Watcher eseguirà automaticamente un'analisi dell'accessibilità sulla tua pagina. Il valore predefinito è true.
buildID string no Il valore predefinito è null, il quale è raccomandato per esecuzioni di test a processo singolo (non parallelizzati). Per esecuzioni di test in parallelo, tutti i lavoratori dovrebbero avere la stessa stringa buildID non nulla.
configurationOverrides ConfigurationOverrides no Permette di sovrascrivere sovrascrivere le impostazioni di configurazione globale.
elementInternals boolean no Abilita il supporto ElementInternals per elementi personalizzati. Quando true, Watcher raccoglie i ruoli ARIA e le proprietà impostate tramite l'API ElementInternals, riducendo i falsi positivi su pagine che utilizzano elementi personalizzati con attachInternals(). Richiede la versione 4.12.0 o successiva di axe-core. Il valore predefinito è false.
excludeUrlPatterns string[] no Esclude gli URL che corrispondono ai pattern minimatch specificati dall'essere sottoposti a scansione.
git `boolean GitConfig` no Controlla la raccolta di metadati Git. Il valore predefinito è true (rilevazione automatica). Impostare su false per disabilitare, o fornire un oggetto GitConfig per fornire metadati espliciti.
projectId string (contenente un UUID) L'ID del progetto per ricevere i risultati delle esecuzioni di test di Watcher.
runContext axe.ElementContext no Passato ad axe-core.
runOptions RunOptions no Passato ad axe-core.
serverURL string no Il server Axe Developer Hub a cui inviare i risultati. Impostare questo parametro se la tua organizzazione utilizza un'istanza regionale, cloud privato o distribuzione on-premises. Il valore predefinito è https://axe.deque.com.
sessionId string no Deprecato. L'ID sessione di questa istanza. È improbabile che sarà necessario modificare questo valore. Si veda invece buildId.
testingTypes string[] no Per l'uso con Cypress per specificare test di componenti o e2e (o entrambi)
timeout Timeouts no Un oggetto Timeouts che rappresenta i millisecondi fino al timeout e fallimento dei metodi specificati Controller.

apiKey

(Obbligatorio) Il valore apiKey è una delle due proprietà (apiKey e projectId) che devono essere impostate nel tuo AxeConfiguration. Puoi ottenere il suo valore dalla Pagina Gestione Chiavi API .

axe: {
  apiKey: process.env.AXE_DEVELOPER_HUB_API_KEY
}

autoAnalyze

(Facoltativo) Imposta questo valore su false per impedire che le pagine vengano analizzate automaticamente. Per maggiori informazioni sulla modalità manuale, vedere Controlla le Tuo Scansioni.

axe: {
  autoAnalyze: false
}

buildID

(Facoltativo) La proprietà buildID, quando non è null, consente ai runner di test paralleli di generare risultati che appaiono come un singolo test su axe Developer Hub. In caso di esecuzioni di test paralleli, ogni runner di test dovrebbe condividere la stessa stringa buildID non nulla, il che fa sì che ogni esecuzione di test concatenizzi i suoi risultati con i risultati esistenti per la stessa buildID e lo SHA del commit Git. Tuttavia, quando buildID è null, più esecuzioni di test sovrascrivono risultati esistenti che hanno lo stesso SHA del commit Git.

Vedi Esecuzione di Test in Parallelo per ulteriori informazioni su come utilizzare buildID con vari provider di integrazione continua.

axe: {
  buildID: process.env.CI_BUILD_ID
}

configurationOverrides

(Facoltativo) Sovrascrive i valori impostati in configurazione globale. Vedi Interfaccia ConfigurationOverrides per maggiori informazioni.

axe: {
  configurationOverrides: {
    accessibilityStandard: 'WCAG 2.2 AA',
    bestPractices: true
  }
}

elementInternals

important

Il supporto di ElementInternals è sperimentale in axe-core e soggetto a modifiche. Vedi documentazione axe-core ElementInternals per le limitazioni attuali e lo stato dello sviluppo.

(Facoltativo) Quando true, Watcher raccoglie i ruoli ARIA e le proprietà impostate tramite l'API ElementInternals da elementi personalizzati che utilizzano attachInternals(). Questo riduce i falsi positivi su pagine che utilizzano elementi personalizzati per componenti interattivi. Richiede la versione 4.12.0 o successiva di axe-core.

axe: {
  elementInternals: true
}

excludeUrlPatterns

(Facoltativo) Impedisce che qualsiasi URL che corrisponde a uno dei modelli minimatch nell'array excludeUrlPatterns venga analizzato.

axe: {
  excludeUrlPatterns: [ 'https://*.example.com/**', 'https://example.org/**' ]
}

In Escludi URL dall'Analisi puoi trovare una tabella di URL e modelli di esempio per verificare le corrispondenze.

git

(Opzionale) Controlla come Watcher raccoglie i metadati Git per l'esecuzione del test corrente. Accetta uno dei tre valori:

  • true (predefinito): Watcher raccoglie automaticamente informazioni Git (branch, SHA del commit, autore e altri campi) utilizzando il binario Git locale.
  • false: Disabilita tutta la raccolta di metadati Git. Usalo quando operi in ambienti senza Git o quando la raccolta di dati Git non è necessaria.
  • Un oggetto GitConfig: Fornisce metadati Git espliciti e salta completamente la rilevazione automatica. Qualsiasi campo omesso predefinisce a null. Usalo quando i tuoi test sono eseguiti in un repository separato dal repository sotto test, o in ambienti CI dove la rilevazione automatica di Git è inaffidabile.

Vedi Fornitura di Metadati Git per maggiori informazioni.

L'oggetto GitConfig ha i seguenti campi:

Campo Tipo Gitful Descrizione
branch string Nome del branch corrente
commitAuthor string no Nome visualizzato dell'autore. Se omesso, l'autore appare come non disponibile in Axe Developer Hub.
commitEmail string no Indirizzo email dell'autore.
commitMessage string no Messaggio completo del commit. Se omesso, il messaggio del commit appare come non disponibile in Axe Developer Hub.
commitSha string Hash del commit completo o abbreviato
defaultBranch string no Nome del branch predefinito (ad es. main). Senza questo campo, Axe Developer Hub non può identificare quale branch è predefinito, quindi i confronti dei branch delle funzionalità contro il branch predefinito non saranno disponibili.
isDirty boolean no true se esistono modifiche non consolidate. Il valore predefinito è false quando omesso.
tag string no Tag corrente (ad es. v1.2.3)
url string URL remoto del repository

branch, commitSha e url sono i campi gitful: una sessione inviata senza tutti e tre viene registrata come gitless e salvata, ma Axe Developer Hub passa alla vista della sessione gitless, dove il branch e la cronologia dei commit delle sessioni precedenti non saranno visibili. Inviare una sessione successiva con tutti e tre i campi ripristina la vista gitful. Se sono presenti solo uno o due dei tre, Axe Watcher elimina tutti i campi gitful, registra la sessione come gitless e include un avviso nella risposta.

Esempio di utilizzo delle variabili d'ambiente CI per fornire metadati Git espliciti:

axe: {
  apiKey: process.env.AXE_DEVELOPER_HUB_API_KEY,
  projectId: process.env.AXE_PROJECT_ID,
  git: {
    commitSha: process.env.GIT_COMMIT,
    branch: process.env.GIT_BRANCH,
    url: process.env.GIT_URL,
    commitAuthor: process.env.GIT_AUTHOR_NAME,
    commitEmail: process.env.GIT_AUTHOR_EMAIL,
    commitMessage: process.env.GIT_COMMIT_MESSAGE,
    defaultBranch: 'main'
  }
}

projectId

(Obbligatorio) Specifica l'ID del progetto che riceverà i risultati di accessibilità di Watcher. Il tuo ID progetto viene mostrato con le istruzioni quando crei un nuovo progetto e puoi anche ottenerlo dalla Pagina Progetti di axe Developer Hub .

axe: {
  projectId: process.env.AXE_PROJECT_ID
}

runContext

(Opzionale) Ti consente di scegliere quali elementi includere ed escludere dall'analisi di accessibilità della tua pagina.

important

Quando si utilizza runContext per selezionare gli elementi da includere nella tua analisi (tramite un singolo selettore CSS, un array di selettori CSS, o utilizzando la proprietà include), Axe Developer Hub analizza solo gli elementi selezionati dai selettori CSS. Pertanto, se non vengono selezionati elementi (a causa di un errore di ortografia in un selettore di classi CSS, ad esempio), nulla verrà analizzato e, più importante, nessuno stato della pagina verrà catturato.

Il valore di runContext può essere:

  1. Un singolo selettore CSS per gli elementi da includere nell'analisi:

    axe: {
      runContext: '.main'
    }
  2. Un array di selettori CSS per gli elementi da includere nell'analisi:

    axe: {
      runContext: [ '.main', '.text-block' ]
    }
  3. Un oggetto contesto contenente le proprietà include e exclude (come mostrato nell'esempio sopra). Puoi specificare include o exclude o entrambi. Ogni include o exclude può essere un singolo selettore CSS o un array di selettori CSS:

    axe: {
      runContext: {
        include: '.main',
        exclude: '.ad-section'
      }
    }

Ulteriori dettagli sono disponibili in Documentazione del contesto di axe-core.

runOptions

(Facoltativo) L'oggetto runOptions consente il seguente sottoinsieme di proprietà dal tipo Options di axe-core:

  • ancestry: Il valore predefinito è false. Se true, i selettori CSS restituiti includono gli elementi antenati degli elementi restituiti.

    important

    Se la tua pagina utilizza ID o classi dinamiche (ID degli elementi o classi che cambiano ogni volta che la pagina viene ricaricata), è necessario specificare ancestry come true in modo che Axe Developer Hub possa rilevare e tracciare correttamente se i problemi di accessibilità sono duplicati perché, per impostazione predefinita, Axe Developer Hub si aspetta che gli ID e le classi degli elementi rimangano gli stessi tra le esecuzioni di test.

    Quando ancestry è true, Axe Developer Hub utilizza invece la posizione dell'elemento all'interno dell'albero DOM per individuare lo stesso elemento tra le esecuzioni di test.

    Il seguente mostra un esempio di selettore quando ancestry è false per un elemento iframe con un ID di main-iframe (<iframe id="main-iframe" ...>):

    iframe#main-iframe

    Se ancestry è true, il selettore includerebbe l'intero percorso dall'elemento radice, e non ci sono ID o classi specificate:

    html > body > div:nth-child(20) > div:nth-child(1) > div > div > ul > li:nth-child(1) > div > span > iframe
  • runOnly: Questo ti consente di limitare quali regole vengono eseguite specificando nomi o tag. Per ulteriori informazioni, consulta runOnly sotto.

  • rules: Abilita o disabilita regole usando la proprietà enabled. Consulta rules sotto per ulteriori informazioni.

Il seguente mostra un esempio di runOptions:

axe: {
  runOptions: {
    ancestry: true,
    runOnly: {
      type: 'tag',
      values: [ 'wcag2a' ]
    },
    rules: {
      'ruleId1': { enabled: false },
      'ruleId2': { enabled: false }
    }
  }
}

runOnly

important

L'uso di runOnly è considerato uso avanzato, e se usi runOnly (o rules), tu un avviso.

Non puoi usare sia runOptions.runOnly che configurationOverrides. Altrimenti, riceverai un errore.

Il valore runOnly (parte dell'oggetto runOptions) può essere uno dei seguenti:

  1. Una stringa che rappresenta l'ID della regola che vuoi utilizzare per l'analisi dell'accessibilità:

    axe: {
      runOptions: {
        runOnly: 'ruleId'
      }
    }
  2. Un array di stringhe che rappresentano gli ID delle regole che vuoi utilizzare:

    axe: {
      runOptions: {
        runOnly: [ 'ruleId1', 'ruleId2' ]
      }
    }
  3. Un oggetto con le proprietà type e values. Il valore type è una stringa che può essere rule, rules, tag o tags. La proprietà values deve essere un array di stringhe che rappresentano la/le regola/e o il/i tag che vorresti utilizzare per l'analisi di accessibilità. L'esempio seguente mostra l'uso dell'oggetto runOnly per limitare il test di accessibilità alle regole contrassegnate come wcag2a:

    axe: {
      runOptions: {
        runOnly: {
          type: 'tag',
          values: [ 'wcag2a' ]
        }
      }  
    }

rules

Il valore rules (sull'oggetto runOptions) ti permette di abilitare (enabled: true) o disabilitare (enabled: false) regole specifiche durante l'analisi, come mostrato di seguito:

axe: {
  runOptions: {
    rules: {
      'ruleId1': { enabled: false },
      'ruleId2': { enabled: false }
    }
  }
}

serverURL

(Facoltativo) L'URL del server Axe Developer Hub a cui Watcher invia i risultati di accessibilità. Di default è https://axe.deque.com.

Non è necessario impostare questo valore se il tuo progetto è stato creato su axe.deque.com. Tuttavia, se la tua organizzazione utilizza un'istanza regionale, un cloud privato o un'installazione on-premises di Axe Developer Hub, imposta serverURL sull'URL base di quella istanza:

axe: {
  apiKey: process.env.ACCESSIBILITY_API_KEY,
  projectId: process.env.PROJECT_ID,
  serverURL: process.env.SERVER_URL // e.g., 'https://axe-eu.deque.com'
}

sessionId

(Facoltativo) La proprietà sessionId è stata deprecata e non dovrebbe essere utilizzata. Vedi buildID sopra.

testingTypes

(Facoltativo) La proprietà testingTypes è un array di stringhe da utilizzare con Cypress per specificare test di componenti o e2e (end-to-end) (o entrambi).

axe: {
  testingTypes: ['e2e', 'component']
}

timeout

(Facoltativo) L'oggetto timeout (di tipo Timeouts) in AxeConfiguration imposta i valori di timeout in millisecondi per i rispettivi metodi del controller (o comandi personalizzati per Cypress). (Vedi i Classi Controller per informazioni sulle classi del controller e i Commenti Personalizzati di Cypress per informazioni sui comandi personalizzati di Cypress.) Quando un timeout scade, il test fallisce con un messaggio che indica che il timeout è stato superato. Puoi aumentare il timeout per evitare l'errore.

important

Questi valori di timeout sono indipendenti dal framework di test che stai utilizzando e potrebbe essere necessario aumentare anche i valori di timeout per quel framework.

Questo esempio imposta il timeout di analyze a 8 secondi, flush a 15 secondi, start a 10 secondi e stop a 10 secondi. (I valori predefiniti sono mostrati nella tabella sotto Interfaccia Timeouts.)

axe: {
  timeout: {
    analyze: 8000,
    flush: 15000,
    start: 10000,
    stop: 10000,
  }
}

Funzioni di Configurazione

Le funzioni di configurazione fornite da Watcher ti consentono di modificare il tuo setup per il framework di test specificato e di adattare come vuoi eseguire Watcher per soddisfare le tue esigenze. Vedi , per maggiori informazioni. per maggiori informazioni.

Framework di Test Funzione di Configurazione
Cypress cypressConfig
**Playwright** playwrightConfig
**Playwright Test** playwrightTest
Puppeteer puppeteerConfig
**WebdriverIO** wdioConfig
**WebdriverIO Testrunner** wdioTestRunner
WebDriverJS webdriverConfig

cypressConfig

Crea una configurazione per Cypress.

cypressConfig(config: Cypress.ConfigOptions & Configuration): Cypress.ConfigOptions

Parametri cypressConfig

  • config: Cypress.ConfigOptions & Configuration

    Tipo di intersezione di Cypress.ConfigOptions e Configuration.

Restituisce: Cypress.ConfigOptions

Esempio cypressConfig

import { defineConfig } from 'cypress'
import { cypressConfig } from '@axe-core/watcher/cypress/config'

export default defineConfig(
  cypressConfig({
    axe: {
      apiKey: process.env.API_KEY,
      projectId: process.env.PROJECT_ID
    }
  })
)

playwrightConfig

Crea una configurazione per Playwright.

playwrightConfig(opts: Configuration & LaunchOptions): LaunchOptions

Parametri playwrightConfig

  • opts: Configuration & LaunchOptions

    Tipo di intersezione di LaunchOptions e Configuration.

Restituisce: LaunchOptions

Esempio playwrightConfig

import { chromium } from 'playwright'
import { playwrightConfig } from '@axe-core/watcher/playwright'

const browserContext = await chromium.launchPersistentContext(
  '',
  playwrightConfig({
    axe: {
      apiKey: process.env.API_KEY,
      projectId: process.env.PROJECT_ID
    }
  })
)

playwrightTest

Crea una configurazione per Playwright Test.

playwrightTest(options: Options): ReturnValue

Parametri playwrightTest

  • options: Options

    Options è un tipo di intersezione di Configuration e LaunchOptions.

Restituisce: ReturnValue

Esempio playwrightTest

// fixtures.ts
import { playwrightTest } from '@axe-core/watcher/playwright-test'

export default playwrightTest({
  axe: {
    apiKey: process.env.API_KEY,
    projectId: process.env.PROJECT_ID
  }
})

puppeteerConfig

Crea una configurazione per Puppeteer.

puppeteerConfig(opts: Configuration & LaunchOptions & BrowserLaunchArgumentOptions & BrowserConnectOptions): Options

Parametri puppeteerConfig

  • opts: Configuration & LaunchOptions & BrowserLaunchArgumentOptions & BrowserConnectOptions

    Tipo di intersezione di LaunchOptions, BrowserLaunchArgumentOptions, BrowserConnectOptions e Configuration.

Restituisce: Options

Esempio puppeteerConfig

import puppeteer from 'puppeteer'
import { puppeteerConfig } from '@axe-core/watcher/puppeteer'

const browser = await puppeteer.launch(
  puppeteerConfig({
    axe: {
      apiKey: process.env.API_KEY,
      projectId: process.env.PROJECT_ID
    }
  })
)

wdioConfig

Crea una configurazione per WebdriverIO.

wdioConfig({ axe, ...options}: Options): RemoteOptions

Parametri wdioConfig

  • arg: Options

    Options è un tipo di intersezione di RemoteOptions e Configuration.

Restituisce: RemoteOptions

Esempio wdioConfig

import { remote } from 'webdriverio'
import { wdioConfig } from '@axe-core/watcher/wdio'

const browser = await remote(
  wdioConfig({
    axe: {
      apiKey: process.env.API_KEY,
      projectId: process.env.PROJECT_ID
    },
    capabilities: { browserName: 'chrome' }
  })
)

wdioTestRunner

Crea una configurazione per WebdriverIO Testrunner.

wdioTestRunner(...params: unknown[]): Options.Testrunner

Parametri wdioTestRunner

  • params: unknown[]

    Il valore params è uno dei seguenti:

    1. Un array contenente un valore, che è un tipo di intersezione di Options.Testrunner e Configuration.
    2. Un array dove il primo valore è un AxeConfiguration e il secondo valore è un Options.Testrunner.

Restituisce: Options.Testrunner

Esempio wdioTestRunner

import { wdioTestRunner } from '@axe-core/watcher/wdio'

export const config = wdioTestRunner({
  axe: {
    apiKey: process.env.API_KEY,
    projectId: process.env.PROJECT_ID
  }
})

webdriverConfig

Crea una configurazione Selenium WebDriver.

webdriverConfig(arg: WebDriverArgs): Options

Parametri webdriverConfig

  • arg: WebDriverArgs

    Un Configuration esteso per includere un membro Selenium WebDriver Options.

Restituisce: Options

webdriverConfig Esempio

import { Builder } from 'selenium-webdriver'
import { Options } from 'selenium-webdriver/chrome'
import { webdriverConfig } from '@axe-core/watcher/webdriver'

const options = new Options()
const browser = await new Builder()
  .forBrowser('chrome')
  .setChromeOptions(
    webdriverConfig({
      axe: {
        apiKey: process.env.API_KEY,
        projectId: process.env.PROJECT_ID
      },
      options
    })
  )
  .build()

Configuration Interfaccia

L'interfaccia Configuration è utilizzata con funzioni di configurazione e contiene una proprietà:

Nome Tipo Obbligatorio Descrizione
axe AxeConfiguration La AxeConfiguration da passare alla funzione di configurazione del framework di test.

Tutti i funzioni di configurazione utilizzano questa proprietà axe per consentirti di configurare Watcher e impostare il tuo test di accessibilità. Vedi la sezione , per maggiori informazioni. sopra per maggiori informazioni.

ConfigurationOverrides Interfaccia

L'interfaccia ConfigurationOverrides ti permette di sovrascrivere le impostazioni di configurazione globale della tua organizzazione per singoli test. Questa proprietà deve essere utilizzata in conformità con le autorizzazioni impostate nella configurazione globale dell'azienda.

Nome Tipo Obbligatorio Descrizione
accessibilityStandard string no no
axeCoreVersion string no no
bestPractices boolean no Specifica se seguire le regole delle migliori pratiche.
experimentalRules boolean no Se seguire le regole sperimentali

accessibilityStandard

Imposta lo standard di accessibilità da testare. Opzioni disponibili:

  • „Tutti“ - Testa contro tutti gli standard disponibili
  • „WCAG 2.2 AAA“
  • „WCAG 2.2 AA“
  • „WCAG 2.2 A“
  • „WCAG 2.1 AAA“
  • „WCAG 2.1 AA“
  • „WCAG 2.1 A“
  • „WCAG 2.0 AAA“
  • „WCAG 2.0 AA“
  • „WCAG 2.0 A“
  • „Testatore Fidato v5“
  • „EN 301 549“
  • „RGAAv4“ - RGAA versione 4 (standard di accessibilità francese; richiede axe-core 4.11.0 o successivo)

La tua organizzazione deve permettere la sovrascrittura di questa impostazione nella configurazione globale e lo standard selezionato deve essere tra le opzioni consentite.

axe: {
  configurationOverrides: {
    accessibilityStandard: 'WCAG 2.2 AA'
  }
}

axeCoreVersion

Specifica quale versione di axe-core utilizzare per i test. Le opzioni disponibili includono:

  • „ultima“ - Ultima versione supportata attualmente inclusa con Axe Watcher
  • Versioni specifiche dalla 4.4.0 in poi (es. „4.10.2“, „4.9.1“, ecc.)

La tua organizzazione deve permettere la sovrascrittura di questa impostazione nella configurazione globale e la versione selezionata deve essere tra le opzioni consentite.

axe: {
  configurationOverrides: {
    axeCoreVersion: 'latest'
  }
}

bestPractices

Abilita o disabilita le regole di buone pratiche per il test. Le best practice migliorano l'accessibilità ma non fanno parte di standard formali. La tua organizzazione deve consentire di sovrascrivere questa impostazione perché abbia effetto.

axe: {
  configurationOverrides: {
    bestPractices: true
  }
}

experimentalRules

Abilita o disabilita le regole sperimentali per il test. Le regole sperimentali sono ancora in fase di sviluppo e possono produrre falsi positivi. La tua organizzazione deve consentire di sovrascrivere questa impostazione nel configurazione globale perché abbia effetto.

axe: {
  configurationOverrides: {
    experimentalRules: true
  }
}

Controller Classi

Le seguenti classi estendono la classe astratta Controller per permetterti di controllare manualmente l'analisi dell'accessibilità delle pagine web del tuo sito.

Framework di Test Nome
Playwright e Playwright Test PlaywrightController
Puppeteer PuppeteerController
WebdriverIO e WebdriverIO Testrunner WdioController
WebDriverJS WebdriverController
note

Per Cypress, i metodi nelle classi *Controller sono implementati come comandi personalizzati. Vedi Comandi Personalizzati del Controller per Cypress per maggiori informazioni.

Controller

abstract class Controller

La classe astratta Controller contiene i metodi per controllare l'analisi delle pagine. Ciascuna delle classi concrete estende questa classe, quindi i seguenti metodi sono disponibili in tutte le classi concrete.

important

Contesto del frame: Se il tuo test cambia il contesto del browser in un frame figlio utilizzando switchToFrame() (WebdriverIO o WebDriverJS), Axe Watcher non catturerà gli stati della pagina per le azioni eseguite mentre si è nel frame figlio. Axe Watcher può analizzare solo il frame di livello superiore. Torna al frame di livello superiore (ad esempio, utilizzando switchToParentFrame() in WebdriverIO o driver.switchTo().defaultContent() in WebDriverJS) per riprendere la cattura degli stati della pagina. Vedi Nessuno Stato della Pagina Catturato dopo il Cambio a un Frame Figlio per maggiori informazioni.

analyze

analyze(): Promise<void>

Analizza la pagina corrente per errori di accessibilità. Chiama questo metodo dopo aver preparato una pagina web per l'analisi (ad esempio, inserito valori in un modulo) e aver disattivato l'analisi automatica utilizzando il metodo stop o impostando autoAnalyze a false.

analyze Restituzioni

Promise<void>

analyze Esempio
await controller.analyze()
analyze Comando equivalente in Cypress

cy.axeWatcherAnalyze()

flush

flush(): Promise<void>

Invia tutti i risultati della scansione di accessibilità all'Axe Developer Hub. Dovrebbe essere chiamato alla fine dell'esecuzione del test per garantire che i risultati siano stati inviati ai server dell'Axe Developer Hub di Deque.

flush Restituzioni

Promise<void>

flush Esempio
await controller.flush()
flush Comando equivalente in Cypress

cy.axeWatcherFlush()

start

start(): Promise<void>

Riprende l'analisi automatica delle pagine web. Chiama questo metodo quando vuoi riprendere l'analisi automatica delle pagine web per errori di accessibilità.

start Restituzioni

Promise<void>

start Esempio
await controller.start()
start Comando equivalente in Cypress

cy.axeWatcherStart()

stop

stop(): Promise<void>

Arresta l'analisi automatica delle pagine web. Dopo aver chiamato il metodo stop, puoi fare qualsiasi ulteriore impostazione che la tua pagina web possa richiedere e quindi chiamare il metodo analyze per controllare la pagina per errori di accessibilità.

stop Restituzioni

Promise<void>

stop Esempio
await controller.stop()
stop Comando equivalente in Cypress

cy.axeWatcherStop()

PlaywrightController

La classe PlaywrightController ti permette di controllare manualmente l'analisi dell'accessibilità per i test con Playwright e Playwright Test. Puoi avviare e arrestare l'analisi accessibile automatica e analizzare le pagine che richiedono configurazioni aggiuntive.

Per ulteriori informazioni su Playwright, vedi Documentazione di Playwright.

Costruttore

new PlaywrightController(driver: Page): PlaywrightController
Parametri

Il valore driver è un oggetto Page di Playwright.

Restituisce PlaywrightController
PlaywrightController Esempio
import { PlaywrightController, wrapPlaywrightPage } from '@axe-core/watcher/playwright'

let page = await browserContext.newPage()
const controller = new PlaywrightController(page)
page = wrapPlaywrightPage(page, controller)

Vedi Controller per i metodi implementati nella classe base astratta.

PuppeteerController

La classe PuppeteerController consente il controllo manuale dei tuoi test con Puppeteer. Il controllo manuale consente di fornire impostazioni aggiuntive richieste da pagine web più complesse.

Per ulteriori informazioni su Puppeteer, vedi Puppeteer.

Costruttore

new PuppeteerController(driver: Page): PuppeteerController
Parametri

Il valore driver è un oggetto Page di Puppeteer.

Restituisce PuppeteerController
PuppeteerController Esempio
import { PuppeteerController, wrapPuppeteerPage } from '@axe-core/watcher/puppeteer'

let page = await browser.newPage()
const controller = new PuppeteerController(page)
page = wrapPuppeteerPage(page, controller)

Vedi Controller per i metodi implementati nella classe base astratta.

WdioController

Il WdioController ti permette di controllare manualmente le esecuzioni di test con WebdriverIO e WebdriverIO Testrunner. Per le pagine che richiedono configurazioni o impostazioni aggiuntive, puoi interrompere i test automatici e analizzare manualmente ogni pagina che richiede tale configurazione.

Costruttore

new WdioController(driver: Browser): WdioController
Parametri
  • driver: Browser
Restituisce WdioController
WdioController Esempio
import { WdioController, wrapWdio } from '@axe-core/watcher/wdio'

// browser is the WebdriverIO Browser instance from your wdioConfig() setup
const controller = new WdioController(browser)
wrapWdio(browser, controller)

Vedi Controller per i metodi implementati nella classe base astratta.

WebdriverController

Costruttore

new WebdriverController(driver: WebDriver): WebdriverController
Parametri

Il valore driver è un oggetto WebDriver di Selenium.

Restituisce WebdriverController
WebdriverController Esempio
import { WebdriverController, wrapWebdriver } from '@axe-core/watcher/webdriver'

// browser is the Selenium WebDriver instance from your webdriverConfig() setup
const controller = new WebdriverController(browser)
browser = wrapWebdriver(browser, controller)

Vedi Controller per i metodi implementati nella classe base astratta.

Comandi Personalizzati Cypress

Nella piattaforma di automazione browser Cypress, i metodi nelle classi *Controller sono implementati come comandi personalizzati. Consulta Comandi Personalizzati sul sito di documentazione di Cypress per ulteriori informazioni sull'implementazione e l'uso dei comandi personalizzati.

Sono implementati i seguenti comandi personalizzati. Ogni comando personalizzato restituisce Chainable<void> per consentire il concatenamento con altri comandi Cypress.

Metodo del Controller Comando Personalizzato Cypress Equivalente
analyze() axeWatcherAnalyze()
flush() axeWatcherFlush()
start() axeWatcherStart()
stop() axeWatcherStop()
important

A partire da Watcher 3.9.0, i quattro comandi personalizzati di Cypress axeAnalyze(), axeFlush(), axeStart() e axeStop() sono stati deprecati e non dovrebbero essere utilizzati.

Se stai usando il pacchetto @axe-devtools/cypress con Watcher, dovrai aggiornare almeno alla versione 3.9.0 di Watcher perché i comandi personalizzati deprecati sono in conflitto con i comandi personalizzati in @axe-devtools/cypress.

Esempio di Comando Cypress

Il seguente esempio mostra come importare i comandi Cypress dell'Axe Developer Hub dal pacchetto @axe-core/watcher e poi chiamare il comando axeWatcherFlush alla fine di ogni test (posizionandolo all'interno di afterEach()):

// Import the axe-watcher commands.
require('@axe-core/watcher/cypress/support')

// Flush Axe-watcher results after each test.
afterEach(() => {
  cy.axeWatcherFlush()
})

Interfaccia Timeouts

Il oggetto **timeout** (di tipo **Timeouts**) nel AxeConfiguration consente agli utenti di modificare i valori di timeout (in millisecondi) per le rispettive funzioni del controller o per i comandi personalizzati di Cypress.

interface Timeouts {
  start?: number
  stop?: number
  flush?: number
  analyze?: number
}
Nome Tipo Obbligatorio Predefinito Descrizione
**analizza** numero no 5000 Imposta il timeout in millisecondi per la funzione del controller **analizza** o per il comando personalizzato **axeWatcherAnalyze** (in Cypress).
**scarica** numero no 5000 Imposta il timeout in millisecondi per la funzione del controller **scarica** o per il comando personalizzato **axeWatcherFlush** (in Cypress).
**avvia** numero no 2000 Imposta il timeout in millisecondi per la funzione del controller **avvia** o per il comando personalizzato **axeWatcherStart** (in Cypress).
**ferma** numero no 5000 Imposta il timeout in millisecondi per la funzione del controller **ferma** o per il comando personalizzato **axeWatcherStop** (in Cypress).