Seletor CSS em Selenium

O que é um seletor CSS? Selenium?

A Seletor CSS em Selenium Um seletor CSS é um padrão de string que identifica um elemento web através de uma combinação de tag HTML, ID, classe e atributos. Os seletores CSS são um pouco mais avançados do que a localização por ID ou nome, mas são a estratégia mais popular entre desenvolvedores experientes. Selenium usuários porque eles podem acessar elementos que não possuem nenhum atributo ID ou Nome.

Seletores CSS em Selenium Podem assumir muitas formas, mas este guia se concentra nos cinco padrões mais comuns usados ​​em Selenium AQUI:

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

Ao usar essa estratégia em Selenium IDE, sempre prefixe o Target caixa com “css=” como demonstrado em cada exemplo abaixo.

Por que usar seletores CSS em Selenium?

Os seletores CSS são a estratégia de localização preferida para muitos. Selenium Engenheiros de automação, pois eles equilibram velocidade, flexibilidade e legibilidade. Aplicativos web modernos frequentemente usam IDs gerados dinamicamente ou removem completamente os atributos de nome, deixando os seletores CSS como a única maneira confiável de selecionar um elemento específico na página.

As principais vantagens de usar seletores CSS incluem:

• Desempenho: Os seletores CSS são processados ​​pelo mecanismo nativo do navegador, portanto, são executados mais rapidamente do que expressões XPath equivalentes, especialmente em navegadores mais antigos, como o Internet Explorer.
• Flexibilidade: Eles combinam lógica de tag, classe, atributo e correspondência parcial, permitindo que os testadores identifiquem elementos que não possuem um ID estável.
• Legibilidade: A sintaxe espelha a forma como os desenvolvedores já escrevem regras CSS, o que reduz a curva de aprendizado tanto para os engenheiros de controle de qualidade quanto para as equipes de front-end.
• Estabilidade entre navegadores: Os seletores CSS se comportam de maneira consistente no Chrome. FirefoxEdge e Safari, reduzindo falhas intermitentes em testes.

Seletor CSS de tags e IDs

Este exemplo utiliza a caixa de texto de e-mail na página de login do Facebook. O elemento tem o ID “E-mail“, e já havia sido acessado na seção “Localizando por ID”. Agora, o mesmo elemento é alvo usando um Selenium Seletor CSS com o atributo ID.

Sintaxe

css=tag#id

• tag = a tag HTML do elemento que está sendo acessado
• # = o sinal de cerquilha (ou hash), que 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.comUtilizando as ferramentas de desenvolvedor do seu navegador (ou uma ferramenta legada como o Firebug), inspecione a caixa de texto "Email ou Telefone".

Observe que a tag HTML é “entradae seu ID é “E-mailO seletor CSS completo torna-se, portanto, “css=entrada#e-mail".

Passo 2) Entrar "css=entrada#e-mail" no Target caixa de Selenium IDE e clique no botão Localizar. Selenium O IDE destaca o elemento correspondente na página.

Seletor CSS de Tag e Classe

Um seletor CSS em Selenium que usa uma tag HTML e um nome de classe segue a mesma ideia de tag e ID, mas um ponto (.) substitui o sinal de cerquilha.

Sintaxe

css=tag.class

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

Passo 1) Abra a página de demonstração. https://demo.guru99.com/test/facebook.html e examine a caixa de texto “Email ou Telefone”. Observe que a tag HTML é “entradae sua classe é “texto de entrada".

Passo 2) In Selenium IDE, digite “css = entrada.inputtexto"Na Target caixa e clique em Localizar. Selenium O IDE reconhece a caixa de texto de e-mail ou telefone.

Observe que, quando vários elementos compartilham a mesma tag HTML e classe, apenas o primeiro elemento correspondente no código-fonte é reconhecido. Examine a caixa de texto "Senha" na mesma página e observe que ela pertence à mesma classe que as caixas de texto "E-mail" ou "Telefone".

Na ilustração anterior, apenas a caixa de texto "E-mail" ou "Telefone" foi destacada porque aparece primeiro no código-fonte da página.

Seletor CSS de tag e atributo

Essa estratégia combina uma tag HTML com um atributo específico pertencente ao elemento que você deseja acessar.

Sintaxe

css=tag[attribute=value]

• tag = a tag HTML do elemento que está sendo acessado
• [ e ] = colchetes que envolvem o atributo e seu valor correspondente
• atributo = o atributo a ser usado. Escolha um que seja exclusivo do elemento, como nome ou id.
• valor = o valor correspondente do atributo escolhido.

Passo 1) Navegue até a Mercury Página de inscrição para excursões https://demo.guru99.com/test/newtours/register.php e examine a caixa de texto “Sobrenome”. Observe sua tag HTML (“input”) e seu atributo name (“lastName”).

Passo 2) In Selenium IDE, digite “css=input[nome=sobrenome]"Na Target caixa e clique em Localizar. Selenium O IDE localizou com sucesso o campo Sobrenome.

Quando vários elementos compartilham a mesma tag HTML e atributo, apenas o primeiro é reconhecido. O comportamento é idêntico ao de localizar elementos com a mesma tag e classe.

Seletores CSS: Tag, Classe e Atributo

Sintaxe

css=tag.class[attribute=value]

