Quantcast
Channel: Blog do Seu Enium » selenium
Viewing all articles
Browse latest Browse all 10

Benefícios em usar CSS locators no Selenium

$
0
0

Olá garotada, o velhinho voltou.

Desculpem-me. Estive ausente por um tempinho me dedicando a outros projetos pessoais. Gostaria de agradecer a todos que entraram em contato por email ou pelo blog nesse período de ausência. Não desanimei não, estou de volta :)

Resolvi falar sobre algo que vale a pena dar uma olhada. Vocês tirem as suas conclusões heheh!!!!

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”

Os princípais benefícios em usar css locators são:

  1. Expressões sucintas
  2. Teste menos sensível à alteração de template
  3. Performance nos browsers
  4. Os webmasters conhecem bem CSS locators

Vamos tomar como base o seguinte código html que descreve o menu de uma página qualquer:

<div id="menu">
 <ul>
  <li class="first">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
 </ul>
</div>

O locator mais comum e o mais usado é o xpath. Com ele você consegue selecionar praticamente tudo da página. Mas em muitos casos ele pode não ser o ideal. Imagine que temos que fazer um teste de verificar o texto do primeiro elemento do menu. O locator em xpath para esse caso seria:

xpath=//div[@id='menu']//li[@class='first']

O locator em xpath não ficou tão simples. Agora usando css locator ficaria assim:

css=#menu .first

Bem mais simples, mais sucinto, não? Essa é a sintaxe do css. Para mais informações sobre a sintaxe você pode dar uma olhada aqui

Falando agora do segundo benefício, imagine que surgiu a necessidade de zebrar o menu. Para quem não conhece, zebrar significa alternar as cores. No nosso exemplo, as linhas pares passam a ter cores diferentes das linhas ímpares; questões de usabilidade :) Para fazer isso, as linhas ímpares do menu passaram a ter um css novo “odd” e as linhas pares “even”. O html ficou assim:

<div id="menu">
 <ul>
  <li class="first even">Item 1</li>
  <li class="odd">Item 2</li>
  <li class="even">Item 3</li>
 </ul>
</div>

Se você usar o mesmo locator em xpath do exemplo anterior para selecionar o primeiro item do menu, não funcionaria. Isso porque o locator em xpath dá match nos textos, não levando em conta o contexto css. Se você ama xpath, você teria que alterar o locator para passar no seu teste, ficando assim:

xpath=//div[@id='menu']//li[contains(@class,'first')]

Foi necessário usar a funcão “contains” que verifica se a string do atributo class contém o texto “first’.

Por outro lado, o css locator do exemplo anterior não quebraria com esse novo html. Ele funcionaria sem modificação alguma. Muito bom!!!!!!!!!!!!!!

Outro benefício é a performance da execução das expressões em css nos browsers. O css é resolvido muito mais rápido do que as expressões em xpath, já que todos os browsers possuem suporte nativo para css.
Além disso, você já deve ter notado que seus testes demoram muito mais para serem executados no IE do que no Firefox. Isso porque o IE demora muito mais para avaliar as expressões em XPath do que o Firefox. Se você usar css locators, seus testes no IE irão ser executados mais rápido. Boa dica, hein?!

Por último, os webmasters tiram de letra a sintaxe do css locator. Além de eles conhecerem bem de CSS, eles usam bastante essas expressões para selecionar elementos da página via JQuery. Portanto, se você está quebrando a cabeça para definir o locator ideal para o seu comando, vá buscar ajuda com um webmaster.

Bom galera, é isso.

Voltarei a postar em breve também. Não desistam do velhinho do Seu Enium heehhe!!! Até a próxima e deixem seus comentários. Valeu!!!!!


Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles