Automação de testes com Protractor e Selenium WebDriver para aplicações Web
Esse tutorial tem como objetivo explicar como começar a automatizar seus testes utilizando o Framework Protractor e Selenium WebDriver com a linguagem JavaScript para aplicações Web.
Mostrarei como configurar o ambiente para a automação e um exemplo prático seguindo o padrão Page Objects, que funciona como interface de acesso a elementos da camada de visão do usuário, nessa automação representado por uma página HTML.
Aqui tem um repositório com a automação utilizada nesse tutorial.
O que é Protractor?
Protractor é um end-to-end framework para testes com aplicações Angular e AngularJS, rodando em um browser real e simulando um usuário real.
O que é o Selenium WebDriver?
Selenium WebDriver é uma ferramenta que oferece uma API que permite a interação com os elementos da tela do navegador. Ele possui suporte para diversos navegadores, alguns exemplos são: Google Chrome, Firefox e Internet Explorer.
Configuração do Ambiente
- Escolher uma IDE de JavaScript, nesse tutorial vamos usar o VS Code. Download do VS Code.
- Instalar o Node.js.
- Instalação do Protractor:
Abrindo o terminal de sua máquina digite o comando abaixo para instalar o protractor:
npm install -g protractorVerifique se o protractor está instalado digitando este comando no terminal:
protractor --version4. Download dos binários do WebDriver:
No terminal execute o comando:
webdriver-manager update
Para executar o WebDriver utilize o comando:
webdriver-manager start
Se a mensagem que o server está rodando apareceu, então tudo ocorreu bem, feche o terminal.
5. Crie uma pasta para o projeto e abra ela com sua IDE de preferencia.
6. Instalação do Chai, que é um pacote que facilita as asserções:
Para instalar o Chai utilize isso no terminal da IDE:
npm install chaiE verifique se foi instalado dessa maneira:
npm chai --versionFeche e abra novamente a IDE para que o Protractor e o Chai sejam integrados.
Principais funções do protractor
Get:
O browser é direcionado para a URL que está dentro do parênteses.
browser.get(‘www.url-exemplo.com.br');Click:
Vai ser realizado uma ação de click no elemento selecionado.
element(by.seletor('seletor')).click();SendKeys:
Serão setadas informações para campos que foram selecionados.
element(by.seletor('seletor')).sendKeys("texto");Expect:
Faz uma validação com campos de texto, na maioria das vezes serve para ver se o teste passou ou não.
expect(element(by.selector('selector')).getText()).to.be.eq(“Texto do Elemento”);Estrutura do projeto
Depois de ter configurado o ambiente e ver um pouco sobre as funções do Protractor vamos para uma demonstração. Você pode copiar o código e modificar para utilizar em seu projeto.
O objetivo desta automação é realizar login no site ‘http://automationpractice.com/’.
1. Execute o Selenium:
Utilize o comando a seguir novamente no terminal e não feche a aba para realizar os testes.
webdriver-manager start2. Crie uma estrutura de projeto como essa:
3. Crie o pageObjects:
const { element, browser } = require("protractor");class HomePage{get btnLogin() { return element(by.css('.login')) }async visit() {browser.ignoreSynchronization = true;browser.driver.manage().window().setSize(1920, 980);browser.manage().window().maximize();browser.get('http://automationpractice.com/index.php');}}
module.exports = new HomePage();
- Importa do protractor os elementos que serão utilizados nos scripts;
- Está declarando a classe do script;
- Comando para buscar um elemento Web na aplicação que será utilizado na automação;
- Está criando uma função;
- Configurando para o protractor não esperar por uma página feita com angular, sendo possível validar páginas desenvolvidas com outras tecnologias;
- Declara para que o tamanho da janela do navegador ser maximizado;
- Comando para o browser ser direcionado para a URL desejada;
- Comando para quando essa classe for chamada já estar declarada.
const { element, browser } = require("protractor");
class LoginPage{get etEmail() { return element(by.id('email')) }get etSenha() { return element(by.id('passwd')) }get btnSignIn() { return element(by.css('#SubmitLogin')) }get alertErro() { return element(by.css('.alert-danger > ol > li')) }async login(email, senha) {browser.wait(ExpectedConditions.elementToBeClickable(this.etEmail), 3000);this.etEmail.sendKeys(email);this.etSenha.sendKeys(senha);this.btnSignIn.click();}async getMensagemErro(){browser.wait(ExpectedConditions.elementToBeClickable(this.alertErro), 3000);console.log(await this.alertErro.getText());return await this.alertErro.getText();}
}
module.exports = new LoginPage();
- Espera até o elemento selecionado estar clicável;
- Envia texto para os elemento selecionado;
- Clica no elemento que foi selecionado;
- Mostra no terminal da IDE o texto que o elemento possui;
- Retorna o texto do elemento.
const {element, browser } = require("protractor");class myAccountPage{get textoMyAccount() { return element(by.css(".page-heading")) }async getTextoMyAccount(){browser.sleep(500);console.log(await this.textoMyAccount.getText());return await this.textoMyAccount.getText();}
}module.exports = new myAccountPage();
- Faz com que o navegador fique parado por 500 milissegundos (0,5 segundos).
4. A criação das Specs (são as especificações dos testes, as funções que serão simuladas e validadas pela automação) é o próximo passo:
const { browser } = require("protractor");var homePage = require('../pageObjects/homePage.po.js');var loginPage = require('../pageObjects/loginPage.po.js');var myAccountPage = require('../pageObjects/myAccountPage.po.js');const { expect } = require('chai');
describe('Login no Case:', function() {
beforeAll( function() { homePage.visit(); });
it('Realizar Login com dados inválidos', async function(){await homePage.btnLogin.click();await loginPage.login('teste@gmail.com', 'teste321');expect(await loginPage.getMensagemErro()).to.be.eq("Authentication failed.");})
it('Realizar Login com dados válidos', async function(){await loginPage.etEmail.clear();await loginPage.etSenha.clear();await loginPage.login('novoemailteste@gmail.com', 'teste123');expect(await myAccountPage.getTextoMyAccount()).to.be.eq("MY ACCOUNT");})
afterAll(function(){ browser.close(); })
});
O termo ‘await’ pausa a execução da função e espera pela resolução da execução passada para depois terminar de realizar a função e seguir o fluxo.
- Comando para declarar e importar uma classe que serão utilizadas as funções e elementos;
- Está importando uma função do Framework Chai;
- Está descrevendo a Spec;
- Antes de executar qualquer teste, ele realiza a função que visita a página da automação e configura ela;
- Está descrevendo o teste que será realizado;
- Utiliza a função de login do objeto que foi declarado;
- Faz a verificação da mensagem de erro, pegando o texto dessa mensagem e comparando com o texto dentro do parênteses;
- Esse comando limpa os campos de input dos elementos selecionados;
- Comando para que depois que todos os testes foram executados browser seja fechado.
5. O arquivo conf.js é onde estão localizadas as configurações do projeto, pode ser criada uma pasta para as configurações futuramente:
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['specs/logar.spec.js']};
- Está declarando que esse script é uma configuração do projeto;
- O endereço do Selenium está sendo registrado;
- Comando para declarar as specs que serão executadas.
Executando o teste
No terminal, dentro da IDE no projeto digite:
protractor conf.jsOs teste começarão a ser executados…
Os textos dos dois objetos foram apresentados no terminal e cada ponto verde representa um teste que passou.
Conclusão
Os testes que foram utilizados acima são simples, existem muitas outras funcionalidades para o Protractor. Esse foi só um exemplo básico para começar a automatizar seus testes.
Queria fazer um agradecimento especial ao Ernesto Barbosa por ter disseminado o conhecimento que possui e me auxiliado com essa postagem.
