axe DevTools RSpec

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
Not for use with personal data

La axe-devtools-rspec gema proporciona comparadores personalizados para evaluar si una página determinada está axe limpia.

Esta gema se extiende sobre pasos proporcionados por la gema axe-core-rspec.

Configuración y uso

Asegúrese de tener acceso al [registro de Deque] [configuración del registro npm de attest]. En caso contrario, consulte la documentación de configuración.

Para configurar la gema RSpec, siga estos pasos:

  • Agregue axe-devtools-rspec a su archivo Gemfile o gemspec y ejecútelo bundle install.
gem "axe-devtools-rspec"
spec.add_dependency "axe-devtools-rspec"
  • Require axe-rspec, que se extiende RSpec con comparadores personalizados. Lo ideal sería que esto se especificara en el archivo spec/spec_helper.rb.
require 'axe-rspec'
  • Utilice la gema con WebDriver de su elección.

API

Matcher - Ser axe Clean (be_axe_clean)

Para construir una comprobación RSpec de accesibilidad de axe, comience con expect(page).to be_axe_clean y agregue cualquier cláusula necesaria. (El objeto page proviene del WebDriver elegido).

Matcher - Ser auditado por accesibilidad (be_audited_for_accessibility)

Para construir una comprobación RSpec de accesibilidad de axe, comience con expect(page).to be_audited_for_accessibility y agregue cualquier cláusula encadenable necesaria.

expect(page).to be_audited_for_accessibility

Cláusulas

Las cláusulas son métodos encadenables para el be_axe_clean comparador personalizado. Las cláusulas configurables permiten una mayor granularidad con las pruebas y las expectativas.

within- Cláusula de inclusión

La cláusula within especifica qué elementos de la página deben comprobarse. Se debe proporcionar un [selector CSS][css selector] válido. La cláusula within acepta un solo selector, una matriz de selectores o un hash que describe iframes con selectores.

Para obtener más información, consulte la documentación del parámetro de contexto.

Ejemplos:

# Simple selector
expect(page).to be_axe_clean.within '#selector1'

# Compound selector
# Include all elements with the class 'selector2' inside the element with id 'selector1'
expect(page).to be_audited_for_accessibility.within '#selector1 .selector2'

# Multiple selectors
# Include the element with id 'selector1' *and* all elements with class 'selector2'
expect(page).to be_audited_for_accessibility.within '#selector1', '.selector2'

# IFrame selector
# Include the element with id 'selector1' inside the IFrame with id 'frame1'
expect(page).to be_axe_clean.within iframe: '#frame1', selector: '#selector1'

# Multiple IFrame selectors
# Include the element with id 'selector1' inside the IFrame with id 'frame1'
# Include the element with id 'selector2' inside the IFrame with id 'frame2'
expect(page).to be_audited_for_accessibility.within(
  {iframe: '#frame1', selector: '#selector1'},
  {iframe: '#frame2', selector: '#selector2'}
)

# Simple selectors *and* IFrame selector
# Include the element with id 'selector1' *and* all elements with class 'selector2'
# Include the element with id 'selector3' inside the IFrame with id 'frame'
expect(page).to be_audited_for_accessibility.within '#selector1', '.selector2', iframe: '#frame', selector: '#selector3'

# Nested IFrame selectors
# Include the element selector1 inside the IFrame with id 'frame2',
# inside the IFrame with id 'frame1'
expect(page).to be_axe_clean.within(iframe: '#frame1', selector:
  {iframe: '#frame2', selector: '#selector1'}
)
excluding- Cláusula de exclusión

La cláusula excluyendo especifica qué elementos del documento deben ignorarse. Se debe proporcionar un [selector CSS][css selector] válido. La ** cláusula de exclusión** acepta un solo selector, una matriz de selectores o un hash con iframes y selectores.

Para obtener más información, consulte la documentación del parámetro de contexto.

Ejemplos:

# Simple selector
expect(page).to be_audited_for_accessibility.excluding '#selector1'

# Compound selector
# Exclude all elements with the class 'selector2' inside the element with id 'selector1'
expect(page).to be_axe_clean.excluding '#selector1 .selector2'

# Multiple selectors
# Exclude the element with id 'selector1' *and* all elements with class 'selector2'
expect(page).to be_audited_for_accessibility.excluding '#selector1', '.selector2'

# IFrame selector
# Exclude the element with id 'selector1' inside the IFrame with id 'frame1'
expect(page).to be_axe_clean.excluding iframe: '#frame1', selector: '#selector1'

# Multiple IFrame selectors
# Exclude the element with id 'selector1' inside the IFrame with id 'frame1'
# Exclude the element with id 'selector2' inside the IFrame with id 'frame2'
expect(page).to be_axe_clean.excluding(
  {iframe: '#frame1', selector: '#selector1'},
  {iframe: '#frame2', selector: '#selector2'}
)

