Encontrando os elementos de uma página com o Selenium

Como já disse em outro post, um comando do Selenium é composto por uma ação e parâmetros. Na grande maioria dos comandos, o primeiro parâmetro é usado para especificar um locator. O locator é uma forma de selecionar um elemento html da página, por exemplo um botão, uma div, um link ou qualquer outra tag html.

O Selenium disponibiliza diversas formas de selecionar um elemento e para isso, um locator deve ser escrito da seguinte maneira:

tipo=expressao

Usando a própria nomenclatura da documentação, o tipo de um locator pode ser:

  • id
  • name
  • identifier
  • link
  • dom
  • xpath
  • css

Para exemplificar cada locator, vamos tomar como base o seguinte código html:

<html>
<head>
 <title>Locators no Selenium</title>
</head>
<body>
 <div id="menu">
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/contato" title="Acesse a pagina de contato">Contato</a></li>
  </ul>
 </div>
 <div id="search">
  <form action="/">
   <input type="text" name="s"/>
  </form>
 </div>
</body>
</html>

O locator id é utilizado apenas para encontrar elementos com o id especificado. No nosso exemplo, para você verificar que a div com id menu existe, você tem que usar o seguinte comando:

verifyElementPresent id=menu

O locator name é parecido com o anterior, porém como o próprio nome diz, é utilizado para selecionar elementos que tenham o atributo name especificado. Por exemplo, digite selenium no elemento com name s:

type name=s selenium

O locator identifier é uma junção entre os dois locators anteriores. O Selenium primeiramente tenta encontrar um elemento pelo id. Se não encontrar ele tenta localizar um elemento pelo atributo name.

verifyElementPresent identifier=menu
verifyElementPresent identifier=s

O locator link é utilizado para selecionar links na página pelo texto de exibição. Geralmente ele é utilizado com o comando click.

click link=Home

Com o locator dom, você seleciona os elementos com expressões Javascript. Você pode tanto acessar o elementos pelo objeto document, como também pode escrever uma função que retorne um elemento.

verifyElementPresent dom=document.forms[0]
verifyElementPresent dom=function getMenu(){ return document.getElementById(‘menu’); } getMenu();

Com o locator xpath, é possível selecionar os elementos via Xpath. Essa forma é muito poderosa pois o Xpath foi criado exatamente para buscar elementos em um documento XML e por isso há diversas funções que facilitam isso. Em outro post vou detalhar mais sobre o que é possível fazer com Xpath. No exemplo abaixo, utilizei a função contains para pegar o link que contenha no title a string “Acesse”:

verifyElementPresent xpath=//a[contains(@title,'Acesse')]

O locator css deve ser usado por quem tem familiaridade com CSS Selectors. Esse tipo de expressão é bem parecida com o Xpath e é tão poderosa quanto. A diferença é que é uma sintaxe mais voltada para um documento HTML.

verifyElementPresent css=#menu

Agora que você aprendeu quais são os tipos de locator que o Selenium interpreta, vou contar uma dica. Os locators dom, xpath e identifier não precisam ser explicitados, ou seja, você pode inserir a sua expressão sem escrever “tipo=” e se ela começar com “document.” será interpretada pelo locator dom. Se começar com “//” será interpretada pelo xpath. E se não começar com nenhum dos dois, será interpretada pelo identifier.

Exemplos:

verifyElementPresent document.getElementById(‘menu’)
verifyElementPresent //div[@id="menu"]
verifyElementPresent menu

Como os locators identifier e xpath são os mais usados, na grande maioria dos testes você não vai precisar explicitar o locator.

Para quem quiser brincar e ver funcionando todos esses locators, eu criei um teste selenese que verifica os elementos da página usando todos os tipos de locators. Baixe-o aqui. O teste vai abrir uma página com o mesmo código html de exemplo no começo do post.

