Um review pessoal de ferramentas para testes automatizados no mundo JavaScript

Meus “2 centavos” de algumas ferramentas (open source) que utilizei ou venho utilizando para garantir a qualidade em projetos de desenvolvimento de software

Nest post irei falar sobre minhas experiências com automação de testes utilizando ferramentas que suportam JavaScript. Na primeira parte do post ire falar sobre ferramentas para testes automatizados de interface gráfica de usuário, ou GUI. Na segunda parte do post irei falar sobre ferramentas para testes automatizados de integração, ou APIs. Na terceira parte do post irei falar sobre ferramentas para testes de unidade. E na última parte irei falar sobre ferramentas para análise estática de código.

---

PARTE 1 – TESTES AUTOMATIZADOS DE INTERFÁCE GRÁFICA DE USUÁRIO (GUI)

Selenium Webdriver

Minha experiência com a versão JavaScript do Selenium Webdriver é bem satisfatória no que diz respeito ao que é possível realizar ao utilizar o framework, sendo uma opção poderosa para testes de GUI, atendendo as necessidades de suporte à multiplos navegadores, tais como Chrome, Firefox, Safari e Internet Explorer.

Outros pontos relevantes são o suporte da comunidade, projeto ativo no GitHub e as conferências. Em 2017 tive a oportunidade de participar da SeleniumConf em Berlim, e além de me atualizar, aprendi bastante.

Com relação a documentação, até pouco tempo não era das melhores, mas a versão 4 está chegando com uma excelente documentação e aderente às especificações do WebDriver da W3C. Aos interessados, segue também um conteúdo relacionado.

Outra vantagem do Selenium é o suporte a execução de um mesmo caso de testes em diferentes browsers. Excelente para testes de aplicações de chat e video conferência.

Protractor

O Protractor é a ferramenta de automação de testes de GUI com a qual tenho maior experiência, tendo trabalhado com o framework desde de 2015, escrevendo conteúdos no formato de post aqui no blog, e em inglês no Medium, compartilhando videos no YouTube, palestrando em eventos, mentorando profissionais da área de QA espeficamente a respeito do assunto, mantendo a biblioteca protactor-helper, criada para ajudar outros profissionais a escreverem testes mais confiáveis utilzando o Protractor, escrevendo dois livros (um em inglês e outro em português, ambos com uma coleção de lições aprendidas), mantendo projetos no formado de codelab e sugestões de arquitetura no GitHub, e lecionando na Escola Talking About Testing, se não me esqueci de nada 😀

Uma das grandes vantagens do Protractor com relação ao Selenium é uma sintaxe mais simples, onde faz-se as mesmas coisas com muito menos código, ajudando em questões de legibilidade e manutenabilidade.

Para desenvolvedores acostumados com bibliotecas de testes de unidade, tais como Jasmine ou Mocha, ambas são suportas pelo Protractor, sendo a primeira a default.

Sobre a documentação, minha parte preferia é a API, porém a mesma parou de ser atualizada após a versão 5.4.1.

O Protractor também tem suporte aos navegadores mais utilizados no mercado, assim com o Selenium.

Por fim, a ferramenta da suporte à TypeScript, o que considero uma vantagem.

Cypress

O Cypess é a ferramenta de testes end-to-end que estou utilizando atualmente (em alguns projetos pessoais), e os pontos que mais me chamaram atenção até então são: sua excelente documentação, suporte a multiplos navegdores, facilidade de uso, possibilita testes de APIs REST, facilidades para desenvolvedores, tais como integração com o Chrome Dev Tools, debugging, modo interativo, suporte à stubs, suporte a comandos de shell, e espera automática sem a necessidades de waits, além de ser um projeto bastante ativo no GitHub.

Confira os cursos básico, intermediário, avançado, testes de regressão visual com Cypress e Percy (básico), boas práticas em automação de testes com Cypress e testes end-to-end com Cypress da Escola Talking About Testing.

BackstopJS

