Aprenda por definitivo a usar CSS Selector(Adeus Xpath).
Pra quem começa na área de testes automatizados a primeira coisa que aprende, é buscar elementos por Xpath pelo fato de existir umas ferramentas que auxiliam na busca de elementos.
Veja um exemplo de Xpath:
Chega a dar medo né?
Mas buscar elementos por Xpath é a pior escolha possível além de ficar horroroso o código e diminuir a legibilidade ,tem difícil refatoração e ainda deixa mais lento.Se e desenvolvedor colocar uma div a mais na tela acabou, vai quebrar em vários lugares do seu projeto. Então podemos resolver isso de uma maneira muito mais fácil e rápido. Com Css Selector.
Primeiro temos que saber o que é um elemento:
Com essa imagem podemos ver que uma tag, um atributo, um valor e um conteúdo, tudo isso forma um elemento.
Então para nossa alegria existem várias possibilidades de se buscar por Css Selector!
Vamos para nossa lista!
Irei colocar os mais usados para fazer as automações o resto você pode procurar na página:
1-Seleção por Classe( .classe )
Encontrar um elemento pelo nome da classe basta colocar o valor da classe com um ponto “.” na frente ou colocar a “ tag.classe”.
2- Seleção por ID( #identificador )
Encontrar um elemento por ID basta colocar o valor do atributo ID com um # na frente.
3-Seleção por Elementos( div )
Seleciona todos os elementos <p> onde o pai é um elemento <div>.
Seleciona todos os elementos <p> que são colocados imediatamente após os elementos <div>.
4-Seleção por Atributo(elemento[atributo=”valor”])
Seleciona todos os elementos com um elemento e um atributo de destino.
Seleciona todos os elementos com um atributo de título contendo a palavra “Address”.
Seleciona todos os elementos com um valor de atributo ID começando com “my”.
Seleciona cada elemento <a> cujo valor de atributo href comece com “https”.
Seleciona cada elemento <a> cujo valor do atributo href termina com “.pdf”.
Seleciona cada <a> elemento cujo valor de atributo href contém a sub cadeia “w3schools”.
5-Seleção por Filho( :first-child )
Seleciona o elemento <p> que é o primeiro filho de seu pai.
6-Seleção por Filho Escolhido( :nth-child(n) )
Seleciona o elemento <p> que é o “n é numero do” filho de seu pai.
7-Seleção por Último Filho Escolhido ( :nth-last-child(n) )
Seleciona o elemento <p> que é o primeiro filho de seu pai, contando com o último filho.
8-Seleção por Primeiro Elemento( :first-of-type )
Seleciona o elemento <p> que é o primeiro elemento de seu pai.
9-Seleção por Último Elemento( :last-of-type )
Seleciona o elemento <p> que é o último elemento de seu pai.
10-Seleção por elemento Desativado( :disabled )
Seleciona todos os elementos desativados <input>.
11-Seleção por Verificado( :checked )
Seleciona cada elemento <input> verificado.
Uma outra coisa importante você pode combinar esses seletores para fazer uma melhor busca por exemplo:
Depois desse post só sair dançando de alegria e retirar os xpath do seu código!
Referências:
