Blog > Utilizando os add-ons Firebug e FirePath no suporte a criação de scripts no Webdriver

19/jan

Neste post iremos aprender como dois plugins, o Firebug e o Firepath, para o Firefox, pode nos ajudar no desenvolvimento de um script de automação de teste web com o Webdriver.

Quando desenvolvemos scripts com o Webdriver é necessário identificar sempre a forma de localização que mais tenha adequação, seja ela ID, name, CSS ou XPATH.

Veremos como a utilização de dois add-ons do Firefox nos ajudarão a localizar mais facilmente os elementos.

Firebug

Talvez esse seja um dois add-ons mais conhecidos para o Firefox.

Não veremos aqui como efetuar a instalação e partiremos diretamente para uma funcionalidade muito importante. A instalação pode ser feita pelo link https://getfirebug.com/

O Inspect Element (inspetor de Elementos) é o responsável de apresentar, de forma simples e rápida o trecho do código-fonte HTML

Assim que clicamos nesta funcionalidade e arrastamos o mouse para algum elemento em tela poderemos ver o trecho HTML referente ao elemento onde posicionamos o mouse.

OK, mas para o que isso exatamente vai servir?

Sempre que precisarmos automatizar uma página web, poderemos utilizar o Firebug para identificar os atributos do elemento. Se este elemento tem ID, name ou algum outro atributo que possamos localizar e colocar no script.

Passo a passo

Vamos agora utilizar a funcionalidade para entender como ela se comporta.

  • 1.Acesse a página http://eliasnogueira.com/qualister/exemplos/fireb...
  • 2.Abra o Firebug (pelo ícone na toolbar ou pelo menu Ferramentas -> Firebug ou Firefox > Desenvolvedor web > Firebug)
  • 3.Iremos localizar os campos E-mail, Usuário e Password
  • a.Para todos os campos clique sobre o botão de Inspeção de Elementos
  • b.Coloque o mouse sobre o campo e visualize o código-fonte deste campo
  • c.Quais os atributos que você pode utilizar para que o Webdriver localize este elemento executando o script?

Resposta: Todos! Podemos utilizar qualquer atributo para que o WebDriver encontre o elemento desejado. Mas há sempre os atributos que utilizaremos como base, pois dificilmente mudam: id ou name.

Note que todos os elementos possuem id ou name. Logo podemos utilizar um destes atributos para localizar o elemento

Assim o Firebug nos ajuda a, de maneira rápida, encontrar o trecho do código HTML referente aquele elemento, e identificar como localizá-lo no script do Webdriver.

A imagem acima apresenta a inspeção de elementos sobre o campo Usuario, mostrando o trecho de código HTML referente a este elemento. Note que podemos utilizar como localização o “id=’user’” ou “name=’username’“

Agora tente o seguinte: acione novamente o Inspetor de Elementos sobre a checkbox relacionada ao grupo “Editor” da tabela. Note que o checkbox não possui nenhum atributo. Como iremos localizá-lo?

É ai que entra o Firepath!

Firepath

O Firepath é uma extensão do Firebug (logo somente irá funcionar com o Firebug instalado) que adiciona funcionalidades de inspecionar, editar e gerar XPath 1.0, CSS 3 selectors e JQuery selectos (com a engine Sizzle).

Ele pode ser instalado pelo seguinte link https://addons.mozilla.org/en-US/firefox/addon/firepath/

Identificamos o Firepath instalado como sendo a ultima aba do Firebug

Vamos aprender na prática como ele funciona...

  • 1.Acesse a página http://eliasnogueira.com/qualister/exemplos/fireb...
  • 2.Abra o Firebug (pelo ícone na toolbar ou pelo menu Ferramentas -> Firebug ou Firefox > Desenvolvedor web > Firebug)
  • 3.Clique sobre a aba Firepath

    Note que, ao lado de uma grande caixa de texto aparecerá o texto “css”. Clique neste texto e outras opções aparecerão, que são as formas disponíveis

  • 4.Mantenha a opção CSS selecionada. Clique no botão de Inspeção de Elementos e após isso clique na checkbox.
  • 5.Note que um desenho (retângulo azul) é feito em todos os checkbox e o campo de texto apresenta a forma de localização via CSS 3
  • 6.Como o tipo de seletor CSS3 não conseguiu diferenciar os checkbox (por isso desenhou os três) não conseguiremos utilizar este seletor para que o Webdriver localize o segundo checkbox, mas já visualizamos como ele gera o código pronto pra nós
  • 7. Remova o código gerado da caixa de texto, clique sobre o texto “CSS” ao lado dela e selecione XPath
  • 8.Clique novamente no botão Inspeção de Elementos e após clique na segunda checkbox.
  • 9.Agora será possível visualizar que o desenho é feito apenas na segunda checkbox e o código em Xpath é gerado

  • 10.No Webdriver, para utilizar este Xpath criaríamos o seguinte trecho de código

Conclusão

Neste post aprendemos como utilizar o Firebug e o Firepath para localizar os elementos de forma mais rápida. Aprendemos também que, quando não conseguimos localizar um elemento por id e name, podemos utilizar XPath ou CSS para esta localização, onde podemos utilizar o suporte do Firepath se não sabemos como construir o caminho de localização.

POSTS RELACIONADOS

AGENDA

CURSOS RELACIONADOS