Riferimento API per la versione JavaScript e TypeScript di Watcher
Il riferimento API per il pacchetto @axe-core/watcher
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) |
sì | 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) |
sì | 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
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 anull. 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 |
sì | 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 |
sì | 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 |
sì | 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.
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:
-
Un singolo selettore CSS per gli elementi da includere nell'analisi:
axe: { runContext: '.main' } -
Un array di selettori CSS per gli elementi da includere nell'analisi:
axe: { runContext: [ '.main', '.text-block' ] } -
Un oggetto contesto contenente le proprietà
includeeexclude(come mostrato nell'esempio sopra). Puoi specificareincludeoexcludeo entrambi. Ogniincludeoexcludepuò 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. Setrue, i selettori CSS restituiti includono gli elementi antenati degli elementi restituiti.importantSe la tua pagina utilizza ID o classi dinamiche (ID degli elementi o classi che cambiano ogni volta che la pagina viene ricaricata), è necessario specificare
ancestrycometruein 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èfalseper un elemento iframe con un ID di main-iframe (<iframe id="main-iframe" ...>):iframe#main-iframeSe
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, consultarunOnlysotto. -
rules: Abilita o disabilita regole usando la proprietàenabled. Consultarulessotto 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
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:
-
Una stringa che rappresenta l'ID della regola che vuoi utilizzare per l'analisi dell'accessibilità:
axe: { runOptions: { runOnly: 'ruleId' } } -
Un array di stringhe che rappresentano gli ID delle regole che vuoi utilizzare:
axe: { runOptions: { runOnly: [ 'ruleId1', 'ruleId2' ] } } -
Un oggetto con le proprietà
typeevalues. Il valoretypeè una stringa che può essererule,rules,tagotags. La proprietàvaluesdeve 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'oggettorunOnlyper limitare il test di accessibilità alle regole contrassegnate comewcag2a:axe: { runOptions: { runOnly: { type: 'tag', values: [ 'wcag2a' ] } } }
- Per ulteriori esempi di utilizzo di
runOnly(con axe-core), vedi Esempi di Parametri Opzioni - Per ulteriori informazioni sui valori dei tag disponibili, vedi Tag di axe-core.
- Per informazioni sulle regole, sugli ID delle regole e sui tag, vedi Descrizioni delle Regole
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.
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.ConfigOptionsParametri cypressConfig
-
config:Cypress.ConfigOptions & ConfigurationTipo di intersezione di
Cypress.ConfigOptionseConfiguration.
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): LaunchOptionsParametri playwrightConfig
-
opts:Configuration & LaunchOptionsTipo di intersezione di
LaunchOptionseConfiguration.
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): ReturnValueParametri playwrightTest
-
options:OptionsOptionsè un tipo di intersezione diConfigurationeLaunchOptions.
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): OptionsParametri puppeteerConfig
-
opts:Configuration & LaunchOptions & BrowserLaunchArgumentOptions & BrowserConnectOptionsTipo di intersezione di
LaunchOptions,BrowserLaunchArgumentOptions,BrowserConnectOptionseConfiguration.
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): RemoteOptionsParametri wdioConfig
-
arg:OptionsOptionsè un tipo di intersezione diRemoteOptionseConfiguration.
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.TestrunnerParametri wdioTestRunner
-
params:unknown[]Il valore
paramsè uno dei seguenti:- Un array contenente un valore, che è un tipo di intersezione di
Options.TestrunnereConfiguration. - Un array dove il primo valore è un
AxeConfiguratione il secondo valore è unOptions.Testrunner.
- Un array contenente un valore, che è un tipo di intersezione di
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): OptionsParametri webdriverConfig
-
arg:WebDriverArgsUn
Configurationesteso per includere un membro Selenium WebDriverOptions.
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 |
sì | 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 |
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 ControllerLa 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.
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): PlaywrightControllerParametri
driver:Page
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): PuppeteerControllerParametri
driver:Page
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): WdioControllerParametri
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): WebdriverControllerParametri
driver:WebDriver
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() |
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). |
