Gerar um relatório de cobertura de código de executar o teste de ponta a ponta com Cypress.io

Traitanit Blocked Unblock Seguir Seguindo 6 de julho

Olá a todos, acredito que a maioria de vocês que são desenvolvedores ou engenheiros de QAs pode ter experiência em escrever testes de automação da Web, incluindo testes de unidade, testes de integração e testes de ponta a ponta (E2E). Perguntas que podem surgir em sua mente quando você estiver criando testes:

  • Nós temos testes suficientes?
  • Quanto o código faz nossos testes tocar?
  • Existe alguma linha de código que nos esquecemos de escrever os testes?

Esta pergunta pode ser respondida facilmente se você estiver escrevendo testes de unidade. A resposta é “ faça apenas uma cobertura de código ”. E quanto aos testes E2E?

Se você usar o Cypress como uma estrutura de teste para seus testes E2E, poderá responder a essa pergunta com facilidade. Agora você pode gerar um Relatório de Cobertura de Código executando testes E2E usando o plug-in de Cobertura de Código do Cypress . Este plugin acabou de ser lançado recentemente e é muito útil. Eu recomendo a todos que estão escrevendo testes E2E com o Cypress para usar este plugin.

Se você nunca usou Cypress, você pode ler este artigo abaixo para começar.

Por que Cypress?
O que você aprenderá O que é o Cypress e por que você deve usá-lo Nossa missão e o que acreditamos nos recursos do Key Cypress Em… docs.cypress.io

Projeto de exemplo

O projeto que eu vou usar um simples aplicativo Todo escrito no VueJS .

Neste aplicativo de amostra, você pode simplesmente digitar algum texto no campo de texto e pressionar “Enter” para adicioná-lo à Lista de Tarefas. Depois disso, o aplicativo salvará sua lista e a exibirá no campo de texto. Ele também permite excluir a lista de tarefas.

Instrumentação de Código

Vamos falar sobre o conceito de Instrumentação de Código primeiro. Instrumentação de código é uma técnica que permite monitorar e examinar quantas instruções em seu código são invocadas. Deve ter um contador para contar todas as invocações. Se falamos sobre instrumentação de código para aplicação Javascript, uma biblioteca que você pode ter ouvido é " Istambul ". Istambul instrumenta seu código ES5 e ES2015 + Javascript com contadores de linha, para que você possa acompanhar a quantidade de seus testes que exercitam seu aplicativo. Ele ajuda você a gerar uma cobertura de código facilmente com alguns arquivos de configuração.

Instalação e Configuração

Vamos instalar e configurar todas as dependências de que precisamos.

  1. Instale as dependências do nó: babel-plugin-istanbul , istanbul-lib-coverage e nyc
  • babel-plugin-istanbul é um plugin do babel para instrumentar o seu código com a cobertura do Istanbul. Pode ser usado com Karma e Mocha (que também é usado por Cypress)
  • istanbul-lib-coverage fornece uma API que pode ler e mesclar dados de cobertura para resumir as informações de cobertura.
  • nyc é uma interface de linha de comando de Istambul que pode gerar o relatório de cobertura de código em vários formatos, ou seja, um arquivo HTML.
 sh $ yarn adicionar babel-plugin-istambul istanbul-lib-coverage nyc 

2. Instalar o Plugin de Cobertura do Código Cypress

 sh $ yarn adicionar cypress @ cypress / code-coverage 

3. Configure o .babelrc (crie um novo se você não tiver)

4. Crie um arquivo de configuração do nyc . Neste caso, quero verificar a cobertura para ambos .js e .vue

Configurar o Plugin de Cobertura do Código Cypress

Depois de adicionar o Cypress ao seu projeto, você precisa configurar o arquivo de plug-in do Cypress cypress/plugin/index.js para ativar o plug-in de cobertura de código do Cypress.

Por favor, note que este plugin pode retardar seus testes porque tem que instrumentar todo o seu código. A equipe da Cypress está trabalhando para melhorar isso em versões futuras. Você pode acompanhar o status do problema aqui

cipreste / suporte / index.jscypress / plugins / index.js

Escrevendo Testes E2E com Cypress

Eu já adicionei o data-attribute no código-fonte do meu aplicativo. Então, vou localizar os elementos em meus testes E2E com esses atributos. Esta é uma das Melhores Práticas que devemos fazer ao escrever testes E2E em qualquer projeto.

Quando você começar a executar seu teste com o Cypress UI Test Runner, ele executará seu teste assim.

Então, se você der uma olhada no passo a passo do caso de teste, verá que o Cypress conectou a task para gerar o relatório de cobertura de código após a execução do teste. Você pode ver a pasta de coverage que é gerada automaticamente no seu projeto. Você pode abrir o relatório de cobertura de código em qualquer navegador da web.

100% de cobertura das declarações dos meus testes E2E. Agradável!

A princípio, não acredito se os dados de cobertura estão corretos ou não – parece bom demais para ser verdade. Então, tentei ignorar meu segundo caso de teste (o caso Delete Todo ) para verificar se a cobertura do código está funcionando corretamente. Então o resultado é

Minha cobertura de declarações é reduzida para 87,5%, o que significa que você está perdendo alguma linha de código. Você pode clicar nele para verificar onde está o código que é descoberto pelos testes. É muito legal.

As linhas de código destacadas em vermelho são aquelas que não foram testadas. Isso ocorre porque eu pulei o segundo caso de teste (o caso Delete Todo ). Portanto, o método removeTodo não é invocado.

Adicionando Cobertura de Código ao CI

Assim, você pode ver como gerar a cobertura de código a partir da execução de testes E2E em sua máquina local. Você pode aplicar esse conceito ao seu sistema de Integração Contínua e também ao suporte do nyc para gerar um relatório em vários formatos. Assim, você pode rastrear sua tendência de cobertura de código no seu sistema de CI. Isso pode fazer você se sentir mais confiante em termos de qualidade do produto. Você tem um fácil de gerenciar a cobertura de seus testes. Obtenha melhor qualidade de código e esse é o objetivo, certo?

Cypress também tem muitos recursos interessantes para usar. Na Tailândia, temos um grupo público no Facebook chamado “ Cypress Thailand Community ”. Temos muitos usuários do Cypress que compartilham seus conhecimentos e melhores práticas e também perguntas e respostas. Sinta-se livre para se juntar a nós.

Você pode ver o código de exemplo com Testes E2E para o Todo App abaixo. Teste feliz!

nottyo / cypress-e2e-code-coverage
Exemplo de projeto que gera cobertura de código do teste Cypress E2E – nottyo / cypress-e2e-code-coverage github.com

Exemplo de relatório de cobertura de código : https://nottyo.github.io/cypress-e2e-code-coverage/coverage/

Referência : https://docs.cypress.io/guides/tooling/code-coverage.html

Texto original em inglês.