Instalação do Cypress

O Cypress é um framework para automação de testes end to end para aplicações web. Com ele você vai escrever seus testes usando a linguagem JavaScript. É uma ferramenta que vem crescendo e conquistando espaço na área de qualidade.

A sua facilidade em executar os testes e visualizar o log de cada ação é um grande ponto, que auxilia bastante para quem está iniciando com a automação de teste e não tem tanto domínio ainda em escrever código, pois consegue acompanhar de forma bem clara cada ação que foi codificada e visualizar melhor quando acontece algum erro.

Esse framework é compatível com os sistemas operacionais: Linux, MacOs e Windows, veja abaixo as versões necessárias:

• Linux Ubuntu a partir da 12.04, Fedora 21 e Debian 8 (somente x64);
• MacOs a partir da 10.9 (somente x64);
• Windows a partir do 7.

A sua instalação é bem simples. Porem neste artigo vamos realizar um passo a passo também da instalação das demais ferramentas que iremos utilizar:

• Cmder
• Node.js
• Visual Studio Code
• Cypress

Vamos lá!

Cmder

O CMDER é portátil, ou seja, não requer instalação. Portanto neste caso basta simplesmente fazer o download da ferramenta no site oficial, descompactar e desfrutar.

O site oficial é www.cmder.net/

Faça o download da versão mini mesmo que tem um tamanho aproximado de 7.8 MB, essa versão já nos atende tranquilamente. A versão full traz junto o GIT, não precisamos deste pois é recomendado baixar o GIT no próprio site oficial.

Uma vez que fez o download dos arquivos com CMDER basta descompactar para onde desejar, sugiro que fique em: C:\Program Files\CMDER

Para utilizar basta abrir o arquivo Cmder.exe

Se quiser criar um atalho deste arquivo Cmder.exe para a área de trabalho ou qualquer outro local, é uma boa opção para poder acessar mais facilmente posteriormente.

Essa é a tela do CMDER:

Node.js

O Node.js é uma ferramenta que nos permite executar JavaScript fora do navegador, no lado do servidor. Ele foi um dos responsáveis por popularizar o JavaScript em diversas áreas. Podemos criar muito mais com JavaScript graças ao Node.js.

A instalação do Node.js é simples. Acesse o site oficial do Node.js e baixe a versão LTS.

A versão LTS é a mais estável, então a não ser que precisemos de alguma funcionalidade nova e mais atual do NodeJs, a versão LTS é a que devemos usar. Após baixar o instalador, basta executar e seguir os passos:

Quando chegar na tela a seguir, tenha a garantia de que pelo menos as opções Node.js runtime, npm package manager e Add to PATH estejam selecionadas.

Na próxima tela, o instalador vai perguntar se você gostaria de instalar outras ferramentas. Selecione a opção que vai instalar automaticamente essas ferramentas. É muito importante selecionar essa opção no Windows, porque alguns pacotes do npm não conseguem rodar nativamente no Windows sem algum tipo de compilação. Essas ferramentas vão cuidar da compatibilidade com o Windows.

Depois disso, é só concluir a instalação. Algumas janelas de terminal se abrirão automaticamente indicando o progresso da instalação.

Observação: Caso a indicação de progresso pareça estagnada por muito tempo, você pode pressionar espaço ou esc. Neste caso, a instalação do node não está congelada, é apenas a indicação de que não está atualizando quando deveria.

Após terminar a instalação, é recomendado reiniciar a máquina, nem sempre é necessário, mas é uma garantia de que o NodeJS foi escrito corretamente no caminho do PATH do Windows.

Depois de todo esse processo, vamos rodar os seguintes comandos para garantir a instalação do Node.js e do npm.

Para isto abra o terminal do cmder.

No terminal aberto execute:

node --version

npm --version

Cypress

Bom já vimos que está tudo ok com a versão do Node.js, agora vamos criar uma pasta para nosso projeto e acessá-la para realizar a instalação.

Nessa pasta do projeto que vamos realizar a instalação do Cypress. Antes de instalar o Cypress execute o comando abaixo para iniciarmos o nosso projeto, com esse comando o arquivo package.json será criado.

npm init -y

Agora sim vamos instalar o Cypress via npm. 

npm install cypress 

Após isso vamos abrir esse projeto em um editor de código, eu utilizo o VSCode 

Visual Studio Code

Acesse o site do VSCode, e clicar em "Download for Windows". O download será iniciado, após a conclusão clique no arquivo que apareceu no seu navegador. Caso o arquivo não apareça no navegador, procure por "VSCodeUserSetup" na pasta Downloads do gerenciador de arquivos do seu computador.

Após abrir o arquivo, você deverá aceitar alguns termos de uso. Aceite-os e avance na instalação. Um ponto IMPORTANTE é não esquecer de marcar a opção "Add to path" para que o VS Code fique disponível nas suas variáveis de ambiente. Copie as configurações do exemplo abaixo. Após a instalação, se tudo ocorrer bem, basta abrir o editor.

Ao abrir o Visual Studio Code, a primeira vista, temos algumas opções de customização. A direita da sua tela, você pode escolher entre os temas Light, Dark e High Contrast, o programa também te oferece a opção de ver mais temas, logo abaixo.

Projeto

Nesse projeto ainda não vemos nada do Cypress. Precisamos executar o Cypress pela primeira vez para que sua estrutura de pasta seja criada.

Para executar o Cypress de uma forma mais simples vamos editar o arquivo package.json criado acima, inserindo o trecho abaixo dentro da chave scripts.

"cypress": "cypress open" 

Após realizar essa alteração no package.json, nós iremos abrir o Cypress pelo terminal, nesse ponto tenha a certeza que o terminal está sendo executado em modo administrador. Eu uso o terminal de dentro do VSCode mesmo pela praticidade de já estar dentro da pasta do projeto. Esse é um ponto importante preciso estar na pasta do projeto para executá-lo.

Caso você tenha algum erro ao executar pelo terminal dentro do VSCode eu recomendo que você executei o comando em um terminal separado do VSCode, assim você poderá executá-lo como administrador e com isso não terá erro ao rodar o comando abaixo.

npm run cypress 

Após isso a interface gráfica do Cypress irá abrir. Por default ele já vem com vários testes exemplos.

Pronto agora o Cypress já está instalado e toda vez que quiser executá-lo basta utilizar o comando: npm run cypress .

Após a primeira execução do Cypress repare que no seu projeto agora aparece a pasta Cypress e dentro dela mais 4 pastas que compõem a estrutura do Cypress.

De uma fora bem resumida essas 4 pastas são:

• fixtures: Utilizada para os arquivos de dados fixos, como mocks que serão utilizados nos testes;
• integration: Utilizada para os arquivos de testes;
• plugins: Utilizada para arquivos que eu posso criar/editar para modificar ou estender o comportamento interno no Cypress;
• support: Utilizada para arquivos de importação e comandos personalizados que podemos criar dentro do Cypress,

Essa estrutura de pasta é o default do Cypress. Ela pode ser alterada se necessário, mas isso seria um assunto para um novo artigo.

O propósito desse artigo era deixar uma instrução mais detalhada da instalação do Cypress, pois quando eu realizei a primeira instalação eu encontrei vários passo-a-passo em diferentes lugares, e seguindo um ou outro eu tive que refazer, então fiz esse compilado aqui de uma forma simples que fez sentido para mim e depois me ajudou bastante, espero que ajude vocês e muito obrigada se você chegou até o final.