# Simple selectors with IFrame selector
# Exclude the element with id 'selector1' *and* all elements with class 'selector2'
# Exclude the element with id 'selector3' inside the IFrame with id 'frame'
expect(page).to be_audited_for_accessibility.excluding '#selector1', '.selector2', iframe: '#frame', selector: '#selector3'

# Nested IFrame selectors
# Exclude the element selector1 inside the IFrame with id 'frame2',
# inside the IFrame with id 'frame1'
expect(page).to be_axe_clean.excluding(iframe: '#frame1', selector:
  {iframe: '#frame2', selector: '#selector1'}
)
according_to- Cláusula del Estándar de Accesibilidad (Etiqueta)

La ** cláusula según** especifica qué estándar (o estándares) de accesibilidad se deben usar para verificar la página. Los estándares de accesibilidad se especifican por nombre. La cláusula según acepta una sola etiqueta o un arreglo de etiquetas.

Los [nombres de etiquetas aceptables] están documentadosoptions-param así como una lista completa de reglas que corresponden a cada etiqueta.

# Single standard
expect(page).to be_audited_for_accessibility.according_to :wcag2a

# Multiple standards
expect(page).to be_axe_clean.according_to :wcag2a, :section508
checking- Cláusula de reglas de verificación

La cláusula especifica qué reglas adicionales _ se deben comprobar además de las etiquetas especificadas (si las hay) o el conjunto de reglas predeterminado._ La cláusula de comprobación acepta una sola regla o un arreglo de reglas.

Para obtener más información, consulte la documentación de reglas para obtener una lista de identificaciones de reglas válidas.

# Checking a single rule
expect(page).to be_axe_clean.checking :label

# Checking multiple rules
expect(page).to be_axe_clean.checking :label, :tabindex

# Example specifying an additional best practice rule in addition to all rules in the WCAG2A standard
expect(page).to be_audited_for_accessibility.according_to(:wcag2a).checking(:tabindex)
checking_only- Cláusula de reglas exclusivas

La cláusula solo_comprobación especifica qué reglas se deben comprobar exclusivamente. Al usar este comparador se excluyen todas las reglas fuera de la lista.

# Checking a single rule
expect(page).to be_axe_clean.checking_only :label

# Checking multiple rules
expect(page).to be_audited_for_accessibility.checking_only :label, :tabindex
skipping- Cláusula de reglas de omisión

La cláusula de omisión especifica qué reglas se deben omitir. Esto permite proporcionar un estándar de accesibilidad (a través de la cláusula de etiqueta) ignorando una regla particular. Las reglas se especifican mediante identificadores de reglas separados por comas.

Para obtener más información, consulte la documentación de reglas para obtener una lista de identificaciones de reglas válidas.

# Skipping a single rule
expect(page).to be_axe_clean.skipping :label

# Skipping multiple rules
expect(page).to be_audited_for_accessibility.skipping :label, :tabindex

# Example specifying an additional best practice rule in addition to all rules in the WCAG2A standard
expect(page).to be_axe_clean.according_to(:wcag2a).skipping(:label)
Cláusulas disponibles solo para el emparejador: ser auditado en cuanto a accesibilidad

El comparador ser_auditado_para_accesibilidad proporciona soporte para dos cláusulas adicionales.

according_to_ruleset- Cláusula de conjunto de reglas

La cláusula de conjunto de reglas de_acuerdo_al_conjunto_de_reglas ayuda a especificar un único conjunto de reglas (por ejemplo, 508, wcag2, wcag2.1) que se utilizará para comprobar la página.

 expect(page)
      .to be_audited_for_accessibility
      .according_to_ruleset('wcag2.1')
logging_results- Cláusula de resultados de registro

Para registrar los resultados del comparador base y las cláusulas, invoque el método encadenable logging_results como se muestra a continuación.

expect(page)
  .to be_audited_for_accessibility
  .logging_results({
    output_directory: 'attest-results',
    test_machine: 'Jenkins CI Server',
    test_suite_name: 'Landing Page',
    ui_state: 'Page Load',
    user_agent: 'Headless Chrome'
  })
Interoperabilidad entre cláusulas

Todas las cláusulas descritas pueden combinarse mediante encadenamiento de métodos. A continuación se muestran algunos ejemplos.

expect(page).to be_axe_clean.within('.main', '.header').excluding('.footer')

expect(page).to be_audited_for_accessibility.excluding('#sidebar').according_to(:wcag2a, :wcag2aa).skipping(:color-contrast)

expect(page).to be_axe_clean.within('.main').checking_only :document-title, :label

expect(page).to be_audited_for_accessibility.according_to(:best-practice).checking(:aria-roles, :definition-list)

Uso avanzado de la API

Consulta uso avanzado para ver cómo configurar la API para:

  • Reglas personalizadas
  • Ruta personalizada a la fuente de axe
  • Registro de uso
  • Informes

Is this page helpful?

Help us improve this page

Still need help?