Dicas úteis

• Console: essa é geralmente a palavra usada para descrever as Ferramentas do Desenvolvedor, especificamente a seção Elementos que mostra todo o HTML existente em uma página.
  • Isso pode ser confuso, pois também há uma seção Console onde você digita wmjQuery para testar seus seletores. Essas duas seções geralmente são referidas como sinônimas, mas se alguém estiver solicitando que você insira algo no Console, ele estará se referindo à guia Console nas Ferramentas do Desenvolvedor.
  • Para acessar, use F12 ou vá até o menu do navegador e selecione Ferramentas do desenvolvedor.
• Capitalização é importante: todo o jQuery diferencia maiúsculas de minúsculas. Se você digitar uma letra maiúscula ou minúscula incorretamente, não será possível combinar o seletor desejado.
• Sempre teste: você deve sempre testar o jQuery por meio da seção Console nas ferramentas do desenvolvedor antes de usá-lo.
  • Use o comando: wmjQuery("insert_your_selector_here")

Seletores jQuery

• Elementos: geralmente exibidos na seção Elementos das Ferramentas do Desenvolvedor como escrita rosa/roxa (bem como na página ao passar o mouse sobre a seção Elementos). Não têm caracteres especiais para os denotar e devem ser escritos como uma palavra.
  • Exemplos comuns: div, span, script, head, body, input, li, a, img
  • Exemplo de pesquisa usando WalkMe jQuery:
    • wmjQuery("span")
• IDs: Passe o mouse sobre este seletor na seção Elementos das ferramentas do desenvolvedor, e a escrita aparecerá ao lado do item inspecionado na tela em laranja precedida por um "#"
  • Os IDs estão entre os seletores mais fortes que podemos usar, pois geralmente são criados pelos desenvolvedores para serem identificadores exclusivos. Devido a isso, você verá frequentemente IDs com um número aleatório após eles. Essa situação é conhecida como ID dinâmica. WalkMe seleção: tendemos a evitá-los, pois eles podem mudar de login para login e não são seletores confiáveis.
  • Não há exemplos comuns, pois estes serão exclusivos de site para site. Você pode vê-los aparecer assim: #header, #logo, #searchbar
  • Exemplo de pesquisa usando WalkMe jQuery:
    • wmjQuery("#logo")
• Classe: ao passar o mouse sobre esse seletor na seção Elementos das ferramentas do desenvolvedor, a escrita aparecerá ao lado do item inspecionado na tela em azul liderado por um "."
  • As classes são muito comuns e são reutilizadas em todo o site. Certifique-se de que a classe escolhida seja exibida apenas uma vez na página que você pretende selecionar ou de que você tenha informado ao WalkMe especificamente qual classe entre as múltiplas na página você está se referindo.
  • Não há exemplos comuns, pois eles tendem a ser exclusivos de site para site. Você pode vê-los aparecer assim: .btn, .dropdown, .navlink
  • Exemplo de pesquisa usando WalkMe jQuery:
    • wmjQuery(".btn")
• Atributos – você não verá esses atributos ao passar o mouse e precisará procurá-los na seção Elementos das ferramentas do desenvolvedor.
  • Eles são usados para descrever um seletor e, portanto, devem ser usados em conjunto com um Elemento, ID ou Classe por razões de desempenho. Se usado por si só, o WalkMe precisará pesquisar todos os seletores na página para ver se eles correspondem.
  • Exemplos comuns: valor, nome, tipo
  • Exemplo de pesquisa usando WalkMe jQuery:
    • wmjQuery("#example[name='Website User']")
    • Lembre-se: sempre coloque um Elemento/ID/Classe na frente do atributo, conforme mostrado neste exemplo.

Modificadores especiais

• Uso de curinga: você pode usar um curinga para tornar sua seleção um pouco menos específica.
  • Isso é útil em áreas em que você deseja selecionar vários botões, como um botão salvar, mas eles são um pouco diferentes uns dos outros. Também é útil para elementos dinâmicos nos quais uma parte deles permanece consistente.
  • Exemplo de pesquisa usando WalkMe jQuery:
    • wmjQuery("#example[name*='Website']")
    • Isso ainda corresponderá ao “Usuário do site” que foi usado no exemplo de atributo.
  • Isso também pode ser usado para seletores de ID/classe. Os seletores HTML na seção Elementos das ferramentas do desenvolvedor são exibidos como [class='btn'] em comparação com o .btn que você verá na tela quando passar o mouse sobre o HTML. Isso significa que nosso curinga também pode ser aplicado aqui.
    • Exemplo de pesquisa usando WalkMe jQuery:
      • wmjQuery("[class*='btn']")
      • Isso ainda corresponderá a todos os seletores .btn na página, mesmo que seja .btn1234 ou .btntab
