Menu

Como usar o seletor CSS para identificar elementos da Web para scripts do Selenium - Tutorial do Selenium nº 6

how use css selector

Experimente Nosso Instrumento Para Eliminar Problemas

Na nossa tutorial anterior do Selenium , aprendemos diferentes tipos de localizadores. Também aprendemos como usar: ID, ClassName, Name, Link Text e localizadores XPath para identificar elementos da web em uma página da web.

Continuando com isso, hoje vamos aprender como usar o seletor CSS como um localizador . Este é o nosso 6º tutorial em nosso série gratuita de treinamento Selenium .

Usando o seletor CSS como um localizador:

Seletor CSS é a combinação de um seletor de elemento e um valor de seletor que identifica o elemento da web em uma página da web. O composto de um seletor de elemento e valor do seletor é conhecido como Padrão do Seletor.

Localizador de selênio de seletor CSS

O Selector Pattern é construído usando tags HTML, atributos e seus valores. O tema central por trás do procedimento para criar o Seletor CSS e o Xpath são muito semelhantes, mas com a única diferença em seu protocolo de construção.

Como o Xpath, o seletor CSS também pode localizar elementos da web sem ID, classe ou nome.

comando grep em script de shell unix

Então, agora avançando, vamos discutir os tipos primitivos de seletores CSS:

Usando CSS Selector como Locator

O que você aprenderá:

Seletor CSS: ID

Neste exemplo, acessaríamos a caixa de texto “Email” presente no formulário de login em Gmail.com.

A caixa de texto Email possui um atributo ID cujo valor é definido como “Email”. Assim, o atributo ID e seu valor podem ser usados ​​para criar o Seletor CSS para acessar a caixa de texto do email.

Criação de seletor CSS para elemento da web

Passo 1 : Localize / inspecione o elemento da web (caixa de texto “Email” em nosso caso) e observe que a tag HTML é “entrada” e o valor do atributo ID é “Email” e ambos fazem referência coletivamente à “Caixa de Texto de Email”. Portanto, os dados acima seriam usados ​​para criar o Seletor CSS.

Usando CSS Selector como Locator 2

Verifique o valor do localizador

Passo 1 : Digite “css = input # Email” ou seja, o valor do localizador na caixa de destino no IDE Selenium e clique no botão Localizar. Observe que a caixa de texto do email será destacada.

Usando CSS Selector como Locator 3

Sintaxe

css =

  • Tag HTML - É a tag que é usada para denotar o elemento da web que queremos acessar.
  • # - O sinal de hash é usado para simbolizar o atributo de ID. É obrigatório usar o sinal de hash se o atributo ID estiver sendo usado para criar o Seletor CSS.
  • Valor do atributo ID - É o valor de um atributo de ID que está sendo acessado.
  • O valor de ID é sempre precedido por um sinal de cerquilha.

Observação: Também aplicável para outros tipos de seletores CSS

  • Ao especificar o Seletor CSS na caixa de texto de destino do Selenium IDE, lembre-se sempre de prefixá-lo com “css =”.
  • A sequência dos artefatos acima é inalterável.
  • Se dois ou mais elementos da web tiverem a mesma tag HTML e valor de atributo, o primeiro elemento marcado na origem da página será identificado.

Seletor CSS: Classe

Neste exemplo, acessaríamos a caixa de seleção “Permanecer conectado” presente abaixo do formulário de login em gmail.com.

A caixa de seleção “Permanecer conectado” possui um atributo de classe cujo valor é definido como “lembrar”. Assim, o atributo Class e seu valor podem ser usados ​​para criar um Seletor CSS para acessar o elemento da web designado.

Localizar um elemento usando Class como um seletor CSS é muito semelhante a usar ID, a única diferença está na formação da sintaxe.

Criação de um seletor CSS para elemento da web

Passo 1 : Localize / inspecione o elemento da web (caixa de seleção “Permanecer conectado” no nosso caso) e observe que a tag HTML é “rótulo” e o valor do atributo ID é “lembrar” e ambos fazem uma referência coletiva ao “Permanecer assinado na caixa de seleção ”.

Verifique o valor do localizador

Passo 1 : Digite “css = label.remember” ou seja, o valor do localizador na caixa de destino no IDE Selenium e clique no botão Localizar. Observe que a caixa de seleção “Permanecer conectado” será destacada.

Usando CSS Selector como um localizador 4

Sintaxe

css =

  • . - O sinal de ponto é usado para simbolizar o atributo de classe. É obrigatório usar o sinal de ponto se um atributo de classe estiver sendo usado para criar um seletor CSS.
  • O valor de Class é sempre precedido por um sinal de ponto.

Seletor CSS: Atributo

Neste exemplo, acessaríamos o botão “Sign in” presente abaixo do formulário de login em gmail.com.

O botão “Sign in” possui um atributo type cujo valor é definido como “submit”. Assim, o atributo type e seu valor podem ser usados ​​para criar um Seletor CSS para acessar o elemento da web designado.

Criação de um seletor CSS para elemento da web

Passo 1 : Localize / inspecione o elemento da web (botão “Sign in” no nosso caso) e observe que a tag HTML é “input”, o atributo é type e o valor do atributo type é “submit” e todos eles juntos fazem uma referência a o botão “Entrar”.

Verifique o valor do localizador

