Facilitando a busca de elementos utilizando XPATH e CSS Selector no Selenium Webdriver
Quando comecei a estudar sobre automação de testes, tive alguns problemas para encontrar elementos que não possuíam ID, ou name, que são atributos mais simples de serem encontrados.
Com isso, quando eu me deparava com elementos deste tipo, normalmente eu solicitava para algum desenvolvedor colocar ID’s nos elementos para que pudesse prosseguir com a automação (logo descobri que isso não era legal rs).
Os desenvolvedores sempre faziam a alteração porque sempre tive boa relação com eles, mas era algo que levava um certo tempo, afinal eles possuem outras demandas mais importantes do que ficar inserindo ID para o estagiário automatizar. Com isso eu perdia algum tempo e também fazia os desenvolvedores perderem um pouco de tempo também.
Passado algum tempo, descobri como usar o XPATH e posteriormente o CSS Selector e isso trouxe uma praticidade absurda para a criação dos meus scripts, além disso, me ajudou a centralizar todas as ações principais em métodos únicos, por exemplo o método de escrita de um texto e de click, gerando um reaproveitamento de código considerável. Dito isso, vamos prosseguir!
Porque usar o XPATH e/ou CSS Selector para encontrar elementos?
Usando essas duas formas você terá um alto nível de facilidade para encontrar qualquer elemento na página, além de te auxiliar na padronização e reutilização de código, conforme demonstrado em meu outro artigo.
Como foi visto, é interessante criar um método só para escrita, click e select, além de outros que você irá descobrir a depender do projeto que será automatizado. Em geral, é recomendado, para todas as ações que se repetem no código ao longo dos testes, que seja criada um método específico para elas.
Agora imagine que você criou um método para enviar um comando de escrita e que o mesmo recebe o ID como parâmetro para encontrar o elemento. Pronto, todos os campos de escrita serão buscados pelo ID, mas nem tudo são flores…
Supondo que o desenvolvedor não colocou ID em um determinado elemento e preferiu colocar apenas um name, então você cria outro método para buscar pelo name. Já em um terceiro elemento, ele não colocou nenhum dos dois e você consegue identificar esse elemento apenas pela classe, e novamente você vai criar outro método para escrever buscando pela classe… Bom, já se foram três métodos para fazer a mesma coisa, complicado não é?
Pelo XPATH ou CSS Selector você acaba com este problema! Não importa o atributo que ele tenha, você vai conseguir encontrar este elemento por qualquer um de seus atributos, e é aí que entra a praticidade e boas práticas de escrita de código, onde ao invés de ter três, quatro ou cinco métodos para fazer a mesma coisa, você terá apenas um, para encontrar o que deseja. O código será mais ou menos assim, se você não optar por utilizar boas práticas de escrita de código:
Na comunidade que desenvolve com boas práticas, isso seria chamado de Code Smell, traduzindo para o “baianês”, seria código fedorento!
Como encontrar um elemento pelo XPATH ou CSS Selector:
As formas para encontrar são bem similares, modificando apenas alguns detalhes. Para exemplificar, usei os campos de e-mail, senha e o botão entrar da página do Facebook.
Pelo XPATH
Esqueleto: //tag[@atributo=’conteúdo do atributo’] .
Exemplos:
- Para encontrar o campo email: //input[@id=’email’]
- Para encontrar o campo senha: //input[@name=’pass’]
- Para encontrar o botão de Login: //button[@type=’submit’]
Pelo CSS Selector
Esqueleto: tag[atributo=conteúdo do atributo] .
Exemplos:
- Para encontrar o campo email: input[id=email]
- Para encontrar o campo senha: input[name=pass]
- Para encontrar o botão de Login: button[type=submit]
O CSS Selector tem algumas funções extras para facilitar a localização de elementos com o atributo que tenha uma composição maior:
- Se tiver espaço ou caracteres especiais, colocar o conteúdo do atributo dentro de aspas simples.
Exemplo: botão de Login: button[data-testid=’royal_login_button’] .
- O asterisco * busca elementos que contêm o texto que foi passado.
Exemplo: input[id*=email] .
- O $ busca elementos que terminam com o texto que foi passado
Exemplo: input[id$=email] .
- O circunflexo ^ busca elementos que começam com o texto que foi passado.
Exemplo: input[id^=email].
Utilizando as dicas abordadas, consegui resolver o principal problema que ocorria no time que atuo: a perda de tempo tanto minha quanto dos desenvolvedores, melhoria e implementação de boas práticas no código, além de autonomia para escrever os scripts.
Espero ter ajudado, galera! Caso tenham dúvidas, me contatem pelo LinkedIn ou deixem um comentário. Terei prazer em ajudar!
