Aprenda por definitivo a usar CSS Selector(Adeus Xpath).

bye bye bye..

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.

Let`s dance!

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!

It’s not unusual to be loved by anyone…

Referências: