Diurno

Automatizando Testes de Front-End com o Selenium

por: Lucas Assis

data: 21/06/2019

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no whatsapp
Compartilhar no linkedin
Compartilhar no facebook
Compartilhar no twitter
Compartilhar no whatsapp
Compartilhar no linkedin

O desenvolvimento de softwares de qualidade depende da existência de testes para garantir a consistência do que foi programado. Deste modo, com o crescimento do sistema e  com a implementação de novas funcionalidades,  tem-se a garantia de que aquilo que existia anteriormente não foi impactado.

A existência de testes que garantem a estabilidade do código é bastante comum no back-end das aplicações. Desta forma, muitos desenvolvedores já adotaram esta prática por compreender sua importância. Apesar disto, os testes na camada superior, o front-end, acabam sendo deixados de lado e não recebem a devida importância.

Sendo assim, quando é necessário modificar uma tela que possua um grande formulário, muito tempo é gasto para conferir se a funcionalidade original não foi impactada além do que se gasta testando se as mudanças foram executadas com sucesso.

Uma solução para este problema é a criação de testes automatizados que testam o front das aplicações. Neste cenário, surge o Selenium. Ele apresenta um conjunto de ferramentas que nos ajudam a melhorar o desempenho durante o desenvolvimento. Podemos destacar duas ferramentas principais deste conjunto: o Selenium WebDriver e o Selenium IDE.

 

Selenium IDE

O Selenium IDE é uma extensão presente no Chrome e Firefox que permite a criação de testes rápidos. Ele apresenta uma interface gráfica, não sendo necessário digitar nenhuma linha de código para a criação dos testes. Além disso, também permite gravar interações com a tela que podem ser reproduzidas posteriormente como testes.

Ele também possui opções para depuração que auxiliam na execução dos testes. Com isso, se apresenta uma ferramenta simples e prática, que permite o acompanhamento visual das interações com a tela, além da possibilidade de utilização de “asserts”.

No Chrome Web Store, esta ferramenta pode ser instalada clicando aqui.

Na imagem abaixo está apresentado um exemplo de teste do Selenium IDE. Neste teste, a partir do google, acessa-se a página da DTI e posteriormente a página de vagas.

Selenium IDE

 

Selenium WebDriver

O Selenium WebDriver é uma API  (Application Programming Interface) que está disponível para várias linguagens de programação, tais como Java, C#, Ruby, Python e JavaScript. Ele permite que sejam criados testes automatizados para o front-end da mesma forma como são desenvolvidos os do back-end.

Uma característica muito interessante da ferramenta é a possibilidade de se criar testes contemplando vários navegadores diferentes, garantindo a funcionalidade do sistema em diversos ambientes. Com isso, é possível melhorar ainda mais a qualidade do que é desenvolvido e a portabilidade do código.

O programa de teste desenvolvido tem a capacidade de controlar um navegador, como o Chrome ou Firefox, e simular todas as interações do usuário com a tela. Para identificar algum dos elementos exibidos, por exemplo, pode-se passar o id, nome, classe css ou xpath do campo. Deste modo, quanto melhor o código do sistema testado, mais fácil será criar um teste. Um problema recorrente destes testes é a existência de ids repetidos numa mesma página, o que não só dificulta a execução como também é uma má prática. Outro ponto importante a ser ressaltado é que o WebDriver permite que o programador assista a simulação que está sendo executada, ou seja, uma janela do navegador escolhido é aberta, e permite que haja uma análise visual do que está sendo feito.

Mais informações sobre esta ferramenta e como incluí-la no projeto podem ser obtidos na página oficial do Selenium.

Usos extras para o Selenium

Além de ser utilizado para testes de tela, o Selenium pode ser muito útil quando se deseja testar o funcionamento de todo o sistema. Um exemplo prático na tribo Triforce é a existência de um formulário que possui mais de 40 campos em um dos sistemas do nosso Squad Empresarial. A cada nova implementação era necessário preencher manualmente este formulário, tomando cerca de 5 a 10 minutos para os casos mais complexos. Com a automação gerada, após a criação do roteiro de preenchimento do formulário, está sendo possível preenchê-lo em menos de 1 minuto. Esta automação proporcionou um ganho significativo para a produtividade da equipe.

Esta ferramenta possui, ainda, diversas aplicações práticas que podem acelerar o dia-a-dia do desenvolvedor, como, por exemplo, em um apontamento automático de horas.

Ao passo que apresenta uma enorme gama de possibilidades, a utilização do Selenium é extremamente simples. Com apenas alguns minutos, é possível criar pequenas POCs de aprendizado para, posteriormente, passar a utilizar a ferramenta em sistemas reais, alcançando ganhos palpáveis em um pequeno espaço de tempo.