• tag = a tag HTML do elemento que está sendo acessado
• . = o sinal de ponto, que deve sempre estar presente ao usar um seletor CSS com classe.
• class = a classe do elemento que está sendo acessado
• [ e ] = colchetes que envolvem um atributo específico e seu valor correspondente
• atributo = o atributo a ser usado. Escolha um que seja exclusivo do elemento, como nome ou id.
• valor = o valor correspondente do atributo escolhido.

Passo 1) Abra a página de demonstração. https://demo.guru99.com/test/facebook.html e examine os campos de entrada “Email ou Telefone” e “Senha”. Observe a tag HTML, a classe e os atributos. Este exemplo usa o “índice de tabulaçãoatributo ”.

Passo 2) Acesse primeiro a caixa de texto “E-mail ou Telefone” usando um valor de tabulação de 1. Digite “css=input.inputtext[tabindex=1]" para dentro Selenium IDE's Target Na caixa de diálogo, clique em "Localizar". O campo "E-mail" ou "Telefone" será destacado.

Passo 3) Para selecionar a caixa de entrada de senha, basta substituir o valor do índice tabulado. Digite “css=input.inputtext[tabindex=2]"Na Target caixa e clique em Localizar. Selenium O IDE localizou com sucesso a caixa de texto Senha.

Texto interno – Seletor CSS

Os rótulos HTML raramente recebem atributos como id, name ou class. Então, como você pode acessá-los em HTML? SeleniumA resposta está em seu texto interior. Os textos internos são os padrões de string reais que o rótulo HTML exibe na página.

Sintaxe

css=tag:contains("inner text")

• tag = a tag HTML do elemento que está sendo acessado
• texto interno = o conteúdo de texto visível do elemento

Passo 1) Navegue até a Mercury Página inicial dos passeios https://demo.guru99.com/test/newtours/ Examine o rótulo “Senha”. Observe sua tag HTML (“font”, neste caso) e note que o elemento 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 localiza o rótulo Senha conforme mostrado abaixo.

Passo 3) Desta vez, substitua o texto interno por “Boston” para que Target torna-se “css=font:contains(“Boston”)Clique em "Localizar". A etiqueta "Boston a São Francisco" está destacada, demonstrando que Selenium O IDE consegue localizar um rótulo longo mesmo quando apenas a primeira palavra do seu texto interno é fornecida.

Seletor CSS vs XPath em Selenium

Tanto os seletores CSS quanto o XPath são usados ​​para identificar elementos da web em SeleniumApesar disso, elas possuem pontos fortes diferentes. A tabela abaixo compara as duas estratégias de localização em dimensões-chave:

Critérios	Seletor de CSS	XPath
Agilidade (Speed)	Mais rápido, funciona no mecanismo nativo do navegador.	Mais lento, especialmente em navegadores mais antigos.
Direção	Somente encaminhar (de pai para filho)	Para frente e para trás (da criança para o pai)
Sintaxe	Mais conciso e semelhante às regras CSS.	Expressões de caminho hierárquicas mais longas
Correspondência de texto	Limitado à pseudoclasse :contains()	Funções texto forte() e contém()
Melhor para	Layouts estáticos e aplicativos web modernos	Percurso complexo do DOM e localizadores baseados em texto

Melhores práticas para escrever seletores CSS em Selenium

Escrever seletores CSS confiáveis ​​vai além do conhecimento da sintaxe. As práticas a seguir ajudam os testadores a criar seletores estáveis ​​e de fácil manutenção. Selenium Scripts que sobrevivem a alterações na interface do usuário:

1. Atributos exclusivos preferenciais: Sempre escolha atributos como id, data-test-id ou name que sejam adicionados explicitamente para automação. Eles permanecem estáveis ​​mesmo quando o layout visual muda.
2. Evite seletores excessivamente aninhados: Cadeias longas como div > div > ul > li > a Quebre facilmente quando os desenvolvedores refatorarem a marcação. Mantenha os seletores o mais curtos possível.
3. Use correspondências parciais com sabedoria: Padrões como [class*="btn-primary"] toleram pequenas alterações nos nomes das classes, mas também podem corresponder a elementos não intencionais.
4. Evite localizadores baseados em índice: Seletores como nth-child(3) são frágeis porque adicionar um elemento irmão desloca todas as suas posições.
5. Validar seletores nas Ferramentas de Desenvolvedor: Antes de executar um Selenium No script, cole o seletor no Console das Ferramentas de Desenvolvedor do Chrome usando document.querySelector() Para confirmar, retorna exatamente um elemento.
6. Combine atributos para garantir exclusividade: Quando uma classe é compartilhada por muitos elementos, adicione um filtro de atributo como: input.form-control[name="email"] Para desambiguar o alvo.
7. Documentar e reutilizar: Centralize os seletores dentro de uma classe Page Object para que uma única atualização corrija todos os testes que fazem referência ao mesmo elemento.

Seguir essas diretrizes reduz a instabilidade, melhora a velocidade de execução dos testes e torna Selenium Suítes mais fáceis de manter ao longo do tempo.

Resumo: Referência rápida da sintaxe dos seletores CSS

A tabela abaixo consolida todas as informações. Selenium Padrões de seletores CSS abordados neste guia:

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]
Texto interno	css=tag:contains(“texto”)	css=font:contains(“Senha:”)

Perguntas Frequentes