Passo 1 : Digite “css = input (type =’ submit ’)”, ou seja, o valor do localizador na caixa de destino no Selenium IDE e clique no botão Localizar. Observe que o botão “Sign in” será destacado.

Usando CSS Selector como Locator 5

Sintaxe

css =

  • Atributo - É o atributo que queremos usar para criar o Seletor CSS. Pode valorar, tipo, nome, etc. Recomenda-se escolher um atributo cujo valor identifique exclusivamente o elemento da web.
  • Valor do atributo - É o valor de um atributo que está sendo acessado.

Seletor CSS: ID / classe e atributo

Neste exemplo, acessaríamos a caixa de texto “Senha” presente no formulário de login em gmail.com.

A caixa de texto “Senha” possui um atributo de ID cujo valor é definido como “Passwd”, tipo de atributo cujo valor é definido como “senha”. Assim, o atributo ID, o atributo de tipo e seus valores podem ser usados ​​para criar o Seletor CSS para acessar o elemento da web designado.

perguntas da entrevista de selênio com 8 anos de experiência

Criação de um seletor CSS para elemento da web

Passo 1 : Localize / inspecione o elemento da web (caixa de texto 'Senha' em nosso caso) e observe que a tag HTML é 'entrada', os atributos são ID e tipo e seus valores correspondentes são 'Senha' e 'senha' e todos eles juntos faça uma referência à caixa de texto “Senha”.

Verifique o valor do localizador

Passo 1 : Digite “css = input # Passwd (name =’ Passwd ’)”, ou seja, o valor do localizador na caixa de destino no Selenium IDE e clique no botão Localizar. Observe que a caixa de texto “Senha” será destacada.

Usando CSS Selector como Locator 5

Sintaxe

css =

Dois ou mais atributos também podem ser fornecidos na sintaxe.Por exemplo, “Css = input # Passwd (type =’ password ’) (name =’ Passwd ’)”.

Seletor CSS: Substring

CSS no Selenium permite combinar uma string parcial e, assim, derivar um recurso muito interessante para criar Seletores CSS usando substrings. Existem três maneiras de criar seletores CSS com base no mecanismo usado para corresponder à substring.

Tipos de mecanismos

Todos os mecanismos subjacentes têm significado simbólico.

  • Corresponde a um prefixo
  • Corresponde a um sufixo
  • Corresponder a uma substring

Vamos discuti-los em detalhes.

Corresponde a um prefixo

Ele é usado para corresponder à string com a ajuda de um prefixo correspondente.

Sintaxe

css =

  • ^ - Notação simbólica para corresponder a uma string usando o prefixo.
  • Prefixo - É a string com base na operação de correspondência realizada. Espera-se que a string provável comece com a string especificada.

Por exemplo: Vamos considerar “Caixa de texto da senha”, de modo que o seletor CSS correspondente seja:

css = input # Passwd (name ^ = ’Pass’)

Corresponde a um sufixo

Ele é usado para corresponder à string com a ajuda de um sufixo correspondente.

Sintaxe

css =

  • # - Notação simbólica para corresponder a uma string usando sufixo.
  • O sufixo - É a string com base na operação de correspondência realizada. Espera-se que a string provável termine com a string especificada.

Por exemplo,Vamos considerar novamente a “caixa de texto da senha”, de modo que o seletor CSS correspondente seja:

css = input # Passwd (name $ = ’wd’)

Corresponder a uma substring

É usado para corresponder à string com a ajuda de uma substring correspondente.

Sintaxe

css =

  • * - Notação simbólica para corresponder a uma string usando sub string.
  • Sub string - É a string com base na operação de correspondência realizada. Espera-se que a string provável tenha o padrão de string especificado.

Por exemplo,vamos considerar novamente a “caixa de texto da senha”, de modo que o seletor CSS correspondente seja:

css = input # Passwd (name $ = ’wd’)

Seletor CSS: texto interno

O texto interno nos ajuda a identificar e criar o Seletor CSS usando um padrão de string que a tag HTML manifesta na página da web.

Considere, “Precisa de ajuda?” hiperlink presente abaixo do formulário de login em gmail.com.

A tag âncora que representa o hiperlink tem um texto dentro. Portanto, este texto pode ser usado para criar um Seletor CSS para acessar o elemento da web designado.

Sintaxe:

css =

  • : - O sinal de ponto é usado para simbolizar o método contém
  • Contém - é o valor de um atributo de classe que está sendo acessado.
  • Texto - O texto exibido em qualquer lugar da página da web, independentemente de sua localização.

Esta é uma das estratégias mais frequentemente usadas para localizar elementos da web por causa de sua sintaxe simplificada.

Devido ao fato de que criar CSS Selector e Xpath exige muito esforço e prática, o processo só é exercido por usuários mais sofisticados e treinados.

Próximo Tutorial nº 7 : Prosseguindo em nosso próximo tutorial, aproveitaríamos a oportunidade para apresentá-lo com uma extensão das estratégias de localização. Assim, no próximo tutorial, estudaríamos o mecanismo para localizar elementos da web no Google Chrome e Internet Explorer.

a chave de segurança da rede é igual à senha

Estamos cobrindo Selenium Locators em mais detalhes, pois é uma parte importante da criação do Selenium Script.

Deixe-nos saber suas dúvidas / comentários abaixo.

Leitura recomendada

^