O jQuery deve ser usado apenas para casos excepcionais
Recomendamos usar o jQuery o mínimo possível. Os aplicativos da Web estão mudando constantemente e pequenas atualizações na interface do usuário e na estrutura da página podem quebrar qualquer jQuery usado.
A seleção de elementos pronta para uso do WalkMe se adapta às alterações no aplicativo subjacente sem o uso do jQuery.
Breve Visão Geral
jQuery é uma biblioteca JavaScript que pode ser usada para manipular uma página HTML. Os seletores jQuery permitem identificar elementos na estrutura HTML com base em suas características, como ID, classe, tipo, atributos ou valores de atributos.
Os seletores jQuery mais comuns no Editor WalkMe são usados para:
- Criar metas de integração: crie metas de integração com base em um elemento na tela
- Lançadores de elementos selecionados: adicione o seletor jQuery à aba Elemento selecionado de um lançador
- Capturar valores: Capture um valor de uma variável de usuário ou um texto na tela para ser incorporado em um anúncio dinâmico ou use-o em uma regra
- Verificar condições de página: direcione o WalkMe para analisar os atributos de um elemento na tela para usar como um tipo de regra no Mecanismo de Regras
Como funciona
Localize o elemento no HTML clicando com o botão direito no elemento e selecionando Inspecionar elemento. O elemento será destacado na tela e no painel do desenvolvedor. Identifique as características exclusivas do elemento (como localização, classe, ID ou estilo) para criar o seletor jQuery. Os elementos podem ser identificados por sua localização ou atributos (classe, ID e estilo).
Instituto de Adoção Digital 🎓
Etapa 1: Criar o seletor jQuery
A sintaxe básica para usar elementos jQuery no WalkMe é: Element → Selector → Value
Depois de identificar o elemento, crie um jQuery Selector que analisará especificamente o que lhe interessa.
Aqui estão alguns exemplos de jQuery Selectors:
- Elemento ul com id create-account: ul#create-account.
- Elementos ul com classe nav: ul.nav.
- Elementos ul com classes nav e fl: ul.nav.fl.
Veja abaixo uma lista de seletores jQuery úteis.
Crie jQuery usando seus dados do WalkMe
Agora você pode utilizar os dados existentes do WalkMe em favor de um seletor jQuery.
Isso pode ser feito adicionando '${wm-data-key}' ao seletor desejado. Por exemplo: o seletor: [id=], terá o '${key}' substituído pelos dados reais do WalkMe e terá a seguinte aparência: [id=”value”].
Etapa 2: Teste o seletor no console
- Digite wmjQuery("") na linha de comando no painel do desenvolvedor com o seletor jQuery entre o "" e clique em Enter
- Observação: você só poderá usar o wmjQuery em um navegador com a Extensão Editor ativada
- Se a consulta retornar o valor desejado, o seletor está funcionando!
- Observação: Para ver os elementos selecionados na tela, clique em Mais…
- Passe o mouse sobre os objetos retornados para ver o elemento destacado
Etapa 3: Use seletores jQuery no WalkMe
Dependendo de como você deseja usar o elemento jQuery, o jQuery pode ser usado no WalkMe nos seguintes locais:
- Use o elemento jQuery para identificar um elemento para uma etapa ou Lançador usando a guia Selected Element do menu Opções.
- Use o elemento jQuery para acionar a próxima etapa em um Walk-Thru quando clicado ou passar o mouse no menu Triggers de etapas adicionais.
Observação
Usar um seletor não exclusivo para detectar clique ou passar o mouse em vários elementos ao mesmo tempo pode não funcionar conforme esperado.
- Use o elemento jQuery para capturar um valor na tela para usar como Dynamic Text no Editor de Rich Text em um balão de passo ou ShoutOut.
- Use o elemento jQuery para criar uma meta na guia Objetivo
- Use o seletor jQuery no Mecanismo de Regras como um tipo de regra (semelhante ao jQuery utilizado no tipo de regra de elemento na tela).
Dica
Lembre-se de que o jQuery deve ser usado com moderação nas suas compilações do WalkMe e sempre em combinação com condições mais leves. Consulte o seguinte artigo para obter mais informações: Melhores práticas de desempenho do WalkMe
Operadores do mecanismo de regras jQuery disponíveis:
- Verdadeiro: significa que pelo menos um elemento foi encontrado
- Falso: significa que nenhum elemento foi encontrado
- Visível: indica que o elemento está visível
- Texto é igual/Não é igual: significa que o texto é igual à entrada de texto
- Observação: Quando o seletor retorna mais de um elemento, o texto de todos os elementos é combinado como um elemento
- Maior que/Menor que: significa que o valor está acima ou abaixo de um número inteiro
- Como/Não como: significa uma sintaxe de texto complicada
- O comprimento é/não é/maior que/menor que: Significa igual a, acima ou abaixo de um número inteiro
- Usado quando consultar quantos elementos a consulta retorna
- Descubra o comprimento exato da consulta no console: wmjQuery(“element.value”).length
Observação
O Editor do WalkMe só suporta seletores escritos em sintaxe jQuery até a usada no jQuery 1.8.3. No entanto, você pode usar qualquer versão do jQuery para outros fins em seu site sem medo de conflito com a versão do jQuery do WalkMe (wmjQuery).
Recomendamos que você também utilize o jQuery Selector Optimizer do WalkMe.
Seletores jQuery úteis
| Consulta |
Descrição |
| elemento |
Consultar um elemento |
| elemento[atributo] |
Consultar um atributo de um elemento |
| elemento[atributo][atributo] |
Consultar vários atributos de um elemento |
| elemento[attribute= attribute="" value"] |
Consultar um atributo de um elemento e seu valor |
| elemento[attribute^= text=""] |
Texto de consulta no início de um atributo |
| elemento[attribute*= text=""] |
Texto da consulta contido em um atributo |
| elemento[attribute!= text=""] |
Texto da consulta excluído de um atributo |
| elemento child-element |
Consultar o filho de um elemento (o espaço indica que o primeiro elemento é o pai do segundo) |
| element:checked |
Consultar o status de uma caixa de seleção (marcada ou desmarcada) |
| [element='']:visible |
Consultar se um elemento está visível |
| element:contains(Text) |
Elemento de consulta contém texto |
| element:eq(#) |
Consultar resultado específico em ordem (a contagem começa em 0) |
Testando seus seletores jQuery
Ao escolher um seletor jQuery, é aconselhável comparar alguns para garantir que você esteja escolhendo aquele com o menor impacto no desempenho do seu site/aplicativo. Para fazer isso, siga estes passos:
- Abra as ferramentas de desenvolvimento do navegador da Web
- Navegue até a guia do console das ferramentas de desenvolvimento
- Digite o seguinte no console:
- var time1 = window.performance.now(); wmjQuery('<seu seletor jQuery>'); var time2 = window.performance.now(); console.log(time2 - time1);
- Clique em Enter
- Execute esse comando várias vezes no console para ver a média aproximada do tempo necessário
- Execute esse mesmo comando com alguns seletores alternativos do jQuery e escolha aquele que demora menos tempo para executar
Observação
- Se houver suporte ao Shadow DOM, você deverá ser capaz de capturar elementos do Shadow DOM no Editor e usar o jQuery para identificá-los
- No entanto, você não poderá executar o wmjQuery no console DevTools, em vez disso, será necessário usar esta sintaxe:
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('insira seu seletor aqui')
jQuery no WalkMe Compartilhar
- As seleções de elementos jQuery não são exibidas corretamente no WalkMe Share devido à infraestrutura de captura de tela do Editor. Assim, quando a captura de tela do Editor envia a imagem para o WalkMe Share, o item ficará no canto superior esquerdo da imagem nas coordenadas 0x e 0y.
- O WalkMe Share tem um recurso que permite aos usuários ajustar a localização dos itens na tela para esse caso de uso. Quando esse recurso é usado e o item é ajustado para aparecer no local correto, a captura de tela no Editor é atualizada para refletir a alteração feita no WalkMe Share.
- Quando a seleção de elementos ocorre usando o algoritmo de encontrar elementos ou DeepUI, a infraestrutura de captura de tela do Editor é capaz de determinar as coordenadas X e Y do elemento, portanto, no WalkMe Share, o item será visto no local correto.
