Protractor – Configurando e Criando o Primeiro Teste

No post desta semana, iremos demonstrar como criar uma configuração básica e um primeiro teste do Protractor. Para isso, utilizaremos o Notepad++ para alterar o arquivo de configuração.

Vá até a pasta onde foi instalado seu Protractor e abra o arquivo conf.js conforme imagem abaixo:

post2-1

Irei explicar cada linha acima que foi alterada.

No campo Capabilities: iremos escolher em qual browser o Protractor irá simular o teste.

Framework: iremos escolher o framework em que serão descritos os testes.

SeleniumAddress: é o endereço padrão de iniciação do Selenium Webdriver.

Specs: descreverá a Case de teste que será rodada.

BaseURL: iniciará a URL padrão de início dos testes (no caso acima, estou iniciando o próprio blog para testes).

JasmineNodeOpts: é para criar as configurações do Jasmine, mas não utilizaremos inicialmente, deixando o padrão.

Após criar o arquivo de configuração e exemplificar o que cada campo faz, iremos criar nosso primeiro teste básico de verificação de informações na tela do site. Criaremos nesse momento uma classe com o nome primeiro_spec.js, que irá validar uma mensagem ou frase qualquer no blog.

Abriremos o arquivo com o Notepad++ ou qualquer outro editor de sua preferência.

Vamos inserir o comando “browser.ignoreSynchronization = true;” na primeira linha. Esse comando é utilizado para o Protractor saber que o teste em questão é feito em sites que não utilizam o AngularJS.

Após o comando, vamos criar nossa primeira case de testes através do comando “describe”.

post2-2

Nele, descreveremos qual a situação será analisada na case. Ex: “verificar mensagens na tela”.

Após criar a case, vamos criar o primeiro teste básico, que será uma verificação se na tela inicial do blog existe o link “Contato”.

post2-3

Note que em cada caso de teste poderemos inserir uma descrição como acima.

O comando “IT” é o comando de criação do caso de teste: cada caso de teste significa um “IT” novo.

Browser.get( ) indica o caminho inicial pelo qual o site será verificado.

O comando Expect indica o que é esperado para ser validado via sistema; ou seja, esperamos que o elemento com o ID “menu-item-18” contenha o texto “Contato”.

E como verificamos o id do campo?

Muito simples: basta abrir seu navegador (no meu exemplo o Chrome), ir na tela que deseja testar, apertar o botão F12, apertar o botão Inspecionar Elemento post2-9 e clicar sobre o link/botão/texto pretendido. Assim teremos o id ou outra informação que possa ser usada pelo Protractor para encontrar o campo. Após escrever esses passos, o código ficará da seguinte forma:

post2-4

Feito isso, iremos rodar o teste e verificar se ele está correto. Vá até a pasta onde criou o arquivo de configuração e o primeiro teste, abra o Prompt de comando por ela (clique com o botão direito segurando o SHIFT na pasta aberta e selecione “Abrir janela de comando aqui”) e rode o comando abaixo:

post2-5

Em outra janela (clique com o botão direito segurando o SHIFT na pasta aberta e selecione “Abrir janela de comando aqui”), rode o comando de iniciar o teste:

post2-6

Se o teste rodar corretamente, o sistema exibirá um pontinho verde e posteriormente a mensagem de sucesso.

post2-7

Pronto! Criamos nosso primeiro teste e a partir dele temos uma gama gigantesca de comando e verificações que poderemos fazer para nossos testes. Nas próximas semanas, irei falar um pouco de manipulação de campos através do comando “SendKeys”.

Até lá! Um abraço!

 

por Sthanley Lima