Para facilitar nossa vida, a IDE possui um botão chamado find que ao ser clicado destaca em verde o locator na página. Isso ajuda muito quando se está criando um novo teste, ou até mesmo corrigindo um antigo e você quer identificar se está selecionando o elemento certo.

Bom, é isso aí galera. Qualquer dúvida só perguntar que o seu Enium responde :)

Tags: , ,

  • http://www.jamw.com.br JamW

    Excelente post! Partindo deste, devo postar alguns exemplos práticos para a galera. Parabéns!

  • http://www.jamw.com.br JamW

    Excelente post! Partindo deste, devo postar alguns exemplos práticos para a galera. Parabéns!

  • http://www.loopsistemas.com.br Pedro

    Muito bom post!

    Agora, tenho uma dúvida, que talvez vc possa me ajudar.

    Tenho um menu, que quando se posiciona o cursor domouse e cada palavra, ele desce um menu de forma semelhante ao windows.

    O problema, é que pelo que vi, o selenium não tem uma forma de gravação ‘analógica’ ou seja, ele não tem uma segunda maneira de gravar aonde o movimento do mouse é reproduzido detalhadamente. E não consegui ativar o menu utilizando: MouseDown, Click, MouseMove, entre outros.

    Você tem alguma idéia de como esse reconhecimento do menu pode ser feito?

    Agradeço pela atenção

  • http://www.loopsistemas.com.br Pedro

    Muito bom post!

    Agora, tenho uma dúvida, que talvez vc possa me ajudar.

    Tenho um menu, que quando se posiciona o cursor domouse e cada palavra, ele desce um menu de forma semelhante ao windows.

    O problema, é que pelo que vi, o selenium não tem uma forma de gravação ‘analógica’ ou seja, ele não tem uma segunda maneira de gravar aonde o movimento do mouse é reproduzido detalhadamente. E não consegui ativar o menu utilizando: MouseDown, Click, MouseMove, entre outros.

    Você tem alguma idéia de como esse reconhecimento do menu pode ser feito?

    Agradeço pela atenção

  • http://www.seuenium.com.br Enium

    Nunca passei por esse problema, mas acho que o comando seria mesclar mouseOver com os comandos waitFor*, ou seja, use o comando mouseOver em cima da palavra que irá abrir o menu, em seguida o comando waitForVisible para esperar o menu aparecer e depois o click.
    Espero ter ajudado.
    []s

  • http://www.seuenium.com.br Enium

    Nunca passei por esse problema, mas acho que o comando seria mesclar mouseOver com os comandos waitFor*, ou seja, use o comando mouseOver em cima da palavra que irá abrir o menu, em seguida o comando waitForVisible para esperar o menu aparecer e depois o click.
    Espero ter ajudado.
    []s

  • http://www.loopsistemas.com.br Pedro

    =//

    Nem funcionou. Eu não sei… é como se o mouse não passasse pelo menu. Mas o firebug até mudou de cor na hora que o MouseOver ocorreu. Ou seja, o firebug percebeu o mouse, mas o sistema não =/

    Mas mesmo assim obrigado! =]

  • http://www.loopsistemas.com.br Pedro

    =//

    Nem funcionou. Eu não sei… é como se o mouse não passasse pelo menu. Mas o firebug até mudou de cor na hora que o MouseOver ocorreu. Ou seja, o firebug percebeu o mouse, mas o sistema não =/

    Mas mesmo assim obrigado! =]

  • http://www.seuenium.com.br/2009/11/04/beneficios-em-usar-css-locators-no-selenium/ Benefícios em usar CSS locators no Selenium | Blog do Seu Enium

    [...] Se você não sabe o que é um locator, dê uma olhada no seguinte post: “Encontrando os elementos de uma página com o Selenium” [...]

  • http://www.seuenium.com.br/2010/09/03/jquery-locators-no-selenium/ JQuery Locators no Selenium | Blog do Seu Enium

    [...] expliquei aqui no blog quais são as diversas maneiras de selecionar os elementos da página com o Selenium. Mas [...]

blog comments powered by Disqus