O que é um seletor jQuery?

Um seletor jQuery é uma string que tem como alvo um elemento HTML quando a seleção de elementos padrão do WalkMe não consegue fazê-lo. Cada página é feita de HTML e cada elemento visível (botões, cabeçalhos, formulários, imagens) é representado nessa estrutura HTML. Os seletores jQuery permitem que o WalkMe localize elementos usando classes, IDs ou outros atributos.

Você pode precisar do jQuery se:

• O WalkMe não consegue capturar o elemento quando clicado
• Uma etapa aponta para o elemento errado
• Um Launcher ou SmartTip não aparece
• Uma etapa é executada apenas às vezes
• As opções da guia de precisão não retornam o elemento correto

Antes de criar um seletor jQuery, verifique a guia Precisão para confirmar se a seleção nativa pode ser melhorada.

Termos-chave

• HTML: a linguagem de marcação que estrutura páginas da Web
• Elemento: um pedaço de HTML, como div, input, h2, p
• jQuery: uma biblioteca JavaScript usada para pesquisar e descrever elementos HTML
• Seletor: o código que identifica um elemento para jQuery

Criando um seletor jQuery

Etapa 1: Identificar o elemento

Clique com o botão direito do mouse no elemento que você precisa segmentar e selecione Inspecionar (Chrome/Safari) ou Inspecionar Elemento (Firefox/IE).

Isso abre o Console do Desenvolvedor do navegador, permitindo que você visualize o HTML da página e localize o elemento exato que o WalkMe deve segmentar.

Inspecionar o texto "Bem-vindo ao Suporte do WalkMe" destaca a linha HTML:

<h2 class="site-header__title">

Você também pode clicar no ícone do cursor no cabeçalho DevTools para passar o mouse sobre elementos e ir diretamente para a representação HTML. Passar o mouse destaca a linha HTML correspondente em azul. Clicar ancorará o inspetor nesse elemento.

Etapa 2: criar o seletor

Elementos HTML

Elementos HTML comuns incluem div, a (link), h2, p, form, input, img. Elementos geralmente contêm classes, IDs ou atributos que os descrevem e podem ser usados no seletor. Os tipos de elemento são úteis para orientação, mas nem sempre são necessários no seletor final.

Descritores como classes, IDs e atributos determinam a aparência desses elementos e como eles se comportam em uma página. Ao escrever o jQuery, os elementos devem sempre preceder quaisquer descritores. Isso significa que você nunca deve colocar um símbolo de qualquer tipo antes de um elemento.

Usando classes

As classes são os descritores mais comuns. Em HTML, eles aparecem como class="example". No jQuery, as classes usam a notação de pontos:

.site-header__title

Usando IDs

Se um elemento tiver um ID, prefira-o a uma classe, pois os IDs são mais específicos. Os IDs aparecem em HTML como id="name" e usam # em jQuery.

No exemplo abaixo, a barra de pesquisa <input id="hkb-search" class="…">pode ser segmentada com o seletor: #hkb-search

Selecionando elementos em um iFrame

Elementos dentro de iFrames exigem um objeto de contexto. Use este modelo:

{"element": "#yourElement", "context": "iframe#iframeSelector"}

Exemplo:

{"element": "h2.mainTitle", "context": "iframe#Main"}

Para testar no DevTools:

wmjQuery("#yourElement", wmjQuery("iframe#iframeSelector").contents())

Etapa 3: Teste o seletor

1. Certifique-se de que o Editor do WalkMe está conectado ao seu navegador
2. Abra o DevTools
3. Selecione Console
4. Tipo:

   wmjQuery('yourSelector')

5. Pressione Enter

Do exemplo anterior, podemos inserir:

wmjQuery("")'.site-header__title')

O console retorna um objeto contendo: comprimento — quantos elementos correspondem ao seu seletor

• 0 = sem correspondência
• 1 = correto

Retornos com comprimento superior a 1 significam que vários elementos que correspondem ao seletor foram encontrados. Com qualquer resultado maior que 1, gostaríamos de tornar o seletor mais
específico.

No exemplo anterior, o teste de .site-header__title retorna comprimento: 1 e destaca o elemento selecionado.

Você pode passar o mouse sobre qualquer elemento retornado nos resultados do DevTools para confirmar que ele destaca o elemento correto na página.

Solucionando problemas de seletores longos ou com falha

Se um seletor longo retornar um ponto de exclamação vermelho no Mecanismo de Regras, você pode isolar o problema dividindo o seletor em partes menores e testando cada parte.

Por exemplo, considere o seletor incorreto:

div.ht-container form.hkb-site-serch

Para solucionar problemas, comece com o primeiro elemento e crie o seletor passo a passo:

1. Digite div no Mecanismo de Regras. Se ele retornar uma marca de seleção, o elemento existe e está escrito corretamente.
2. Adicione .ht-container, criando div.ht-container. A marca de seleção permanece, portanto, esta parte é válida.
3. Adicione o formulário, criando div.ht-container form. O formulário é filho do div.ht-container, portanto, isso ainda é válido.
4. Neste ponto, cada parte do seletor está funcionando.

Agora adicione a parte final: .hkb-site-serch. Assim que você o adiciona, o Mecanismo de Regras muda de uma marca de seleção verde para um ponto de exclamação vermelho. Quando você inspecionar o HTML, verá o problema: o nome da classe está incorreto. Deve ser .hkb-site-search.

Depois de corrigir o erro de digitação, o seletor completo

div.ht-container form.hkb-site-search

retorna uma marca de seleção novamente. Isso significa que o seletor agora é válido.

