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

Configuração e uso da gema axe-devtools-rspec para testes de acessibilidade baseados em RSpec

Not for use with personal data

A gema axe-devtools-rspec fornece correspondências personalizadas para avaliar se uma determinada página está axe limpa.

Esta gema se estende sobre passos fornecidos pela gema axe-core-rspec.

Configuração e Uso

Certifique-se de ter acesso ao registro do Deque. Caso contrário, consulte o documentação de configuração.

Para configurar a gema RSpec, siga estes passos:

  • Adicione axe-devtools-rspec ao seu arquivo Gemfile ou gemspec e execute bundle install.
gem "axe-devtools-rspec"
spec.add_dependency "axe-devtools-rspec"
  • Requerer axe-rspec, que estende RSpec com correspondências personalizadas. Idealmente, isso seria especificado no arquivo spec/spec_helper.rb.
require 'axe-rspec'

API

Matcher - Ser Axe Clean (be_axe_clean)

Para construir uma verificação de acessibilidade Axe no RSpec, comece com expect(page).to be_axe_clean e adicione quaisquer cláusulas necessárias. (O objeto page vem do WebDriver escolhido.)

Matcher - Ser Auditado para Acessibilidade (be_audited_for_accessibility)

Para construir uma verificação de acessibilidade Axe no RSpec, comece com expect(page).to be_audited_for_accessibility e adicione quaisquer cláusulas encadeáveis necessárias.

expect(page).to be_audited_for_accessibility

Cláusulas

As cláusulas são métodos encadeáveis para o matcher personalizado be_axe_clean. Cláusulas configuráveis permitem maior granularidade nos testes e expectativas.

within- Cláusula de Inclusão

A cláusula within especifica quais elementos da página devem ser verificados. Um seletor CSS válido deve ser fornecido. A cláusula within aceita um único seletor, uma matriz de seletores ou um hash descrevendo iframes com seletores.

Para mais informações, consulte o documentação do parâmetro de contexto.

Exemplos:

# 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 Exclusão

A cláusula excluding especifica quais elementos do documento devem ser ignorados. Um seletor CSS válido deve ser fornecido. A cláusula excluding aceita um único seletor, uma matriz de seletores ou um hash descrevendo iframes com seletores.

Para mais informações, consulte o documentação do parâmetro de contexto.

Exemplos:

# 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 do Padrão de Acessibilidade (Tag)

A cláusula according_to especifica qual padrão de acessibilidade (ou padrões) deve ser usado para verificar a página. Os padrões de acessibilidade são especificados por nome. A cláusula according_to aceita uma única tag ou uma matriz de tags.

Os nomes de tags são documentados aceitáveis bem como um listagem completa de regras que correspondem a cada tag.

# 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 das Regras de Verificação

A cláusula checking especifica quais regras adicional verificar além das tags especificadas (se houver) ou do conjunto de regras padrão. A cláusula checking aceita uma única regra ou uma matriz de regras.

Para mais informações, consulte o documentação de regras para uma lista de IDs de regras válidos.

# 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 Regras Exclusivas

A cláusula checking_only especifica quais regras verificar exclusivamente. Usar este matcher exclui todas regras fora da 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 Pular Regras

A cláusula skipping especifica quais regras ignorar. Isso permite que um padrão de acessibilidade seja fornecido (via cláusula de tag) enquanto ignora uma regra particular. As regras são especificadas por IDs de regras separados por vírgulas.

Para mais informações, consulte o documentação de regras para uma lista de IDs de regras válidos.

# 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 disponíveis apenas para matcher - Ser Auditado para acessibilidade

O combinador be_audited_for_accessibility oferece suporte para duas cláusulas adicionais.

according_to_ruleset- Cláusula de Conjunto de Regras

A cláusula de conjunto de regras according_to_ruleset ajuda a especificar um único conjunto de regras (por exemplo, 508, wcag2, wcag2.1) a ser usado para verificar a página.

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

Para registrar resultados do combinador base e cláusulas, invoque o método encadeável logging_results conforme mostrado abaixo.

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'
  })
Interoperabilidade entre cláusulas

Todas as cláusulas descritas podem ser combinadas e encadeadas com métodos. Abaixo estão alguns exemplos.

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 avançado da API

Consulte uso avançado para ver como configurar a API para:

  • Regras personalizadas
  • Caminho personalizado para a fonte do axe-core
  • Gravação de uso
  • Relatórios

Is this page helpful?

Help us improve this page

Still need help?