Setup de automação para acessibilidade - parte 3

Chegamos ao fim do nosso setup!

Caso, você não leu as outras partes, não tem problema. Aqui estão:

• Setup de automação parte 1;
• Setup de automação parte 2.

Vamos recapitular o que aprendemos até aqui:

• É interessante começar os testes mais cedo;
• Testes estáticos validam erros em tempo de execução;
• Testes unitários validam pequenas partes do software;
• TDD é uma excelente estratégia de testes unitários;
• Podemos escrever TDD focado em acessibilidade;
• Acessibilidade desde o início todos saem ganhando.

Nessa sequência de e-mails, percebemos como a acessibilidade pode ser levada em consideração desde o início.

Para fixar: pensar nela na última etapa pode custar muito caro.

Hoje quero te apresentar um teste que muitos amam e outros nem tanto: os testes E2E.

Testes E2E

Em qualidade de software os testes E2E cumprem um papel importante, mas lembre-se esse carinha deve ser usado com sabedoria. Eles são caros e lentos, devemos usar de forma estratégica em nossa abordagem de automação.

Se você pesquisar sobre esse tipo de teste, vai encontrar zilhões de ferramentas E2E, vamos focar no Cypress.

Cypress

Quando ele foi lançado foi um alvoroço, ele tinha como premissa acabar com o uso de Drivers para testes. Uma automação E2E antes do Cypress era um parto:

• Tinha que instalar o Selenium;
• Baixar Driver do navegador desejado;
• Acoplar o Selenium a uma linguagem de programação;
• Torcer para ter baixado a versão do driver certa e executar.

Além disso, na minha opinião, os comandos do Selenium são muito verbosos. Acho os do Cypress bem mais tranquilos.

Outra coisa linda do Cypress é a facilidade de sua instalação, somente rodar um comando do npm e a mágica estava feita.

Dica de ouro: quer aprender mais? Procure os cursos do Walmyr Lima e Silva Filho e os conteúdos do Samuel Lucas , ambos, são embaixadores do Cypress.

Montando um projeto

Vou te mostrar um projeto de automação com Cypress simples, vamos validar a página da Prefeitura de Belo Horizonte. 

Bora lá.

Pré-requisitos

Você precisa ter instalando: o Node.js e um editor de código, recomendo o VSCode. Criei um diretório chamado tests-a11y, navegue por ele e digite o comando: npm init -y.

Isso vai criar o arquivo package.json. Após criado, execute o seguinte comando:

npm install cypress --save-dev        

Isso vai instalar o Cypress como dependência local no seu projeto.

Agora, vamos rodar o Cypress pela primeira vez.

Use o comando:

// Primeira alternativa
./node_modules/cypress/bin/cypress open

// Segunda alternativa
npx cypress open         

Se tudo der certo, o resultado será:

Selecione a opção E2E Testing, e siga o passo a passo e pronto sua estrutura básica está pronta!

Configurando as dependências

Agora temos que instalar as dependências para realizar os testes de acessibilidade. Vamos usar duas:

• cypress-axe;
• axe-core.

Rode os comandos: npm i cypress-axe axe-core -D

Precisamos informar ao Cypress que vamos usar as dependências instaladas, por isso, vá no diretório supports\e2e.js e insira as linhas:

// Arquivo disponível em supports\e2e.js

import './commands'

// Adicione essas linhas
import 'cypress-axe'
import 'axe-core'        

Para nosso experimente escolhi o site da Prefeitura de Belo Horizonte.

Dentro da pasta e2e, vou criar um novo teste chamado home.cy.js, seu script será:

describe( Accessibility Tests' , ( ) => {
    beforeEach( ( ) {
      cy. visit ("https://prefeitura . pbh. gov. br") ;
    }); 

    it("Deve passar no teste de acessibilidade", ( ) => {
        // adiciona dependência do axe
       cy.injectAxe();

       // executa validações de acessibilidade
      cy.checkA11y();
    })
})        

Simples assim! 

Vale um detalhe, essa validação é mais geral. 

Você pode escrever validações mais complexas, como:

• Verificar se os menus são acessíveis;
• Verificar se as imagens possuem ALT;
• e etc.

O resultado foi:

E assim, finalizamos nosso setup de automação para acessibilidade.

Pequenas ações podem mudar o rumo da nossa forma de desenvolver as coisas.

Se você quer receber conteúdos como esse em primeira mão, assine a Pulis Letters.