O objetivo neste artigo é apresentar uma visão geral da ferramenta Cypress e usá-la em um projeto Vuejs. Destino à pessoas que têm interesse em iniciar a jornada com testes end-to-end fazendo o uso do Cypress em conjunto com Vuejs.

O que é Cypress?

É uma ferramenta de teste de front-end open source, criada para a Web moderna.

Até agora os testes de ponta a ponta não eram fáceis. Foi a parte que os desenvolvedores odiavam, mas o Cypress garante facilitar a configuração, gravação, execução e depuração de testes.

Um dos objetivos era tornar o desenvolvimento orientado a testes uma realidade para testes de ponta a ponta. Cypress vem prometendo o poder de codificar o mais rápido possível.

Tarefas mais rápidas com Cypress

Configurando testes

Escreva seu primeiro teste em 60 segundos. Não há servidores, drivers ou quaisquer outras dependências para instalar ou configurar.

Escrevendo testes

Testes escritos em Cypress são fáceis de ler e entender. A API vem totalmente pronta.

Executando testes

Cypress é executado tão rápido quanto seu navegador pode renderizar conteúdo. Você pode assistir a testes em tempo real enquanto desenvolve seus aplicativos.

Depuração

Mensagens de erro legíveis ajudam você a depurar rapidamente. Você também tem acesso a todas as ferramentas de desenvolvedor que conhece e adora.

Diferenças do Cypress comparado a outros

Cypress não usa selênio

A maioria das ferramentas de teste de ponta a ponta é baseada em selênio, e é por isso que todas compartilham os mesmos problemas.

Para tornar o Cypress diferente, foi construída uma nova arquitetura a partir do zero. Enquanto o Selenium executa comandos remotos através da rede, o Cypress é executado no mesmo ciclo de execução da sua aplicação.

Cypress se concentra em fazer testes end-to-end realmente bem.

Cypress não é um framework de automação geral, nem é uma estrutura de testes de unidade para seus serviços de back-end.

Já existem ótimas ferramentas por aí que fazem isso – em vez disso, é especializado em uma coisa:  criar uma ótima experiência enquanto você escreve testes de ponta a ponta para seus aplicativos da web.

Cypress funciona em qualquer estrutura de front-end ou site

Cypress testa tudo o que é executado em um navegador da web. Toda a arquitetura em torno do Cypress é construída especialmente para lidar com estruturas JavaScript modernas.

Há centenas de projetos usando as mais recentes estruturas React, Angular, Vue, Elm, etc. O Cypress também funciona igualmente bem em páginas ou aplicativos renderizados por servidores mais antigos.

Testes do Cypress são escritos apenas em JavaScript

Embora você possa compilar JavaScript de qualquer outro idioma, o código de teste é executado no próprio navegador. Não há ligações de idioma ou driver – sempre será apenas JavaScript.

Cypress é tudo em um

Escrever testes de ponta a ponta requer muitas ferramentas diferentes para trabalhar em conjunto. Com Cypress você obtém várias ferramentas em uma. Não há necessidade de instalar 10 ferramentas e bibliotecas separadas para configurar seu conjunto de testes.

Cypress é para desenvolvedores e engenheiros de QA

Um dos objetivos era tornar o desenvolvimento orientado a testes uma realidade para testes de ponta a ponta. Cypress está no seu melhor – quando você usa e como você constrói sua aplicação. Dá o poder de codificar o mais rápido possível.

Cypress é muito mais rápido

Esses aprimoramentos arquitetônicos liberam a capacidade de fazer TDD com testes completos de ponta a ponta pela primeira vez.

O Cypress foi construído para que o teste e o desenvolvimento possam acontecer simultaneamente. Você pode desenvolver mais rápido enquanto conduz todo o processo de desenvolvimento com testes porque: você pode ver sua aplicação; você ainda tem acesso às ferramentas do desenvolvedor e as alterações são refletidas em tempo real. O resultado final é que você terá desenvolvido mais, seu código será melhor e será completamente testado.

Mãos à obra!

Para esse projeto usaremos o Vuejs.   Se quiser mais detalhes sobre Vuejs, você pode consultar a documentação.

1 . Para este cenário usaremos o VUE-CLI

O CLI (@vue/cli) é um pacote npm instalado globalmente e fornece o vue comando em seu terminal. Vue CLI fornece um sistema completo para o rápido desenvolvimento do Vue.js. Isso significa que faz muito trabalho tedioso para nós e nos fornece recursos valiosos prontos para o uso.

Usando este comando em seu terminal:

npm install -g @vue/cli

2 . Criando o projeto

Usando este comando em seu terminal:

vue create cypress-vue

3- Escolhendo o Preset

Em seguida, será solicitado que você escolha uma predefinição padrão ou selecione manualmente os recursos. Usando a tecla de seta para baixo, selecionaremos o recurso Manually select features. Em seguida, pressione enter para selecionarmos quais recursos queremos no projeto.

