Skip to main content

Seletor de elemento

Um seletor de elementos é simplesmente um critério (geralmente baseado em CSS) usado para localizar e identificar elementos HTML específicos na sua página. Selecionar elementos HTML é útil para:

  • Capturar informações dinâmicas exibidas na página, como nomes de produtos, preços ou quantidades.
  • Criar regras de aplicação para produtos que dependem da presença ou valor desses elementos.
  • Criar experiências mais relevantes ao visitante, adaptando o conteúdo conforme o contexto exibido na página

Seletores​

Seletor CSS (Padrão)​

Essa opção permite que você selecione elementos no site utilizando Seletores CSS.

Exemplo
span.preco-produto

Evaluate​

Essa opção permite que você selecione elementos utilizando expressões XPath, oferecendo maior flexibilidade para localizar elementos específicos na estrutura do HTML.

O XPath é uma linguagem que permite navegar na estrutura de documentos HTML, localizando elementos de forma precisa com base em seus caminhos.

Para utilizar essa opção, inicie seu seletor com evaluate: seguido pela expressão XPath desejada.

Utilizar XPath é ideal para:

  • Selecionar elementos quando Seletores CSS não são suficientes
  • Localizar elementos com base em atributos ou hierarquias específicas
  • Realizar seleções avançadas em páginas com estruturas complexas
Exemplo
evaluate://div[@class="container"]/span[@class="preco"]

Neste exemplo:

  • evaluate: indica que o seletor usará XPath
  • A expressão seleciona o elemento \<span\> com a classe preco dentro de um \<div\> com a classe container.

Shadow​

Esta opção permite que você selecione elementos utilizando Seletores CSS, incluindo aqueles que estão dentro de shadowRoot, uma estrutura comum em componentes Web modernos (Web Components).

Para selecionar elementos dentro de um shadowRoot inicie seu seletor com shadow: para indicar que ele utilizará seleção em shadow DOM e utilize ::shadow para especificar o caminho até o shadowRoot do elemento desejado.

Exemplo
shadow:div#menu::shadow span.preco

Neste exemplo:

  • shadow: indica que o seletor utilizará shadow DOM
  • div#menu seleciona o componente desejado
  • ::shadow acessa o shadowRoot
  • span.preco seleciona o elemento interno que exibe o preço

Sequence​

Essa opção permite que você selecione elementos utilizando Seletores CSS com um indicador de sequência, possibilitando interações em etapas, como cliques seguidos por novas seleções.

Para utilizar essa opção, inicie seu seletor com sequence: e utilize >> para indicar qual elemento será selecionado após clicar no elemento atual.

Utilizar Sequência de Seletores CSS é ideal para:

  • Realizar ações encadeadas, como clicar em botões e capturar informações que aparecem em seguida
  • Configurar capturas de dados em componentes que dependem de interações dinâmicas
  • Automatizar verificações de elementos que só ficam visíveis após ações específicas do usuário
sequence:button.comprar >> div.modal span.preco

Neste exemplo:

  • sequence: indica que a seleção usará sequência de ações
  • button.comprar é o primeiro elemento a ser clicado
  • >> indica a próxima etapa da sequência
  • div.modal span.preco é o elemento que será selecionado após o clique