3 – Iniciando um Projeto no Selenium e Cucumber – Parte II

Prosseguindo com a aula passada, continuaremos a “preencher” os métodos restantes da classe “ClienteSteps.java”:

Começaremos pelo segundo Step mostrado na imagem acima. Poderíamos criar um método na “ClientePage.java” responsável pelo acesso do menu “Cliente >> Inserir”, ou então criar um novo conjunto de classes (MenusPage.java, MenusElementMap.java) onde agruparíamos todos os métodos relacionados a navegação de menus. A primeira opção evita de criar mais classes, mas a segunda opção permite uma melhor organização dos métodos (teríamos todos os métodos e WebElements de menus num lugar só).

Seguiremos a segunda opção:

As classes acima foram criadas seguindo a mesma lógica de criação das classes “ClientePage.java” e “ClienteElementMap.java” (“MenusPage.java” extende “MenusElementMap.java”, não esqueça disso).

Agora é hora de mapear os elementos de menus.

A imagem acima mostra a obtenção das informações para o menu “Clientes”. Observe que não há propriedade “id” ou propriedade “name” para ele. E agora?

Nesse caso é preciso usar xpath, e usar algumas coisinhas mais na declaração do WebElement. Observando a imagem acima, vemos que temos um objeto do tipo “a” (um link) com o texto “Clientes”. Usaremos essa informação disponível:

