Automatizando testes com TestCafe Parte 1

por | maio 22, 2020 | Automação de Testes, Tutoriais | 0 Comentários

Depois de muito tempo sem escrever nada, resolvi tirar um projeto da gaveta e começar uma série sobre automação de testes web. Inicialmente pretendo falar sobre ferramentas de automação end-to-end e, mais pra frente, talvez avance para testes de API, performance e outros.

A proposta da série é apresentar ferramentas que trabalho, já trabalhei ou gostaria de trabalhar, de uma forma descontraída, simples e direta. Uma série sem muita enrolação, indo direto pra mão na massa, ao mesmo tempo, tentando explicar a configuração necessária de ambiente pra quem é novato.

Por que o TestCafe?

Dentre as diversas ferramentas do mercado, a opção se dá pelos seguintes motivos:

  1. É escrito em Javascript – Todo front-end moderno é escrito em JS e, usar uma ferramenta de testes que fala a mesma linguagem de sua equipe de desenvolvimento, faz com que a escrita e manutenção dos testes possam ser facilmente abraçadas pelo time.
  2. Comunidade – O TestCafe possui uma grande comunidade, o que nos possibilita um aprendizado rápido e rápido suporte/solução nos problemas que aparecem durante o desenvolvimento.
  3. MultiBrowser – Outras ferramentas de testes, como o Cypress, trabalham apenas com o Chrome. O TestCafe nos permite automatizar testes com “Google Chrome, Internet Explorer (11+), Microsoft Edge (legacy and Chromium-based), Mozilla Firefox, Safari, Google Chrome mobile, Safari mobile” (retirado da documentação do TestCafe)
  4. É a ferramenta que trabalho atualmente.

Antes de começar

Duas coisas importantes antes de botarmos a mão na massa:

  1. O ambiente de desenvolvimento do tutorial é Linux, sempre que possível, passarei também os comandos para Windows e Mac, mas não garanto o funcionamento. Sugiro que busque na internet ou faça uma pergunta nos comentários.
  2. Sempre leia a documentação oficial da ferramenta, isso vai te blindar de possíveis erros que eu ou qualquer outro que escreva um tutorial possa cometer.

Mãos na massa – preparando o ambiente

O TestCafe roda em Node.js, logo, a primeira coisa a ser instalada na maquina é esse framework.

Eu uso e recomendo o NVM (Node Version Manager) pela sua funcionalidade e facilidade de instalação mesmo para iniciantes.

Para instalar o NVM no Linux e Mac, copie e cole o comando:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Você também pode seguir as outras instruções de instalação

Para instalar o NVM no Windows, siga as instruções desse link.

Com o NVM instalado, vamos agora selecionar a versão do Node.js que utilizaremos no projeto. No terminal, digite o comando:

nvm install 12.16.3

Depois de instalado, digite o seguinte comando para verificar se temos a versão correta do Node.js instalada em nossa máquina:

node --version

Se tiver tudo certo, a resposta será a versão instalada do nodejs:

v12.16.3

Caso tenha algum problema, sugiro que refaça o procedimento da instalação. Se deu tudo certo, vamos seguir.

Mãos na massa – Começando a automatizar seus testes

Com o ambiente configurado, agora é hora de brincar com a ferramenta. A primeira coisa a ser feita é instalar o TestCafe. No seu terminal, digite:

npm install -g testcafe

A resposta esperada é essa aqui:

Tudo instalado! agora vamos criar um diretório chamado “MeuPrimeiroTeste” e dentro dele vamos rodar o comando:

npm init -y

A resposta deve ser:

Tudo criado? Então bora criar o primeiro arquivo de teste. Dentro do diretório “tests” crie o arquivo “tutorial.test.js” todo arquivo de testes do TestCafe deve conter “test.js” no final. Sua estrutura de arquivos e diretórios deve estar assim:

CHEGOU A HORA DO CÓDIGO!

Depois de toda essa jornada configurando o ambiente e estrutura de diretórios, é hora de botar a mão na massa e escrever seu primeiro teste! Sim, você é incrível e está prestes a ver rodar o seu primeiro testes automatizado bem na frente de seus olhos.

Insira o seguinte código dentro do seu arquivo “tutorial.test.js”:

import { Selector } from 'testcafe';

fixture `Testes de Login`
    .page `https://the-internet.herokuapp.com/login`;

test('Teste de login positivo', async t => {
    await t
    .typeText('#username', 'tomsmith')
    .typeText('#password', 'SuperSecretPassword!')
    .click('.fa-sign-in')
    .expect(Selector('#flash').innerText).contains('You logged into a secure area!');
});

Agora vamos entender o que está escrito no código acima:

  • Na linha 1, importamos a função “Selector” da biblioteca “testcafe”.
  • Na linha 3, declaramos o objeto que vamos testar.
  • Na linha 4, declaramos a url da página a ser testada.
  • Na linha 6, iniciamos o nosso teste propriamente dito e, na primeira linha, o nome do teste “Teste de login positivo”.
  • Na linha 8, damos a instrução “typeText”, que é o comando necessário para inserir digitar um texto no elemento “#username”, na linha 9 fazemos a mesma coisa com o seletor “#password”.
  • Na linha 10, clicamos no elemento “.fa-sign-in”, que é o botão de login.
  • Na linha 11, temos o nosso teste dizendo que o elemento “#flash” deve conter o texto “You logged into a secure area!”

Tudo escrito e entendido? Agora salve o arquivo, vá ao terminal e execute o seguinte comando seguido de Enter:

testcafe chrome tests/tutorial.test.js

O resultado deve ser parecido com esse:

E esse é o seu primeiro teste automatizado no TestCafé! Curtiu? Então dá uma visitada na documentação oficial para aprender mais sobre a ferramenta.

Nos próximos posts vamos aprimorar o nosso teste, inserindo Page Objects, e outras funcionalidades para ampliar e otimizar o uso da ferramenta.

Ficou com dúvidas? Deixa um comentário que a gente conversa.