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 Deque's registry. Caso contrário, consulte o setup documentation.

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 Limpo (be_axe_clean)

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

Matcher - Ser Auditado para Acessibilidade (be_audited_for_accessibility)

Para construir uma verificação de acessibilidade RSpec com axe, 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 dentro especifica quais elementos da página devem ser verificados. Um CSS selector válido deve ser fornecido. A cláusula dentro aceita um único seletor, uma matriz de seletores ou um hash descrevendo iframes com seletores.

Para mais informações, consulte o context parameter documentation.

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 excluindo especifica quais elementos do documento devem ser ignorados. Um CSS selector válido deve ser fornecido. A cláusula excluindo aceita um único seletor, uma matriz de seletores ou um hash descrevendo iframes com seletores.

Para mais informações, consulte o context parameter documentation.

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

A cláusula de acordo com 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 de acordo com aceita uma única tag ou uma matriz de tags.

Os tag names are documented aceitáveis bem como um complete listing of rules 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 de Regras de Verificação

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

Para mais informações, consulte o rules documentation 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 verificando apenas 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 Regras Ignoradas

A cláusula ignorando 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 rules documentation 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 o matcher - Ser Auditado para acessibilidade

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

according_to_ruleset- Cláusula de conjunto de regras

A cláusula de conjunto de regras de_acordo_com_conjunto_de_regras 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 registro_de_resultados 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 advanced usage para ver como configurar a API para:

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

Is this page helpful?

Help us improve this page

Still need help?