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 2014, 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, a qual sempre é atualizada junto com as novas versões.

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

Suporte à TypeScript é outra de suas vantagens.

Por fim, é mantido principalmente pelo time do Angular, o qual é suportado pelo Google.

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, 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.

Uma das “desvantagens” (por hora) é o suporte apenas ao navegador Chrome, porém está em seu roadmap o suporte a múltiplos browsers.

Em breve novidades sobre Cypress na Escola Talking About Testing. Fique ligado!

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 aproximadamente um ano e estou muito 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.


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

jsdom

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

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

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 pode 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) ao nível de unidade.

Uma das maiores vantagens da ferramenta é uma sintaxe simplificada, a qual possibilita questões relacionadas a legibilidade e facilidade de escrita dos testes.

Mocha

Minha impressão é de que o framework Mocha é o mais utilizado por desenvolvedores JavaScript no que diz respeito a testes de unidade.

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

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

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ódigolinting 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

ESLint é uma biblioteca para linting 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 gosto muito 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, 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! ✅ 👋

Anúncios

5 comentários em “Um review pessoal de ferramentas para testes automatizados no mundo JavaScript

  1. Legal demais! Devido a suas dicas, estou começando a aprender o Cypress. Achei bem legal e ja estou esperando mais informações no seu blog. Depois posta mais coisa sobre ele como por exemplo (adicionando extensão cucumber + parte de integração). Seus posts me ajudam muito, Obrigada por compartilhar 🙂

  2. Muito legal seu post! Consegui baixar um projeto e executar 🙂 Achei bem tranquilo de se usar e estou pensando em mudar meus testes pro Cypress. Aguardo seu conteúdo sobre a ferramenta. Gosto bastante dos seus conteúdos, sempre de muita qualidade técnica e me ajudam bastante. Obrigada por compartilhar

  3. Ótimo post cara, BASTANTE variedade.

    Particularmente eu ando meio do contra com o Selenium depois que conheci o cypress.

    Sobre o jsdom e o enzyme, eu acho que dá pra montar uma estratégia de testes interessante combinando os dois. Esses dias eu li um post introduzindo uma estratégia chamada subcutaneous test, é uma abordagem parecida com o que tenho em mente (depois dá uma olhada).

    E sobre o backstop, estou curtindo muito, mas como a quantidade de testes está escalonado no meu projeto, ele tá começando a apresentar flakiness

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s