• Seletores relacionais: você pode usar como os seletores estão relacionados uns aos outros para tornar o jQuery mais específico.
  • Descendente: indicado usando um espaço
    • Exemplo de pesquisa usando WalkMe jQuery:
      • wmjQuery("Input .btn")
      • Isso retornará todas as classes btn que são descendentes de um elemento Input. Na seção Elementos das ferramentas do desenvolvedor, você verá o seletor desejado indentado à direita do seletor progenitor que está acima dele.
  • Irmão: Indicado usando um sinal de mais
    • Exemplo de pesquisa usando WalkMe jQuery:
      • wmjQuery("Input+.btn")
      • Isso retornará todas as classes btn que são irmãs de um elemento Input. Na seção Elementos das ferramentas do desenvolvedor, você verá o seletor desejado abaixo do irmão e compartilhará o mesmo nível de recuo. Sempre tenha o elemento irmão antes do elemento desejado.
• Comandos: você pode adicionar comandos ao final da instrução jQuery para tornar sua pesquisa mais precisa. Estes são adicionados por meio de dois pontos seguidos do comando.
  • Primeiro seletor: yourselector:first
    • Exemplo de pesquisa usando WalkMe jQuery:
      • wmjQuery(".btn:first")
      • Isso irá retornar a primeira classe btn na página atual.
  • Último seletor: yourselector:last
    • Exemplo de pesquisa usando WalkMe jQuery:
      • wmjQuery(".btn:last")
      • Isso retornará a última classe btn na página atual.
  • Seleção por número de seletor: seuseletor:eq(número_de_elemento)
    • Exemplo de pesquisa usando WalkMe jQuery:
      • wmjQuery(".btn:eq(2)")
      • Isso retornará a terceira classe btn na página atual. É o terceiro porque o primeiro seletor está rotulado como 0. Portanto, neste caso, você teria as classes btn 0, btn 1, btn 2.
  • Selecionando por texto: yourselector:contains("texto do seletor desejado")
    • Exemplo de pesquisa usando WalkMe jQuery:
      • wmjQuery(".btn:contains('Save')")
      • Isso retornará todas as classes btn na página atual que tenham o texto Save contido nelas. Certifique-se de abrir o seletor na seção Elementos das ferramentas do desenvolvedor usando o sinal de maior à esquerda de uma linha. Você encontrará o texto na linha mais interna dos
        seletores.
      • Se você tiver 2 elementos com nomes semelhantes na mesma página e quiser segmentá-los com mais precisão, use :textEquals(). Por exemplo: .tabs__item.active.uiTabItem:textEquals(Daily Action)
  • Seleção por seletores: yourselector:contém("seletores dentro do seletor desejado")
    • Exemplo de pesquisa usando WalkMe jQuery:
      • wmjQuery("Input:has('.btn')")
      • Isso retornará todos os elementos de entrada na página atual que tenham a classe btn como descendente. Certifique-se de abrir o seletor na seção Elementos das ferramentas do desenvolvedor usando o sinal de maior à esquerda de uma linha. Você encontrará os seletores que são descendentes do seletor desejado.
  • Seletor visível: yourselector:visible(número do elemento)
    • Exemplo de pesquisa usando WalkMe jQuery:
      • wmjQuery(".btn:visible")
      • Isso é usado quando há versões ocultas do seletor desejado em uma página. Um exemplo seria em Aplicativos de Página Única, nos quais você pode alternar entre guias. Isso significa que o elemento ainda está tecnicamente na página, mesmo que esteja oculto da visualização.

Seletores jQuery para componentes do WalkMe Player

Esta tabela é útil para quem deseja criar conteúdo do WalkMe que interaja com o WalkMe Player (mais frequentemente SC, PS & CS).

*Substitua o XXXXXX pelo ID do WalkMe relevante do componente

iFrame jQuery

O modelo de seletor jQuery abaixo permite que o WalkMe segmente um elemento em um iFrame. Atualize os itens em negrito, conforme visto no exemplo, com os respectivos seletores:

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

Para avaliar o seletor no Console das Ferramentas de desenvolvimento, você precisará usar o modelo wmjQuery abaixo:

{"element":"#yourElement","context":{"element":"iframe#insideFrame","context":"iframe#mainFrame"}}

Para avaliar o seletor no Console das Ferramentas de Desenvolvimento, você precisará usar o modelo wmjQuery:

 wmjQuery("yourElement",wmjQuery("iframe#insideiframe",wmjQuery("iframe#mainFrame").contents()).contents())

iFrame triplo

O modelo de seletor jQuery abaixo permite que o WalkMe segmente um elemento em um iFrame duplo. Atualize os itens em negrito, conforme visto no exemplo, com os respectivos seletores:

Exemplo: {"element":"h2.mainTitle", "context": {"element":"iframe.innerFrame","context": {"element":"iframe[src='default .asp']","context":"iframe#Main"}}}

{"element":"#yourElement","context":{"element":"iframe#thirdFrame","context":{"element":"iframe#secondFrame","context":"iframe#mainFrame"}}}

Para avaliar o seletor no Console das Ferramentas de Desenvolvimento, você precisaria usar o modelo wmjQuery:

wmjQuery("element",wmjQuery("iframe#thirdFrame",wmjQuery("iframe#secondFrame",wmjQuery("iframe#mainFrame").contents()).contents()).contents())

Webinar sobre jQuery