4.  Selecionando os Recursos

Como o intuito deste artigo é focar no Cypress, apenas selecionarei o recurso E2E Testing.

Selecionando o Cypress.

5. Acessando sua aplicação

Entrando na pasta da sua aplicação:

cd cypress-vue

Servindo sua aplicação:

npm run serve

Acesse em seu navegador favorito o endereço:

http://localhost:8080/

Beleza, finalizamos a criação do projeto e a instalação do Cypress!

6. Abrindo o Cypress

Para ter acesso à interface gráfica do Cypress, basta usar este comando no terminal (neste caso usaremos npm):

npx cypress open

7.  Conhecendo a estrutura

Navegando pelo seu projeto em tests/e2e/specs você encontrará o arquivo test.js. Nele você poderá criar seus testes.

8. Criando nosso próprio arquivo de teste

Neste caso criaremos um novo arquivo de teste. O intuito será testar a visita ao nosso servidor na porta 8080, onde está servindo nossa aplicação Vuejs.

Para isso, em tests/e2e/ criaremos o arquivo home_page_spec.js. Neste arquivo colocaremos o nosso primeiro teste:

describe('The Home Page', function() {
it('successfully loads', function() {
cy.visit('http://localhost:8080');
});
});

9. Assistindo ao teste do Cypress

Beleza, você já está com o Cypress aberto (npx cypress open). Agora vamos clicar no nosso arquivo home_page_spec.js e assistir o Cypress abrir seu navegador e fazer o teste!

Não esqueça de iniciar seu servidor! Se você não iniciar, dará erro.

Parabéns! Você fez seu primeiro teste com Cypress!

10 . Configurando o Cypress

Com a criação dos testes, você perceberá que digitará muitas vezes a URL, pois todos os testes precisaram visitar páginas da sua aplicação. Pensando nisso, o Cypress fornece uma opção de configuração para isso.

E é super simples! Você precisa localizar o arquivo json cypress.json que está na raíz do seu projeto e colocar sua base url.

{   "baseUrl": "http://localhost:8080" }

Isto automaticamente tornará um prefixo cy.visit() e cy.request()comandos com esta baseUrl.

Sempre que você modificar cypress.json, o Cypress será reiniciado automaticamente e eliminará todos os navegadores abertos. Isso é normal, basta clicar no arquivo de especificações novamente para relançar o navegador.

Cypress tem muito mais opções de configuração que você pode usar para personalizar seu comportamento. Coisas como períodos de timeout padrão, variáveis ​​de ambiente, e você pode conferir mais neste link.

11.  Visitando um caminho relativo e omitindo o nome do host e a porta

Agora voltamos no nosso arquivo home_page_spec e alteramos para caminho relativo:

E tudo continua funcionando:

12. Mais alguns exemplos de testes

Agora vamos testar se encontramos a tag h1, e verificaremos se ela contém o texto “Conhecendo o Cypress com Vuejs!”

Primeiro vamos lá no App.vue e vamos adicionar este trecho de código:

<HelloWorld msg="Conhecendo o Cypress com Vuejs!" />

Depois vamos até o nosso arquivo home_page_spec.js e adicionamos esse trecho:

cy.get('h1').should('contain', 'Conhecendo o Cypress com Vuejs!');

Vamos conhecer mais um. Dessa vez, localizar o input com a classe hello-world e digitar o texto “Por hoje é isso pessoal!”

Para isso adicione esse trecho no App.vue:

<input class="hello-world">

E em home_page_spec:

cy.get('input.hello-world').type('Por hoje é isso pessoal!');

Para finalizar, vamos adicionar mais um. Dessa vez, no button. Para isso adicione no App.vue no template:

<button @click="hello">Clique aqui</button>

No script:

methods: {
hello(){
alert('Tchau!')
}
}

E para finalizar, em home_page_spec.js:

cy.get('button').click();

Conclusão

Bem, chegamos ao final do artigo. Conseguimos criar um projeto Vuejs e apresentar o Cypress, passando uma visão geral e criando um fluxo simples de testes.

Cada vez mais se torna uma exigência fazer testes nas suas aplicações, então o Cypress pode ser uma ótima alternativa nessa tarefa.

Para saber mais sobre o Cypress, verifique a documentação.

Se esse artigo foi útil, compartilhe e ajude a chegar em mais pessoas.

Projeto disponível no meu git clicando aqui.

Artigos anteriores que podem ser úteis para você:

• Criando uma aplicação Vue.js com o sistema de autenticação Firebase
• Aumente o desempenho da sua aplicação Angular utilizando Lazy Load para imagens
• Use Git com a interface gráfica do Visual Studio Code e aumente sua produtividade
• Integrando Firebase no seu aplicativo Ionic
• Firebase Analytics para Ionic Apps