Na imagem acima temos um “@FindBy(xpath = “//a[text()=’Clientes’]”)” sobre a declaração do elemento. O que é isso? Basicamente ele diz que esse elemento deverá ser encontrado (“FindBy”) através do xpath informado (xpath = “//a[text()=’Clientes’]”). Esse xpath está dizendo basicamente o seguinte: “todos os links cujo texto seja igual a “Clientes””.

Pergunta: “Como você chegou a esse xpath? Como você sabia como montar o xpath? ”
Resposta: “Pesquisando”

Eu não domino xpath. Se tenho uma necessidade de algo, eu pesquiso pela solução 🙂

Sobre o “@FindBy”, este é um recurso do Selenium. Se você pesquisar na documentação do Selenium irá encontrar muitas informações a respeito.

Na imagem acima, o “@FindBy” ainda apresenta um erro. Isso se deve ao fato de ainda não ter sido realizado o “import” devido. A imagem abaixo ilustra o import a ser utilizado:

Prosseguindo com o mapeamento do menu, as imagens abaixo ilustram as informações disponíveis do submenu “Inserir”:

Observe que nesse link temos um valor de “href” (“inserircliente_identificacao.html”). Podemos utilizar essa informação, que é única na página, para elaborarmos o “FindBy”. Abaixo tem-se o resultado obtido:

Dessa vez, ao invés de usarmos xpath, utilizamos o css.

Pergunta: Poderíamos ter utilizado a mesma ideia aplicada no menu “Cliente”, com text()=’Inserir’?

Resposta: Sim, poderíamos! Contudo o link “Inserir” não é único na página, o que poderia causar algum conflito com o caminho de menu “Pedidos >> Inserir” que possui um submenu “Inserir” igual ao submenu “Inserir” do caminho “Clientes >> Inserir”. Em outras palavras: o “//a[text()=’Inserir’]” encontraria os dois objetos. Essa foi a razão de termos utilizado o “href”.

Mapeados os objetos do menu “Cliente >> Inserir”, é hora de criar o método que fará o caminhamento desse menu. Ele será feito na classe “MenusPage.java”:

Voltando à classe “ClienteSteps.java”, tem-se:

O método está pronto. Tem-se agora o método “efetuarLogin”. Para o login, criaremos as classes “LoginPage.java” e “LoginElementMap.java”.

Abaixo tem-se a classe “LoginElementMap.java” com os elementos de login já adicionados:

Abaixo tem-se a classe “LoginPage.java” com o método “efetuarLogin” já criado:

Retornando à classe “ClienteSteps.java”, o método “efetuarLogin” dela fica:

Nosso cenário está quase pronto. Vamos rodar o teste para ver se funciona. Para isso, clique com o botão direito sobre a classe “ClienteTest.java” e acesse o menu “Run As  >> Junit Test”:

Abaixo o resultado da execução:

Tudo escangalhado! Nada deu certo! Porque isso? Há um bocado de razões pelo teste não ter funcionado. Mas “vamos por partes”, como diria o saudoso Jack.

Observe que tentamos efetuar o login no sistema SEM abrir o browser E acessar a página inicial do sistema!! Isso mesmo, não temos ainda o código responsável por abrir o browser e acessar a página inicial do sistema! Essa lógica deve ser chamada antes da execução do cenário de teste: [Abrir o Browser] >> [acessar página inicial] >> [cenário de teste]

Utilizando a ferramenta chamada “imaginação”, imagine que teremos diversos cenários de testes (cadastros, consultas, pesquisas de clientes, pedidos, etc). Cada um desses cenários possui como PRÉ-REQUISITO a abertura do browser e acesso à página inicial do sistema, para só então termos a execução dos cenários propriamente dito. Ou seja, temos algumas coisas a serem feitas ANTES de cada cenário, comum a TODOS os cenários. Para situações como esta utilizamos a anotação @Before, cujo método que a possui será executado antes de cada cenário. É uma boa prática colocar essa anotação (assim como outras específicas) em uma classe à parte, chamada “TestRule”. Maiores informações podem ser obtidas no link abaixo:

http://junit.org/junit4/javadoc/4.12/org/junit/rules/TestRule.html

Abaixo tem-se a criação de uma classe nova, chamada “TestRule.java”, já com o método criado:

A anotação apresenta erro pois ainda não foi feito o import:

Após o import realizado:

OK! Classe pronta. Mas o que queremos fazer antes de cada cenário? Queremos abrir o browser e acessar a página inicial do sistema.

Para abrir o Chrome, precisamos utilizar o objeto WebDriver. Para isso, declaramos uma variável estática do WebDriver, conforme ilustrado abaixo:

Realizando o import correto:

Abaixo o código necessário para iniciar o driver, abrir o browser e acessar a página:

Ainda tem um erro, novamente porque o import ainda não havia sido realizado:

A primeira linha de código indica onde está o executável do Chrome.

A segunda linha de código indica que vamos utilizar o Chrome.

A terceira linha de código indica para abrir a página maximizada.

A quarta linha de código indica o endereço a ser aberto. Nesse caso um caminho local dado que estamos executando localmente o “index.html”.

Agora, como utilizamos essa classe nos nossos cenários? Simples: basta executar a classe “ClienteTest.java”, clicando com o botão direito sobre ela e acessando o menu “Run As >> Junit Test”:

Como resultado, foi aberto o Chrome e acessado a página inicial conforme ilustrado abaixo:

Contudo, erros ainda apareceram:

Tivemos um “NullPointerException” na linha 6 da classe “LoginPage” dentro do método “efetuarLogin”. Ao clicar sobre o link “LoginPage.java: 6” mostrado no print acima, somos direcionados ao ponto do erro:

O objeto “login” estava nulo no momento da execução. Por que isso? Porque não tínhamos inicializado os WebElements ainda. Aliás, em nenhuma das classes eles foram inicializados. Para inicializá-los é preciso criar um construtor em cada uma das classes de sufixo “Page” e dentro deles chamar o método do Selenium chamado “PageFactory”.

Porém, antes disso, vamos adicionar mais um método na classe “TestRule.java” pois iremos utilizá-la no “PageFactory”:

Basicamente é um método estático que retorna o objeto WebDriver da classe “TestRule.java”. É preciso criar esse método pois ele será utilizado nos métodos construtores.

Feito isso, iremos criar métodos construtores nas classes de sufixo “Page”:

Os construtores fazem uma chamada ao método “initElements” (inicializar os elementos) recebendo em um dos parâmetros o objeto driver da classe “TestRule.java”.

Criados os construtores, agora é hora de executar o teste novamente:

E o resultado é:

Falhou!!! Tá difícil, hein!!! O que aconteceu? Vamos analisar o log:

Basicamente o que temos no log é o seguinte:

org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {“method”:”xpath”,”selector”:”//a[text()=’Clientes’]”}

Ele diz que não conseguiu encontrar o elemento através do xpath de “//a[text()=’Clientes’]”. Esse é o menu Clientes! Mas em que ponto exatamente houve a falha do teste? Novamente, observe no log do console:

Ao clicar sobre o link “(MenusPage.java:14)” mostrado na imagem acima, somos direcionados para o exato ponto onde tivemos a falha da execução:

Basicamente, o Selenium não conseguiu clicar sobre o menu porque segundo ele o elemento não existia. Então vamos olhar a tela do sistema, no momento onde ela parou: O sistema não tinha logado!!!!!!

O sistema simplesmente não efetuou o login! Mas qual a razão disso?

Um dos objetivos desse blog é mostrar meus acertos e meus erros. Pois bem! Esse problema foi um “erro” meu! Na verdade, é mais um fato novo que eu aprendi durante a elaboração dessa aula. Eu passei praticamente 2 dias tentando descobrir o porquê desse erro, sendo que quando eu executava manualmente o sistema o login era efetuado sem erros (e no TestComplete nunca tive esse problema).

Depois de muito pesquisar, descobri a causa. Como esse sistema de treinamento utiliza uma base de dados Web SQL Database criada no Chrome, o Selenium não carregava essa base ao iniciar o Chrome. Então como ele não encontrava a tabela “USUARIO” (onde são guardadas as informações de logins e senhas) estourava uma exceção “por debaixo dos panos” e o sistema travava na tela de login.

Segue então a solução: precisei colocar mais algumas linhas de código lá na classe “TestRule.java”, no método “beforeCenario”:

O que foi feito é o seguinte: como as informações de base de dados ficam nos dados de usuário do navegador, era preciso dizer ao Selenium para carregar essas informações ao abrir o Chrome. É isso o que as duas linhas de código fazem. Criam um objeto do tipo “ChromeOptions” e nele é explicitado para carregar os dados do usuário do Chrome. Em seguida é passado por parâmetro no driver (vide a seta vermelha).

O caminho “C:/Users/Windows 8/AppData/Local/Google/Chrome/User Data” indica onde estão essas informações. Esse é um caminho padrão do Chrome, bastando mudar somente o usuário. Nesse exemplo o nome do usuário é “Windows 8”. Em sua máquina deverá ser colocado o nome do usuário logado nela.

Pergunta: “Porque fazer toda essa “enrolação” do problema? Porque já não colocou o método correto logo de início? ”.

Resposta: “Para mostrar que nunca devemos perder a humildade! ”.

Réplica da Pergunta: “Bateu a cabeça? O que isso tem a ver com o problema? ”.

Falo de humildade aqui no sentido de admitir que todo dia estamos aprendendo algo novo, e que jamais devemos dizer ou convencer a si próprio de coisas como “Eu domino a tecnologia XYZ! ”, “Eu sei bastante sobre o assunto, tenho X anos de experiência! ”.

Tenha em mente que sempre há a necessidade de aprender algo novo! Essa opção do Chrome Options, por exemplo, eu aprendi enquanto escrevia essa aula. Passei uns dois dias tentando descobrir qual era o problema do sistema não logar durante a execução automatizada. Enfim, tenha em mente que ao trabalharmos com automação de testes, sempre iremos aprender algo novo.

IMPORTANTE: devido a essa peculiaridade do sistema de treinamento utilizar uma base de dados e termos que carregar as informações de usuário do Google Chrome, é importante certificar-se que o Google Chrome não possui páginas abertas no momento da execução do teste, do contrário o Selenium se perderá e o teste irá falhar miseravelmente.

Efetuado o ajuste, vamos agora executar novamente o teste (já com todas as páginas do Google Chrome fechadas):

Abaixo temos o resultado:

Observe que dessa vez o sistema logou, mas o teste não conseguiu avançar a partir dali. Olhando o log do Console tem-se a seguinte informação:

Temos a informação de que não foi possível encontrar o elemento com xpath “//a[text()=’Clientes’]”, que nada mais é o nosso menu “Clientes”. Mas ele apareceu na tela, e o xpath está correto. O que aconteceu então?

Se você não caiu de “paraquedas” aqui nas aulas de Selenium, ou seja, acompanhou as aulas de TestComplete, já tem uma ideia do que fazer: interpretar o que aconteceu!

Se o elemento está sendo exibido corretamente na tela, e não foi encontrado durante a execução, podemos levantar a hipótese: o elemento existia NO MOMENTO em que o Selenium procurou por ele? Em outras palavras: no instante que o elemento foi requisitado, ele já estava carregado na tela ou não?

Assim como no TestComplete temos implicitamente o aguardo por alguns segundos do elemento aparecer antes do teste falhar (nas propriedades do projeto se configura esse tempo), o mesmo temos no Selenium! Contudo, é preciso digitar essa linha de código, o que NÃO HAVÍAMOS FEITO ANTES. Para isso, basta adicionar a linha abaixo lá no método “beforCenario” da classe TestRule:

O que essa linha de código faz é o seguinte: ela diz para o driver aguardar por qualquer elemento aparecer na tela por até 10 segundos.

Executando novamente o teste para testar a hipótese:

Olhando a sequência de imagens acima, nota-se que agora a falha foi sobre o submenu. Porque? Porque não encontrou o submenu, sendo que encontrou o menu e havíamos setado um implicity wait de 10 segundos?

Novamente, um pouco de interpretação aqui: o funcionamento do menu desse nosso sistema de treino funciona posicionando o mouse SOBRE o menu para então o SUBMENU APARECER e então ser clicado. Embora o “click” seja efetuado, ele acaba não sendo suficiente para o submenu aparecer.

Para situações como essa é bastante comum utilizar o Actions, conforme ilustrado a seguir (não esquecer de realizar o import apropriado conforme ilustrado na segunda imagem abaixo):

Resumidamente o que o esse bloco de código faz é criar um objeto “Actions” utilizando o driver da nossa classe “TestRule”, seta os movimentos sobre o menu e submenu (linhas 17 e 18) e “constrói” um clique sobre o submenu após mover-se sobre o menu e o submenu.

Executando novamente o teste, tem-se o seguinte resultado:

Parece que executou perfeitamente o step que faz o acesso ao menu e então partiu para o terceiro step onde falhou. Contudo, ao olhar para a tela do browser:

Como assim? Diz que o acesso ao menu foi feito com sucesso, mas sequer acessou a página de dados de identificação???

Lembram-se que teoria é uma coisa e prática é outra? Pois bem, o objeto utilizado acima (Actions) é um dos mais recomendados para se utilizar em caminhamento de menus. Contudo, há sempre exceções, como no exemplo do nosso teste. Aqui simplesmente não funcionou! Como não deu certo, vamos partir para outro caminho: Robot! Vamos utilizar esse objeto para tentar realizar esse caminhamento de menu! O que ele faz é basicamente o seguinte: move o ponteiro do mouse para algum lugar da tela. Nosso objetivo será mover esse ponteiro do mouse para cima do menu para assim aparecer o submenu desejado.

Abaixo foi criado um método privado na classe “MenusPage.java” para realizar esse trabalho:

O que o método apresentado acima faz é simplesmente mover o ponteiro do mouse para alguma posição da tela. No caso essa posição se dá através de algum WebElement recebido por parâmetro, ou seja, o elemento no qual desejamos posicionar o ponteiro do mouse. Abaixo uma breve explicação sobre esse método:

// obtém a altura da página interna
long intAlturaPagina = (Long) ((JavascriptExecutor) TestRule.getDriver())                                                            .executeScript(“return document.documentElement.clientHeight”);

O que ele faz é pegar a altura da parte interna do browser (aquela parte onde ficam os elementos da página) utilizando um script java para isso, e então guarda o valor em uma variável do tipo long.

// obtém a altura da janela (browser)
int intAlturaJanela = TestRule.getDriver().manage().window().getSize().height;

Faz quase a mesma coisa que o código anterior, a diferença é que pega a altura do browser como um todo, incluindo a barra de ferramentas do browser, e não somente a parte interna da página exibida no browser.

// obtém a diferença de altura entre janela e página
int intDiferencaAltura = intAlturaJanela – (int) intAlturaPagina;

Guarda em uma variável a diferença da altura entre a janela do browser e a altura da página interna.

// obtém as coordenadas relativas do objeto
int intCoordXElemento = elemento.getLocation().getX();
int intCoordYElemento = elemento.getLocation().getY();

Obtém as coordenadas x e y do objeto desejado:

// move para a posição esperada do objeto
int intCoordXEsperada = intCoordXElemento;
int intCoordYEsperada = intCoordYElemento + intDiferencaAltura;
Robot robot = new Robot();
robot.mouseMove(intCoordXEsperada, intCoordYEsperada);

Aqui definimos as coordenadas x e y onde devemos posicionar o ponteiro do mouse. A posição x é a mesma posição x do objeto. Já a posição y é definida como a soma da posição y do elemento mais a diferença de altura entre janela e página.

Em seguida é criado um objeto “Robot” e chamado o método “mouseMove” dele passando as coordenadas esperadas.

Pergunta: “Porque a coordenada y não poderia ser simplesmente a posição y do objeto? ”

Resposta: “Porque a posição y do objeto é obtida em relação à página (mais interna, menor), enquanto que o objeto Robot precisa da posição y em relação à janela (mais externa, maior). Simplesmente tivemos que fazer um ajuste de coordenadas. ”

Elaborado o método privado, vamos chamá-lo dentro do método “acessarMenuClientesInserir” e passando por parâmetro o objeto “menuInserir”, conforme ilustrado abaixo:

“E lá vamos nós” executar novamente o teste:

FINALMENTE FUNCIONOU!

O caminho de menu foi feito, os dados das páginas foram preenchidos e o cadastro foi realizado com sucesso!!!

Nesse momento talvez esteja se perguntado do porquê não ter sido apresentado logo o objeto “Robot”, do porquê de ter sido feita toda essa enrolação até ter chegado a ele.

Com essa “enrolação” foi possível apresentar outros meios de realizar um caminhamento de menu no Selenium (utilizando Actions) e mostrar que nem tudo tem uma receita pronta: o mais importante é você ter consciência de que cada sistema tem uma peculiaridade, um comportamento diferente, o que sempre vai te obrigar a aprender algo novo em cada situação.

O objetivo desse blog é compartilhar conhecimento e experiências pessoais, então aqui vai mais uma:

Esse objeto “Robot” por exemplo, eu aprendi a utilizar ele enquanto escrevia essa aula. Sim, imagina a minha cara quando descobri que simples cliques sobre os menus/submenus não funcionariam, assim como o objeto “Actions”? Simplesmente perdi uns 2 dias entre compreensão do problema e a busca da solução.

Enfim, o recado principal da aula de hoje é: seja persistente! Haverá momentos que você poderá ficar trancado em algum problema, então é preciso ter calma para compreender o problema e buscar a solução.

OBS: Vale destacar que essa aula e aula anterior são as mais difíceis dessa “2ª Temporada” de aulas. Sendo assim as demais aulas que estão por vir serão muito mais fáceis 🙂

Na próxima aula, veremos uma biblioteca bastante interessante para gerar relatórios (algo equivalente ao relatório do TestComplete, mas para Selenium): o ExtentReports! Até lá! 😉

EXERCÍCIO: o objeto desse exercício é fixar conhecimentos relacionados a caminhamentos de menus com o uso de objetos Action e Robot, bem como a interpretar os resultados da execução de testes quando estes falham. Para isso:

1. Crie as classes “MenusPage.java” e “MenusElementMap.java”;
2. Mapeie os objetos de menu e submenu relativos ao caminho de menu “Inserir >> Clientes” conforme apresentado na aula;
3. Crie as classes “LoginPage.java” e “LoginElementMap.java”;
4. Mapeie os objetos de login conforme apresentado na aula;
5. Na classe “ClienteSteps.java”, desenvolva o método “acessarMenuClientesInserir()”, fazendo a chamada ao método correspondente na classe “MenusPage.java”;
6. Na classe “ClienteSteps.java”, desenvolva o método “efetuarLogin()”, fazendo a chamada ao método correspondente na classe “LoginPage.java”;
7. Crie a classe “TestRule.java” e adicione o método “beforeCenario()” com as anotações e imports necessários conforme visto na aula, bem como a variável de classe “private static WebDriver driver;” ;
8. Ainda na classe “TestRule.java”, desenvolva o método “beforeCenario()”, adicionando as linhas de código apresentadas na aula, incluindo o código referente ao implicitWait e o objeto ChromeOptions. Esse método é o responsável por abrir o browser e navegar para a página inicial, bem como setar opções do driver;
9. Ainda na classe “TestRule.java”, crie e desenvolva o método “getDriver()” conforme apresentado na aula. Ele irá retornar o objeto driver da classe;
10. Em todas as classes de sufixo “Page”, adicione seus respectivos construtores, e dentro deles coloque o código de inicialização dos elementos (PageFactory.initElements(TestRule.getDriver(), this);) ;
11. De volta à classe “MenusPage.java”, desenvolva o método “acessarMenuClientesInserir()” conforme visto em aula para a situação em que irá utilizar o objeto ROBOT, e utilizando o método privado que move o mouse sobre o elemento. Não esqueça de copiar o método privado fornecido abaixo para dentro da classe, e realizar os imports necessários;
12. De volta à classe “LoginPage.java”, desenvolva o método “efetuarLogin()”;
13. Execute o teste com o uso da classe “ClienteTests.java” e veja se funcionou. Faltou algo? Faltou alguma implementação? Investigue, revise seu código… Lembre-se de fechar todos os browsers antes de cada execução;
14. Encontrando alguma dificuldade em executar, escreva nos comentários. Farei o possível para ajudá-lo! 😉

OBS: É importante ter seu código funcionando corretamente ao final dessa aula pois ele será utilizado na próxima aula.

 

EXTRA: código do método privado “moverMouseSobreElemento(Weblement elemento)”

private void moverMouseSobreElemento(WebElement elemento) throws Exception {
// obtém a altura da página interna
long intAlturaPagina = (Long) ((JavascriptExecutor) TestRule.getDriver())
.executeScript(“return document.documentElement.clientHeight”);

// obtém a altura da janela (browser)
int intAlturaJanela = TestRule.getDriver().manage().window().getSize().height;

// obtém a diferença de altura entre janela e página
int intDiferencaAltura = intAlturaJanela – (int) intAlturaPagina;

// obtém as coordenadas relativas do objeto
int intCoordXElemento = elemento.getLocation().getX();
int intCoordYElemento = elemento.getLocation().getY();

// move para a posição esperada do objeto
int intCoordXEsperada = intCoordXElemento;
int intCoordYEsperada = intCoordYElemento + intDiferencaAltura;
Robot robot = new Robot();
robot.mouseMove(intCoordXEsperada, intCoordYEsperada);

}