Tutorial de Utilização do Selenium
Autora: Regina Márcia Rodrigues
Belo Horizonte, Dezembro 2014.
Sumário
Lista de Figuras 4
1. INTRODUÇÃO 6
2. INTRODUÇÃO PARA O SELENIUM IDE 6
2.1 Download e Instalação 7
2.2 Características do Selenium IDE 9
2.2.1 Barra de Menu 9
3. cRIANDO SCRIPT NO SELENIUM IDE 9
3.1 Gravando Script 9
3.2 Executando o Script 12
3.3 Salvando Script de Teste 13
4. Outros Recursos do Selenium IDE 14
4.1 Configurando a Velocidade de Execução 14
4.2 Definindo qual comando Executar 15
4.3 Definir/Limpar Ponto de Inicio da Execução do Script 16
4.4 Definir/Limpar Breakpoint 17
4.5 Utilizando Procurar Botão 18
5. Comandos Selenium IDE 19
5.1 Tipos de comandos 20
5.1.1 Actions (Ações) 20
5.1.2 Acessors 20
5.1.3 Assertions (Afirmações) 20
5.2 Comandos mais Utilizados no Selenium IDE 21
6. COMO UTILIZAR O FIREBUG PARA CRIAR SCRIPTS NO SELENIUM IDE 22
6.1 Como instalar o Firebug 22
6.2 Criando um Script de Teste utilizando o Firebug 23
7. COMO IDENTIFICAR OS ELEMENTOS DA WEB UTILIZANDO XPATH E OUTROS
LOCAtors 25
7.1 Utilizando o ID como um Locator 26
7.2 Utilizando o ClassName como um Locator 26
7.3 Utilizando o Name como um Locator 27
7.4 Utilizando o Link Test como um Locator 27
7.5 Utilizando o Xpath como um Locator 28
Lista de Figuras
Figura 1 – Página download do Selenium 7
Figura 2 – Janela para Instalação de extensões e temas 7
Figura 3 – Verificação instalação do Selenium IDE 8
Figura 4 – Tela Principal do Selenium IDE 8
Figura 5 – Características do Selenium IDE 9
Figura 6 – Inserindo a URL base 10
Figura 7- Acessando comandos disponíveis 11
Figura 8 – Exibindo primeiro comando no Selenium IDE 11
Figura 9 – Inserindo novas linhas de comando 12
Figura 10 – Script completo 12
Figura 11 – Executando o Script 13
Figura 12 – Resultado da execução 13
Figura 12 – Salvando o Script de Teste 14
Figura 13 – Configurando a velocidade de Execução 15
Figura 14 – Definindo qual comando Executar 16
Figura 15 – Definindo Ponto de Inicio da Execução do Script 17
Figura 16 - Definindo Breakpoint 18
Figura 17 – Procurando Valor Alvo 19
Figura 18 – Principais componentes do Script de Teste 19
Figura 19 – Pesquisando Firebug no Firefox 22
Figura 20 – Abrindo o Firebug no Browser 23
Figura 21- Selecionando uma etapa de Teste 24
Figura 22 – Criando Script a partir do Firebug 24
Figura 23 - Tipos de localizadores no Selenium 25
Figura 24 – ID como um Locator 26
Figura 25 – ClassName como um Locator 27
Figura 26 – Name como um Locator 27
Figura 27 – Link Test como Locator 28
Figura 28 - Xpath 29
Figura 29 – Criando um Xpath 30
INTRODUÇÃO
O advento da Internet e o aumento expressivo na utilização e construção de
softwares incentivam a uma constante procura por ferramentas, técnicas e
metodologias adequadas para a garantia da qualidade.
Dentro deste contexto uma das alternativas mais usadas e aconselhadas
para garantir a qualidade dos softwares de acordo com Myers (2004) é a
realização de testes, uma vez que, auxiliam a revelar a presença de
defeitos.
Como as tendências atuais tem mostrado que existe um movimento para
automatizar testes para facilitar a realização de testes de regressão.
Selenium é uma das mais populares suítes para automatizar testes. O
Selenium foi desenvolvido de forma a apoiar e incentivar a automatização de
testes funcionais de aplicações web em uma grande variedade de navegadores
(browsers). O Selenium é open source e tornou-se uma das ferramentas mais
aceitas no mercado atualmente.
O Selenium não é apenas uma ferramenta e sim uma suíte de teste que
engloba várias ferramentas para atender diferentes requisitos e ambientes
de teste.
O Selenium é constituído dos seguintes conjuntos de ferramentas:
Selenium Integraded Development Environment (IDE)
Selenium Remote Control (RC)
Selenium WebDriver
Selenium Grid
INTRODUÇÃO PARA O SELENIUM IDE
Selenium IDE (Integrated Development Environment) é uma ferramenta
utilizada para o desenvolvimento de scripts de teste com o Selenium através
de um plugin para o Firefox [1], que torna o desenvolvimento dos scripts
mais eficiente pelo método Record and Replay (Gravação e Execução).
1 Download e Instalação
Para realizar o download do Selenium IDE vá até a url
http://seleniumhq.org/, será aberta a página principal do Selenium
selecione a aba Download como mostra a Figura 1. A versão utilizada neste
tutorial 2.8.0
Figura 1 – Página download do Selenium
Ao clicar na versão para o download será exibido um popup solicitando
permissão para instalar extensões, clicar em Permitir.
Será exibida a janela para Instalação de extensões e temas, como
mostra a Figura 2. Clicar em Instalar agora
Figura 2 – Janela para Instalação de extensões e temas
Depois de concluída a instalação, será solicitada que o Firefox seja
reiniciado. Clicar no botão Reiniciar agora para refletir a instalação do
Selenium IDE.
Uma vez que o Firefox é reiniciado, será possível verificar se a
instalação do Selenium IDE foi efetuada com sucesso como mostra a Figura 3.
Figura 3 – Verificação instalação do Selenium IDE
Ao clicar em Selenium IDE será exibida a Tela Principal, como mostra a
Figura 4.
Figura 4 – Tela Principal do Selenium IDE
3 Características do Selenium IDE
Agora vamos verificar cada característica em detalhe (Figura 5).
Figura 5 – Características do Selenium IDE
1 Barra de Menu
cRIANDO SCRIPT NO SELENIUM IDE
Antes de iniciar a criação do script, vamos fazer uma breve introdução
elementar sobre o aplicativo em teste. Como amostra estará sendo
utilizado o "Gmail" – um serviço de e-mail projetado pela Google. Como já
é popularmente conhecido não iremos entrar em maiores detalhes.
Estaremos utilizando à url https://accounts.google.com.
Todo o processo de criação do script pode ser classificado em três
etapas:
1- Gravação: o Selenium IDE grava as interações do usuário com o
navegador e, assim, as ações são chamadas de scripts;
2- Reprodução: executa-se o script gravado de forma a verificar e
acompanhar a sua estabilidade e taxa de sucesso;
3- Salvando: uma vez que o script foi gravado e está estável, salvamos
o mesmo para testes de regressão futuro.
1 Gravando Script
Vamos seguir uma abordagem progressiva e compreender o processo passo
a passo:
1- Abrir o https://accounts.google.com
2- Verificar Título da aplicação
3- Digitar um nome e senha de usuário valido
4- Acionar o comando para submeter os dados informados
5- Verificar se o usuário é redirecionado para a página inicial
Passo 1: Iniciar o Firefox e abrir o Selenium IDE
Passo 2: Digitar o endereço da aplicação em teste
(https://accounts.google.com) dentro da URL base, como mostra a Figura 6.
Figura 6 – Inserindo a URL base
Passo 3: Por padrão o botão de gravação está ligado (ON) . Lembre-se de
liga-lo se estiver desligado (ON), de modo a permitir a gravação.
Passo 4: Abrir a aplicação em teste (https://accounts.google.com) no
Firefox.
Passo 5: Verifique se o título da aplicação está correto. Para fazer isso,
clique com o botão direito em qualquer lugar da página exceto no hiperlink
ou imagens. O botão direito abre o contexto do Selenium IDE com a lista de
comandos disponíveis. Selecione a opção "Exibir todos os comandos
disponíveis". Será aberto outro menu contendo os comandos disponíveis e
aplicáveis. Selecione o comando "Assert Title Gmail" para verificar o
título da página, como mostra a Figura 7.
Figura 7- Acessando comandos disponíveis
Após que clicar na opção "Assert Title", será exibida uma etapa do
teste no Selenium IDE Editor, como mostra a Figura 8.
Figura 8 – Exibindo primeiro comando no Selenium IDE
Passo 6: Entre com um usuário válido no campo
do Gmail
Passo 7: Entre com uma senha válida no campo do Gmail
Você pode verificar que todas as ações feitas no Gmail podem ser
visualizadas no Selenium IDE Test Editor, como mostra a Figura 9.
Figura 9 – Inserindo novas linhas de comando
Passo 8: Clicar no comando [Fazer Login] para completar o processo de login
O usuário será redirecionado para a página do e-mail se seus dados
estiverem corretos.
Passo 9: Para concluir clicar no botão de gravação para desligar. A Figura
10 mostra o script completo.
Figura 10 – Script completo
2 Executando o Script
Agora que já criamos o nosso primeiro Script no Selenium IDE, vamos
executá-lo para verificar se o mesmo está estável. Clique no botão de
reprodução, como mostra a Figura 11.
Figura 11 – Executando o Script
Após a execução do teste, caso todas as etapas do teste tenham sido
concluídas com sucesso as mesmas estarão na cor verde, como mostra a
Figura 12.
Caso alguma etapa do teste não tenha sido concluída com sucesso a
mesma estará na cor vermelha. E o painel do Teste irá marcar que a
execução falhou.
Figura 12 – Resultado da execução
3 Salvando Script de Teste
Depois de executado o teste e o mesmo está estável e hora de salvar o
script de teste criado.
Para salvar o Script de Teste, clique em Arquivo na barra de Menu e
selecione a opção "Salvar Teste Como".
Será exibida uma janela para informar o diretório onde deseja salvar o
Script de Teste e informar o Nome do Script de Teste. Vamos salvá-lo como
"Login Gmail – Válido". Clique no botão Salvar, como mostra a Figura 12.
Observe que o Script de Teste será salvo no formato HTML.
Figura 12 – Salvando o Script de Teste
Outros Recursos do Selenium IDE
1 Configurando a Velocidade de Execução
Ao testar aplicações web podemos nos deparar com vários cenários em
que uma ação executada pode desencadear um carregamento de página. Nestes
casos precisamos saber como lidar com tais cenários.
Para evitar falhas durante a reprodução durante a execução destes
cenários o Selenium IDE permite que a velocidade de execução possa ser
configurada. A Figura 13 mostra onde o comando está localizado.
Figura 13 – Configurando a velocidade de Execução
2 Definindo qual comando Executar
O Selenium IDE permite ao usuário executar uma única etapa do Script
de Teste sem a necessidade de executá-lo por inteiro.
Clicar com o botão direito em cima de uma linha do script, será
exibida janela para selecionar a opção "Executar Este Comando", como
mostra a Figura 14. Está opção pode ser utilizado quando desejar
verificar o comportamento de uma etapa particular do teste.
A execução deste comando pode ser feita de outras três formas:
1- Através do Menu na opção "Ações"
2- Utilizando a letra "x" no teclado
3- Duplo clique na linha
Figura 14 – Definindo qual comando Executar
4 Definir/Limpar Ponto de Inicio da Execução do Script
O Selenium IDE permite ao usuário definir o inicio da execução Script
de Teste sem a necessidade de executá-lo por inteiro.
Clicar com o botão direito no editor do script, será exibida janela
para selecionar a opção "Definir/Limpar Ponto de Inicio", como mostra a
Figura 15. Está opção pode ser utilizado quando não desejar executar um
Script de Teste inteiro.
A execução deste comando pode ser feita de outras 2 formas:
1- Através do Menu na opção "Ações"
2- Utilizando a letra "S" no teclado
Figura 15 – Definindo Ponto de Inicio da Execução do Script
6 Definir/Limpar Breakpoint
O Selenium IDE permite que o usuário especifique breakpoints dentro de
um Script de Teste. Os pontos de breakpoint indicam aonde o Selenium IDE
deve pausar o Script de Teste.
Clicar com o botão direito no editor do script, será exibida janela
para selecionar a opção "Definir/Limpar Breakpoint", como mostra a Figura
16. O breakpoint deve ser utilizado em momentos em que se deseja quebrar
a execução em blocos menores para verificar a execução do Script de
Teste.
A execução deste comando pode ser feita de outras 2 formas:
3- Através do Menu na opção "Ações"
4- Utilizando a letra "B" no teclado
Figura 16 - Definindo Breakpoint
O Selenium IDE permite ao usuário aplicar vários breakpoints em um
único Script de Teste. Uma vez que a primeira seção do Script de Teste é
executado, onde o primeiro breakpoint foi definido. Para executar as
outras etapas do Script de Teste, o usuário é obrigado a executar cada
uma das etapas de forma explicita.
8 Utilizando Procurar Botão
Um dos aspectos mais importantes do Scripts de Teste do Selenium IDE é
permitir encontrar elementos da web dentro de uma página Web. Às vezes,
há elementos da web que tem propriedades análogas a eles associadas,
tornando-se um desafio para o usuário identificar um elemento web de
forma única.
Para resolver esse problema, Selenium IDE fornece o botão [Procurar]
que é utilizado como um localizador do valor fornecido no editor do
Script de Teste para identificar o elemento na GUI.
Para exemplificar, no Script de Teste feito anteriormente. Selecione
qualquer comando e observe o campo . Clique no botão [Procurar].
Note que o elemento web correspondente foi destacado em Amarelo, como
mostra a Figura 17. Se nenhum elemento web é encontrado o usuário deve
corrigir o problema que seria definir outro valor Alvo.
Assim, este procedimento garante que ao usuário a certeza sobre o
valor alvo está correta e que corresponde ao elemento certo na GUI.
Figura 17 – Procurando Valor Alvo
Comandos Selenium IDE
Cada passo do Script de Teste no Selenium IDE pode ser dividido em
três principais componentes: (Figura 18)
Comando: ações necessárias que precisam ser realizadas;
Alvo: elemento web para interagir
Valor: valor que precisa ser inserido no elemento web (Alvo)
Figura 18 – Principais componentes do Script de Teste
1 Tipos de comandos
Existem três comandos no Selenium IDE. Cada etapa do Script de Teste é
abrangida por qualquer um dos seguintes comandos (os comandos serão
explicados em detalhes nas próximas seções):
Actions;
Accessors;
Assertions.
1 Actions (Ações)
Ações são comandos que alteram o estado da aplicação como clicar em
links ou botões, selecionar uma opção em um Select ou digitar uma
sequência de caracteres em uma caixa de texto.
Ações estão disponíveis em diferentes tipos. Por exemplo:
clickAndWait: comando que irá acionar um clique e parar o teste
até que o navegador tenha terminado de carregar uma nova página.
clickAt: comando que também aciona um clique, mas leva outro
argumento: a tupla X e Y que compensar a localização real
clicando por pixels X e Y.
clickAtAndWait: combina a especificação de um deslocamento para
o local do clique e aguarda uma nova página para carregar.
2 Acessors
Acessors são comandos que permite ao usuário armazenar certos valores
em uma variável definida. Estes valores armazenados podem ser
posteriormente utilizados para criar afirmações e verificações.
Por exemplo, storeCookies (variableName) armazena todos os cookies em
uso na página atual na variável variableName . Para usar variáveis
armazenadas, a sintaxe é $ {} variablename.
3 Assertions (Afirmações)
Assertions (Afirmações) também são capazes de inspecionar a página
atual, mas:
Eles são feitos para retornar um valor booleano
Este booleano representa a conformidade do elemento a um padrão
pretendido
Normalmente, o padrão representa o estado de um elemento.
Assertions (Afirmações) são de três tipos:
Assert (Afirmar): se uma afirmação falhar, teste é abortado e
marcado como falhou:assertTitle (padrão) falhará se o título da
página não corresponde ao padrão do argumento.
Verify (Verificar): se a verificação falhar, o teste não parar,
mas um traço será impresso na log.
WaitFor : esses comandos pausam o teste até que uma condição
seja satisfeita ou um tempo limite é atingido.
2 Comandos mais Utilizados no Selenium IDE
"Comando "Descrição "Argumento "
"Open "Abre uma URL "1 "
" "especifica no browser" "
"assertTitle, VerifyTitle "Retorna o título da "1 "
" "página corrente e " "
" "compara com o Título " "
" "especificado " "
"assertElementPresent, "Verifica/Afirma a "1 "
"verifyElementPresent "presença de um " "
" "elemento na página " "
" "Web " "
"assertTextPresent, "Verifica/Afirma a "1 "
"verifyTextPresent "presença de um texto " "
" "dentro de uma página " "
" "Web " "
"type, typeKeys, "Insere um valor "2 "
"sendKeys "especifico em um " "
" "elemento web " "
"Click, clickAt, "Clica em um elemento "1 "
"clickAndWait "especifico na página " "
" "Web " "
"waitForPageToLoad "Prepara a execução e "1 "
" "espera até que a " "
" "página esteja " "
" "carregada " "
" "completamente " "
"waitForElement "Prepara a execução e "1 "
"Present "espera até que um " "
" "elemento especifico " "
" "esteja presente " "
"chooseOkOnNext "Clica em "OK" ou "0 "
"Confirmation, ""Cancel" quando a " "
"chooseCancelOn "próxima caixa de " "
"NextConfirmation "confirmação será " "
" "exibida " "
COMO UTILIZAR O FIREBUG PARA CRIAR SCRIPTS NO SELENIUM IDE
Firebug é um Add-on do Mozila Firefox. Está ferramenta nos ajuda na
identificação ou para ser mais especifico na inspeção de elementos HTML,
CSS e JavaScript em uma página Web. Ela nos ajuda a identificar
exclusivamente elementos em uma página Web. Os elementos podem ser
encontrados exclusivamente com base em seu tipo, que será o que iremos
discutir nas próximas seções.
1 Como instalar o Firebug
Inicie o Firefox, vá em Ferramentas e selecione a opção Complementos e
pesquise por Firebug, como mostra a Figura 19.
Figura 19 – Pesquisando Firebug no Firefox
Clicar em Instalar.
Observe que no canto direito da Barra de Ferramentas é exibido o ícone
do Firebug.
2 Criando um Script de Teste utilizando o Firebug
Ao contrário do Selenium IDE, no Firebug, criamos Scripts de Testes
automatizados manualmente, adicionando várias etapas de teste para formar
um Script de Teste lógico e coerente.
Vamos seguir uma abordagem progressiva e compreender o processo passo
a passo:
1- Abrir o https://accounts.google.com
2- Verificar Título da aplicação
3- Digitar um nome e senha de usuário valido
4- Acionar o comando para submeter os dados informados
5- Verificar se o usuário é redirecionado para a página inicial
Repetir os passos 1º ao 4º da seção 3.1
Passo 5: Abrir o Firebug no browser, como mostra a Figura 20.
Figura 20 – Abrindo o Firebug no Browser
Passo 6: Selecionar a etapa de Teste vazia dentro do Editor de Script.
Preencher no campo o tipo "Open" que abre a URL especificada no
browser, como mostra a Figura 21.
Figura 21- Selecionando uma etapa de Teste
Passo 7: Agora retorne para o Firebug no browser. Observe a tag HTML
. Copie o texto encontrado entre a tag <title>. Repita o mesmo<br />
processo para os outros campos da tela utilizando o comando [Inspect<br />
Element With Firebug], como mostra a Figura 22.<br />
<br />
Figura 22 – Criando Script a partir do Firebug<br />
<br />
<br />
Passo 8: Depois de criado o Script de Teste é só executar.<br />
<br />
<br />
<br />
COMO IDENTIFICAR OS ELEMENTOS DA WEB UTILIZANDO XPATH E OUTROS<br />
LOCAtors<br />
<br />
<br />
<br />
<br />
<br />
Locator (Localizador) pode ser denominado como um endereço que<br />
identifica um elemento web exclusivamente dentro da página Web. Locators<br />
são propriedades de um elemento HTML que o Selenium IDE precisa executar<br />
uma ação.<br />
Existe uma grande variedade de elementos da web. Os mais comuns são:<br />
TextBox<br />
Button<br />
Drop Down<br />
Hyperlink<br />
Checkbox<br />
Radio Button<br />
A identificação desses elementos tem sido um assunto muito complicado<br />
e, portanto, requer uma abordagem precisa e eficaz. Desse modo, podemos<br />
afirmar que mais eficaz o localizador, mais estável será o script de<br />
automação. Essencialmente todos os comandos Selenium exige localizadores<br />
para encontrar os elementos da web. Assim, para identificar esses<br />
elementos web é necessário entender que temos diferentes tipos de<br />
localizadores, como mostra a Figura 23.<br />
<br />
Figura 23 - Tipos de localizadores no Selenium<br />
<br />
<br />
Agora vamos entender cada um melhor. Será utilizado o nosso exemplo<br />
do Gmail para localizar diferentes tipos de elementos web, utilizando<br />
diferentes tipos de localizadores.<br />
<br />
<br />
<br />
1 Utilizando o ID como um Locator<br />
<br />
A melhor e o método mais popular para identificar um elemento web é<br />
utilizar o ID. O ID de um elemento é único (Figura 24).<br />
No nosso exemplo, iremos acessar o campo <e-mail> que é um Textbox<br />
presente no formulário de login do Gmail.<br />
1- Abra o Firefox e entre com a url "https://accounts.google.com/".<br />
2- Abra o Firebug<br />
3- Clique no ícone para inspecionar elemento com o Firebug para<br />
identificar o elemento web<br />
4- Passe o mouse sobre o elemento web (campo <e-mail> no nosso caso)<br />
que deseja realizar uma ação. Pode perceber que no Firebug as tags<br />
HTML correspondentes estão sendo destacadas<br />
<br />
<br />
<br />
Figura 24 – ID como um Locator<br />
<br />
2 Utilizando o ClassName como um Locator<br />
<br />
Há apenas uma diferença sutil entre usar ID como um localizador e<br />
usando classname como um localizador (Figura 25).<br />
No exemplo, podemos utilizar o "Precisa de Ajuda?" Hyperlink presente<br />
na parte inferior do formulário de login.<br />
1- Clique no ícone para inspecionar elemento com o Firebug para identificar<br />
o elemento web, no nosso caso "Precisa de ajuda?".<br />
<br />
<br />
Figura 25 – ClassName como um Locator<br />
<br />
3 Utilizando o Name como um Locator<br />
<br />
O locator Name é muito análogo aos dois tipos analisados<br />
anteriormente. A única diferença reside na sintaxe. (Figura 26).<br />
No exemplo, podemos iremos utilizar o campo <Senha> presente no<br />
formulário de login do Gmail.<br />
1- Clique no ícone para inspecionar elemento com o Firebug para<br />
identificar o elemento web, no nosso caso "Senha".<br />
<br />
Figura 26 – Name como um Locator<br />
<br />
<br />
<br />
4 Utilizando o Link Test como um Locator<br />
<br />
<br />
<br />
Todos os hiperlinks em uma página web pode ser identificado utilizando<br />
o locator Link Text. Os links em uma página web pode ser determinado com<br />
a ajuda da tag HTML <a>. A tag HTML é utilizada para criar os hiperlinks<br />
em uma página web e o texto entre elas constitui no texto do link (Figura<br />
27).<br />
No nosso exemplo, iremos utilizar o acesso ao "Criar uma conta"<br />
presente na parte inferior do formulário de login do Gmail.<br />
1- Clique no ícone para inspecionar elemento com o Firebug para<br />
identificar o elemento web, no nosso caso "Criar uma conta".<br />
<br />
Figura 27 – Link Test como Locator<br />
<br />
<br />
<br />
5 Utilizando o Xpath como um Locator<br />
<br />
<br />
<br />
XPath é usado para localizar um elemento da web com base no seu<br />
caminho XML. XML significa Extensible Markup Language e é usado para<br />
armazenar, organizar e transportar dados arbitrários. Ele armazena dados<br />
em um par chave-valor, que é muito semelhante ao HTML tags. Ambos sendo<br />
linguagens de marcação, o XPath pode ser usado para localizar elementos<br />
HTML.<br />
O principal em utilizar o Xpath como Locator é o fato dele examinar os<br />
vários elementos de uma página web e, assim, permitir que o usuário<br />
encontre um elemento com a referência de outro elemento.<br />
O Xpath pode ser criado de duas maneiras:<br />
Xpath relativo: começa a partir da localização atual e tem como<br />
prefixo "//", por exemplo: //span[@class='Email']<br />
Xpath absoluto: começa a partir do caminho raiz e tem como prefixo<br />
"/", por exemplo: /html/body/div/div[@id='Email']<br />
Importante<br />
A taxa de sucesso de encontrar um elemento usando XPath é muito<br />
alto. Junto com a declaração anterior, XPath pode encontrar relativamente<br />
todos os elementos dentro de uma página web. Assim, XPaths pode ser usado<br />
para localizar os elementos que não tenham id, classe ou nome.<br />
Criação de uma XPath válida é um processo complicado e complexo.<br />
Existem plug-ins disponíveis para gerar XPath, mas na maioria das vezes,<br />
o XPaths gerado não consegue identificar o elemento web corretamente.<br />
Ao criar XPath, o usuário deve estar ciente das diferentes<br />
nomenclaturas e protocolos.<br />
Exemplos Selenium XPath<br />
XPath Checker<br />
Criando XPath torna-se um pouco mais simples, utilizando XPath<br />
Checker. XPath Checker é um add-on para gerar automaticamente XPath para<br />
um elemento web. O add-on pode ser baixado e instalado como qualquer<br />
outro plug-in. O plug-in pode ser baixado a partir de<br />
"https://addons.mozilla.org/en-US/firefox/addon/xpath-checker/".<br />
Assim que o plug-in é instalado, ele pode ser visto clicando com o<br />
botão direito na página web na qual deseja identifica-lo.<br />
Clique em View Xpath para ver a expressão Xpath do elemento. A janela<br />
Xpath Checker será exibida em com a expressão Xpath em formato para<br />
edição permitindo que o usuário altere, como mostra a Figura 28.<br />
<br />
<br />
<br />
Figura 28 - Xpath<br />
<br />
<br />
Mas reiterando o que foi dito anteriormente, na maioria das vezes o<br />
Xpath não consegue identificar o elemento web corretamente. Sendo assim,<br />
recomenda-se criar o seu próprio Xpath seguindo as regras e protocolos<br />
pré-definidos.<br />
No nosso exemplo, iremos utilizar a imagem do "Google" presente no<br />
topo do formulário de login do Gmail (Figura 29).<br />
1- No campo <Comando> selecionar a opção type e inserir no campo<br />
<Alvo rel="nofollow"> o texto "// img [@ 'logotipo' class =]" ou seja, o valor do<br />
localizador na caixa a meta dentro do Selenium IDE.<br />
2- Sintaxe: XPath do elemento<br />
3- Clique no botão Procurar. Observe que a imagem seria destacado com<br />
a cor amarela, com uma borda verde fluorescente em torno do campo.<br />
<br />
Figura 29 – Criando um Xpath<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://idoc.tips/report/manual-de-utilizaao-selenium-ide-pdf-free" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Manual de Utilização Selenium IDE"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcHT8sZAAAAAPKfs_PZGhwvz-OHbUMuekQzz5xK"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2025 IDOC.TIPS. All rights reserved.
<div class="pull-right">
<span><a href="https://idoc.tips/about">About Us</a></span> |
<span><a href="https://idoc.tips/privacy">Privacy Policy</a></span> |
<span><a href="https://idoc.tips/term">Terms of Service</a></span> |
<span><a href="https://idoc.tips/copyright">Copyright</a></span> |
<span><a href="https://idoc.tips/contact">Contact Us</a></span> |
<span><a href="https://idoc.tips/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://idoc.tips/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://idoc.tips/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177830117-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177830117-1');
</script>
<script src="https://idoc.tips/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://idoc.tips/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://idoc.tips/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="IDOCTIPS_cookie_box" style="z-index:99999; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://idoc.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_IDOCTIPS_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_IDOCTIPS_cookie_box() {
document.cookie = "IDOCTIPS_cookie_box_viewed=1;max-age=15768000;path=/";
hide_IDOCTIPS_cookie_box();
}
function hide_IDOCTIPS_cookie_box() {
var cb = document.getElementById('IDOCTIPS_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var IDOCTIPS_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('IDOCTIPS_cookie_box_viewed');
if (IDOCTIPS_cookie_box_viewed) {
hide_IDOCTIPS_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
