Visão geral

Quando você destaca uma área na sua plataforma web ao criar um Tooltip ou um campo de entrada, a UserGuiding armazena seletores CSS com base no elemento selecionado. Em alguns casos, nosso algoritmo não consegue encontrar o elemento destacado e você receberá a mensagem de erro "Selected element is hidden" (O elemento selecionado está oculto).

Neste artigo, explicaremos os motivos para receber essa mensagem de erro e forneceremos soluções.

Por que o Tooltip não consegue encontrar o elemento selecionado mesmo quando estou na URL correta?

O motivo do seu caso de uso específico pode ser um dos seguintes:

• A área selecionada não está presente na UI atual durante a tentativa de pré-visualizar a etapa.
• Como a página tem mais de um elemento que você selecionou, o algoritmo não consegue encontrar o elemento que você destacou entre vários elementos idênticos.
• Uma condição específica deve ser atendida para que o elemento que você selecionou seja mostrado (por exemplo, abrir o menu suspenso).

Como utilizar a funcionalidade "Wait until element is present"?

Alguns elementos em uma UI de uma plataforma web exigem mais tempo para serem carregados do que outros elementos. Se tiver selecionado um desses elementos ao criar um Tooltip ou um campo de entrada, você deverá definir que seu Guia aguarde até que o elemento selecionado esteja presente na UI atual.

Abra a extensão do Chrome e vá para a etapa correspondente do Tooltip/campo de entrada para fazer isso. Em seguida, clique na aba Advanced e marque a caixa "Wait until element is present". Aqui, você pode definir o tempo de espera e designar a ação seguinte se o elemento ainda não puder ser encontrado.

Como utilizar o seletor CSS personalizado para diferenciar um elemento específico de outros idênticos

Você pode substituir os seletores CSS encontrados pela UserGuiding e encontrar o elemento específico que deseja destacar com o seletor CSS personalizado.

Para fazer isso, passe o mouse sobre o elemento que deseja destacar e abra o menu de contexto. Em seguida, clique em Inspect. Você verá características específicas como o ID e a classe do elemento selecionado.

Depois de designar o seletor que deseja usar, você pode abrir a etapa na extensão do Chrome. Ative o seletor CSS personalizado e digite o seletor no campo de entrada de abertura. Se não tiver certeza de como fazer isso, consulte este artigo.

Como utilizar a funcionalidade "Proceed to Next Step on click of"?

Quando um Tooltip é criado, os usuários podem clicar em um botão ou no elemento na sua UI para prosseguir para a próxima etapa.

Às vezes, uma condição específica deve ser atendida para que o elemento que você selecionou seja mostrado. Por exemplo, se um elemento estiver localizado em um menu suspenso, o Guia não poderá encontrá-lo a menos que o usuário final seja orientado a abri-lo.

Para isso, o Tooltip deve ser definido para prosseguir para a próxima etapa quando o usuário final clicar no elemento. Dê uma olhada neste artigo para obter mais informações.