Esse método ajuda você a identificar rapidamente qual parte de um seletor está escrita incorretamente ou não corresponde mais à página.

Etapa 4: Implementar o seletor no WalkMe

1. Abra o Smart Walk-Thru contendo a etapa
2. Selecione a etapa
3. Abra a guia Ajustes Avançados
4. Escolha o seletor jQuery como método de Reconhecimento
5. Cole o seletor no campo Valor
6. Selecione Concluído
7. Reproduza a etapa para confirmar que ela está anexada corretamente

O mesmo método funciona para Launchers, SmartTips e qualquer regra que suporte a seleção jQuery.

Técnicas Avançadas

Usando outros atributos

Se um elemento não tiver uma classe ou ID, você poderá segmentá-lo usando qualquer um de seus atributos.

O formato básico é:

[attribute= value=""]

Por exemplo, o logotipo do Suporte do WalkMe não tem uma classe ou ID, mas o HTML inclui o atributo:

href="https://support.walkme.com"

Você pode usar esse atributo para segmentar o logotipo:

[href= https:="" .walkme.com"]

O mesmo elemento também contém outro atributo:

data-ht-sitetitle="Suporte do WalkMe"

Você pode segmentar isso usando:

[data-ht-sitetitle= walkme="" Support"]

Ao segmentar um atributo que não é uma classe ou ID, sempre inclua o tipo de elemento antes do atributo. Isso ajuda o WalkMe a restringir a pesquisa e melhorar o desempenho. Para o logotipo de Suporte, o seletor correto é:

a.[href= https:="" .walkme.com"]

Em HTML, a identifica um link e href identifica o destino do link. Neste caso, o logotipo é um link para a página de Suporte do WalkMe.

Embora atributos como class e id possam ser segmentados usando o mesmo [attribute= value=""] formato, é mais eficiente usar os atalhos .className e #idName sempre que possível.

Usando Relacionamentos Pais-Filhos

A segmentação por atributo somente pode retornar mais de um resultado. Por exemplo, testando:

wmjQuery("")[href= https:="" .walkme.com"]=

em support.walkme.com retorna o comprimento: 2.

Isso ocorre porque o logotipo do WalkMe e o link "Home" compartilham o mesmo atributo href.

Você pode tentar adicionar o tipo de elemento, a, mas ambos os elementos são links, portanto:

a.[href= https:="" .walkme.com"]

ainda retorna duas correspondências.

Para tornar o seletor mais específico, use a estrutura pai-filho encontrada no HTML. No DevTools, você pode expandir linhas de HTML para ver quais elementos contêm outros. O elemento que contém é o pai, e o elemento aninhado é o filho.

Por exemplo, o pai do logotipo do WalkMe é:

div.site-logo

O pai do link "Início" é um elemento diferente: li com atributos adicionais

Como os pais diferem, você pode tornar o seletor mais específico incluindo o pai e o filho. Os seletores pai-filho são escritos com um espaço entre eles.

Para segmentar o link "Início":

li [href= https:="" .walkme.com"]

Testar esse seletor retorna uma única correspondência, identificando corretamente o texto "Início".

Para segmentar apenas o logotipo, use seu elemento pai conhecido:

div.site-logo a[href= https:="" .walkme.com"]

Compreender a hierarquia pai-filho é uma das maneiras mais confiáveis de refinar seletores quando vários elementos compartilham atributos semelhantes.

Modificadores

Os modificadores permitem restringir ainda mais um seletor jQuery adicionando regras no final do seletor. Embora vários modificadores possam ser combinados, evite usar mais de dois para manter os seletores manuteníveis.

Exemplos:

h2:contains(Welcome to WalkMe):visible

Seleciona um elemento h2 que contém o texto "Bem-vindo ao WalkMe" e está visível na tela.

.hkb-site-search:has()[type= text=""])

Seleciona o elemento com a classe hkb-site-search que contém um elemento aninhado com o atributo type="text".

form.hkb-site-search input:eq(0)

:eq(n) seleciona o enésimo elemento em uma lista indexada a partir do zero. eq(0) é a primeira entrada correspondente dentro do formulário.

form.hkb-site-search input:last

:last seleciona o último elemento de entrada correspondente. Use :first para selecionar o primeiro.

Saiba como usar um modificador de irmãos para encontrar elementos irmãos.

IDs dinâmicas

IDs dinâmicos são IDs que mudam sempre que a página é carregada. Eles geralmente se parecem com longas strings alfanuméricas, por exemplo:

id="00N00000067211_ilecell"

Como esse valor é alterado na atualização, qualquer seletor que use o ID completo irá quebrar. Evite usar IDs totalmente dinâmicos sempre que possível.

Se precisar segmentar um elemento com um ID dinâmico, identifique a porção estável do ID — algo legível ou consistente, como "ilecell" no exemplo acima. Em seguida, use um seletor de atributo parcial:

[id*= ilecell=""]

O símbolo *= significa "contém". Isso diz ao WalkMe para procurar qualquer ID que contenha ilecell, mesmo que o restante do ID seja alterado.

Seletores parciais podem corresponder a vários elementos. Para evitar correspondências não intencionais, combine o seletor de ID parcial com outra parte da estrutura ou atributos do elemento. Por exemplo:

[id*= ilecell=""].inlineEditWrite

ou

.dataCol.inlineEditWrite[id*= ilecell=""]

Essa abordagem mantém o seletor estável, garantindo que ele corresponda ao elemento correto.

Vídeos Dicas de Terça-feira

Triggers personalizados com jQuery

iFrame iQuery