Seletor CSS em Selenium

O que é um seletor CSS?

Seletores CSS em Selenium são padrões de string usados ​​para identificar um elemento com base em uma combinação de tag HTML, id, classe e atributos. Localização por seletores CSS em Selenium é mais complicado que os métodos anteriores, mas é a estratégia de localização mais comum de Selenium usuários porque pode acessar até mesmo aqueles elementos que não possuem ID ou nome.

Seletores CSS em Selenium têm muitos formatos, mas focaremos apenas nos mais comuns. Os diferentes tipos de localizador CSS em Selenium IDE

• Etiqueta e ID
• Etiqueta e classe
• Tag e atributo
• Tag, classe e atributo
• Texto interno

Ao usar esta estratégia, sempre prefixamos o Target caixa com “css=” como será mostrado nos exemplos a seguir.

tag e id – Seletor CSS

Novamente, usaremos a caixa de texto Email do Facebook neste exemplo. Como você pode lembrar, ela tem um ID de “email” e já o acessamos na seção “Localizando por ID”. Desta vez, usaremos um Selenium Seletor CSS com ID para acessar esse mesmo elemento.

Sintaxe

css=tag#id

• tag = a tag HTML do elemento que está sendo acessado
• # = o sinal de hash. Isso deve estar sempre presente ao usar um Selenium Seletor CSS com ID
• id = o ID do elemento que está sendo acessado

Lembre-se de que o ID é sempre precedido por um sinal de cerquilha (#).

Passo 1) Acessar www.facebook.com. Usando o Firebug, examine a caixa de texto “E-mail ou telefone”.

Neste ponto, observe que a tag HTML é “input” e seu ID é “email”. Portanto, nossa sintaxe será “css=input#email”.

Passo 2) Insira “css=input#email” no campo Target caixa de Selenium IDE e clique no botão Localizar. Selenium O IDE deve ser capaz de destacar esse elemento.

tag e classe – Seletor CSS

Seletor CSS em Selenium usar uma tag HTML e um nome de classe é semelhante a usar uma tag e um ID, mas neste caso, um ponto (.) é usado em vez de um sinal de hash.

Sintaxe

css=tag.class

• tag = a tag HTML do elemento que está sendo acessado
• . = o sinal de ponto. Isto deve estar sempre presente ao usar um seletor CSS com classe
• class = a classe do elemento que está sendo acessado

Passo 1) Vá para a página de demonstração https://demo.guru99.com/test/facebook.html e use o Firebug para inspecionar a caixa de texto “E-mail ou telefone”. Observe que sua tag HTML é “input” e sua classe é “inputtext”.

Passo 2) In Selenium IDE, insira “css=input.inputtext” no Target caixa e clique em Localizar. Selenium O IDE deve ser capaz de reconhecer a caixa de texto E-mail ou Telefone.

Observe que quando vários elementos têm a mesma tag e nome HTML, apenas o primeiro elemento no código-fonte será reconhecido. Usando o Firebug, inspecione a caixa de texto Senha no Facebook e observe que ela tem o mesmo nome da caixa de texto E-mail ou Telefone.

A razão pela qual apenas a caixa de texto E-mail ou Telefone foi destacada na ilustração anterior é que ela vem primeiro na origem da página do Facebook.

tag e atributo – Seletor CSS

Essa estratégia utiliza a tag HTML e um atributo específico do elemento a ser acessado.

Sintaxe

css=tag[attribute=value]

• tag = a tag HTML do elemento que está sendo acessado
• [ e ] = colchetes dentro dos quais um atributo específico e seu valor correspondente serão colocados
• atributo = o atributo a ser usado. É aconselhável usar um atributo exclusivo do elemento, como um nome ou ID.
• valor = o valor correspondente do atributo escolhido.

Passo 1) Acessar Mercury Página de inscrição de passeios https://demo.guru99.com/test/newtours/register.php e inspecione a caixa de texto “Sobrenome”. Anote sua tag HTML (“input” neste caso) e seu nome (“lastName”).

Passo 2) In Selenium IDE, insira “css=input[nome=últimoNome]” no Target caixa e clique em Localizar. Selenium O IDE deve conseguir acessar a caixa Sobrenome com sucesso.

Quando vários elementos possuem a mesma tag e atributo HTML, apenas o primeiro será reconhecido. Este comportamento é semelhante à localização de elementos usando seletores CSS com a mesma tag e classe.

tag, classe e atributo – Seletor CSS

Sintaxe

css=tag.class[attribute=value]

• tag = a tag HTML do elemento que está sendo acessado
• . = o sinal de ponto. Isto deve estar sempre presente ao usar um seletor CSS com classe
• class = a classe do elemento que está sendo acessado
• [ e ] = colchetes dentro dos quais um atributo específico e seu valor correspondente serão colocados
• atributo = o atributo a ser usado. É aconselhável usar um atributo exclusivo do elemento, como um nome ou ID.
• valor = o valor correspondente do atributo escolhido.

Passo 1) Vá para a página de demonstração https://demo.guru99.com/test/facebook.html e use o Firebug para inspecionar as caixas de entrada 'E-mail ou telefone' e 'Senha'. Anote sua tag HTML, classe e atributos. Para este exemplo, selecionaremos seus atributos 'tabindex'.

Passo 2) Acessaremos primeiro a caixa de texto 'Email ou Telefone'. Assim, usaremos um valor tabindex de 1. Insira “css=input.inputtext[tabindex=1]” em Selenium IDE's Target caixa e clique em Localizar. A caixa de entrada 'E-mail ou Telefone' deve ser destacada.

Passo 3) Para acessar a caixa de entrada de senha, basta substituir o valor do atributo tabindex. Insira “css=input.inputtext[tabindex=2]” no campo Target caixa e clique no botão Localizar. Selenium O IDE deve ser capaz de identificar a caixa de texto Senha com sucesso.

texto interno – Seletor CSS

Como você deve ter notado, os rótulos HTML raramente recebem atributos de id, nome ou classe. Então, como podemos acessá-los? A resposta é através do uso de seus textos internos. Os textos internos são os padrões de string reais que o rótulo HTML mostra na página.

Sintaxe

css=tag:contains("inner text")

• tag = a tag HTML do elemento que está sendo acessado
• texto interno = o texto interno do elemento

Passo 1) Acessar Mercury Página inicial dos passeios https://demo.guru99.com/test/newtours/ e use o Firebug para investigar o rótulo “Senha”. Anote sua tag HTML (que neste caso é “fonte”) e observe que ela não possui atributos de classe, id ou nome.

Passo 2) Formato css=font:contains(“Senha:”) para dentro Selenium IDE's Target caixa e clique em Localizar. Selenium O IDE deve ser capaz de acessar o rótulo Senha conforme mostrado na imagem abaixo.

Passo 3) Desta vez, substitua o texto interno por “Boston” para que seu Target agora se tornará “css=font:contains(“Boston”)”. Clique em Localizar. Você deve notar que o rótulo “Boston para São Francisco” fica destacado. Isso mostra que Selenium O IDE pode acessar um rótulo longo mesmo que você tenha indicado apenas a primeira palavra do texto interno.

Resumo

Sintaxe para localização por uso do seletor CSS

Forma	Target Sintaxe	Exemplo
Etiqueta e ID	css=tag#id	css=entrada#e-mail
Etiqueta e classe	css=tag.class	css = entrada.inputtexto
Tag e Atributo	css=tag[atributo=valor]	css=input[nome=sobrenome]
Tag, classe e atributo	css=tag.class[atributo=valor]	css=input.inputtext[tabindex=1]