O BackstopJS é a ferramenta mais simples que já conheci para testes de comparação de screenshots, também conhecidos como testes de regressão visual.

Venho utilizando o BackstopJS a mais de dois anos e estou bastante satisfeito. Boa documentação, projeto relativamente ativo no GitHub, suporte a testes em containers Docker, e suporte ao Puppeteer.

Duas de minhas “contribuições” aos usuários do BackstopJS são o projeto backstop-config (inclusive citado na documentação oficial da ferramenta) e seu curso, e o curso de testes de regressão visual com BackstopJS.

Aproveitando, segue um conteúdo interessante sobre o uso de testes de regressão visual com BackstopJS utilizando serverless, onde testes que levavam 20 minutos passaram a ser executados em apenas 10 segundos com o uso de paralelização. Vale a leitura!

---

PARTE 2 – TESTES AUTOMATIZADOS DE INTEGRAÇÃO (APIs)

jsdom

O jsdom é uma biblioteca que pode ser utilizada em combinação com outras ferramentas que serão discutidas aqui, tais como SuperTest e Chai. Com o jsdom é possível emular um sub-conjunto de um navegador web para testar servidores de aplicações sem a necessidade de um navegador real.

Um exemplo do que pode ser feito com a biblioteca jsdom é parsear o HTML retornado por uma chamada de API REST, e executar algo como a função querySelector para retornar um elemento específico do HTML, e então fazer uma verificação de que tal elemento possui um determinado valor. Tal verificação pode ser realizada utilizando a biblioteca Chai, por exemplo.

SuperTest

O SuperTest é utilizado para testes de chamadas HTTP REST, possibilitando testar requisições do tipo GET, POST, PUT, DELETE e PATCH.

Alguns testes possívels de serem realizados com a biblioteca são:

• Verificar que a resposta de uma requisição HTTP retorna o código de status (status code) correto/esperado;
• Verificar que a resposta de uma requisição HTTP retorna o correto valor de location em seu header;
• Combinada com ferramentas como jsdom e Chai, esta pode verificar questões como o número de elementos HTML com um seletor CSS específico retornados após uma requisição do tipo POST, por exemplo.

Chai

O Chai é uma biblioteca de assertions para ambientes node, mas também para navegadores web, portanto, tal ferramenta possibilita a realização de verificações como as citadas nas seções sobre jsdom e SuperTest.

Alguns exemplos de assertions que podem ser realizados com a biblioteca Chai quando utilizada para testes de integração são:

• Verificar que uma determinada variável, a qual foi populada com o retorno de uma requisição HTTP, contém determinada string ou é igua a determinada string;
• Verificar que uma determinada variável, a qual foi populada com o retorno de uma requisição HTTP, possui determinado tamanho (length);
• Verificar que uma determinada variável, a qual foi populada com o retorno de uma requisição HTTP, possui determinada propriedade.

Cypress

Conforme brevemente comentado na seção sobre de testes automatizado de GUI, com o Cypress, além de se poder testar interações via interfáce gráfica de usuário, também é possível testar APIs REST.

Alguns exemplos de testes de APIs possíveis de serem realizados com o Cypress são:

• Verificação de códigos de status (status code);
• Verificações de redirecionamentos de URLs;
• Verificações do body da resposta de uma requisição HTTP.

---

PARTE 3 – TESTES AUTOMATIZADOS DE UNIDADE

Tape

Tabe é a biblioteca para testes de unidade mais simples que já utilizei. Tal biblioteca já vem com sua própria lista de assertions, o que torna o processo dos testes simplificado, onde não existe a necessidade de importar uma biblioteca específica para fazer as verificações dos resultados esperados.

Segue um projeto exemplo no GitHub no qual utilizei a biblioteca Tape para praticar técnicas como TDD, aumento da cobertura de código, refatoração, escrita de código limpo e mais.

Jasmine

O framework Jasmine possibilita a prática de BDD (behavior-driven development, ou desenvolvimento guiado pelo comportamento) à nível de unidade.

Uma das maiores vantagens da ferramenta é uma sintaxe simplificada, a qual viabiliza legibilidade e facilidade de escrita dos testes.

Mocha

No passado, o Mocha foi uma das bibliotecas de teste de unidade mais utilizada por desenvolvedores JavaScript.

Tal ferramenta possibilita testes assíncronos, tanto em ambientes node, quanto no navegador, de forma simples.

Algumas de sua diversas funcionalidades incluem:

• suporte à testes assíncronos, incluindo promesas (promises);
• execução de um único teste utilizando .only(), ou exclusão de um único testes utilizando .skip();
• relatório de cobertura de código.

Node.js Assert

O Node.js assert é um módulo do Node.js para verificações (assertions) em testes de unidade.

Sua maior vantagem é que já vem instalado junto com o Node.js, não necessitando de instalação extra.

Chai

Comforme já comentado na seção sobre testes de integração, o Chai é uma biblioteca de assertions para ambientes node, mas também para navegadores web.

Fora o que já foi comentado, com a biblioteca Chai é possível fazer assertions no estilo de BDD ou TDD, além de suportar o uso de plugins, para extender suas funcionalidades.

Enzyme

O Enzyme é um utilitário para testes de unidade, lançado pelo Airbnb para realizar verificações em componentes React.

Um examplo de tipo de testes que pode ser realizado com tal ferramenta é renderizar de forma superficial um componente React e verificar a quantidade de elementos com um seletor CSS específico que são retornados.

Segue um projeto exemplo no GitHub onde utilizei o Enzyme para testes simples de componentes React.

Jest

O Jest é um framework de testes lançado pelo Facebook, onde na comunidade React é pricipamente utilizado para snapshot tests, porém também pode ser utilizado para testes que requerem o uso de dublês de teste, tais como mocks.

Algumas de suas vantagens são:

• Por ser um framework completo, não exige a instalação de outras bibliotecas. Com o Jest você escreve testes e assertions, executa os mesmos, e então visualiza o relatório da execução dos testes;
• Já vem com suporte a relatórios de cobertura de código sem a necessidade de instalação de outras biblioteca específica para isso;
• Não exige configuração para começar a utilizar.

No mesmo projeto exemplo no GitHub da seção sobre Enzyme utilizei também o Jest para testes de comparação de snapshots.

Istanbul

O Istanbul não é uma ferramenta de testes de unidade, mas sim uma ferramenta para extrair métricas de cobertura de código a partir de testes de unidade.

Seu principal objetivo é expor de forma clara quais partes do código de uma aplicação são ou não exercitados por testes, possibilitando identificar áreas de risco, e potencialmente, áreas de melhoria.

No mesmo projeto exemplo da seção sobre Tape utilizei o Istanbul para extrair métricas de cobertura de código.

---

PARTE 4 – FERRAMENTAS PARA ANÁLISE ESTÁTICA DE CÓDIGO

StandardJS

O StandardJS é a opção mais simples que conheço para análise estática de código JavaScript, ajudando em questões de formatação de código, linting e para que seja possível seguir um mesmo guia de estilo em todo o código de um projeto, sem a necessidade de nenhuma configuração.

ESLint

O ESLint é uma biblioteca de análise estática de código que possibilita um time de desenvolvimento definir seu próprio guia de estilo e então garantir que tal guia é seguido.

Uma das funcionalidades que mais gosto no ESLint é o auto fix, o qual corrige de forma automática algumas regras simples, tais como número de espaços em tabulações, uso de aspas simples ou duplas, falta de ponto-e-virgula no final de declarações, etc.

---

Por hoje é só. Em breve atualizações.

E você, quais ferramentas está utilizando para automação de testes em seus diferentes níveis, e para análise estática de código? Deixe um comentário.

Gostou do que leu? Ajude compartilhando o conteúdo em suas redes sociais. Agradeço!

Até a próxima, e bons testes! ✅ 👋