Cómo crear selectores de jQuery para WalkMe

¿Qué es un selector de jQuery?

jQuery es un método que puedes utilizar para seleccionar elementos en la pantalla cuando no puedes hacerlo fácilmente con la herramienta estándar WalkMe.

Cuando se carga una página web, todo lo que se ve está escrito en HTML, el lenguaje de marcado del sitio web. Un selector de jQuery se dirigirá a un elemento específico en ese código HTML. La mayoría de estos selectores se dirigirán al Atributo de Clase (Clase) (identificador general) o al identificador (identificador específico) del elemento.

Los selectores de jQuery le dicen a WalkMe en qué parte de la página debe centrarse, ya sea para la ubicación de contenido, los activadores o la segmentación. En pocas palabras, si WalkMe tiene problemas para encontrar de forma rápida y constante el elemento que buscas, utiliza jQuery.

Hay un par de formas de saber cuándo va a haber un problema con un elemento. Si estás seleccionando un elemento para un nuevo paso, haz clic en él y no sucede nada, lo que significa que WalkMe está teniendo problemas para leer el elemento. Si reproduces el paso y apunta al elemento incorrecto, es posible que necesites utilizar jQuery (pero verifica primero la pestaña de precisión). Si el lanzador o el consejo inteligente (SmartTip) no aparecen después de seleccionar su elemento, es posible que necesites jQuery. Si el lanzador, el consejo inteligente (SmartTip) o el paso solo se reproduce a veces pero no siempre como se supone, es posible que necesites jQuery.

Si bien la comprensión del HTML puede hacer que el aprendizaje de cómo crear selectores de jQuery en WalkMe sea más rápido y fácil, no se necesita una comprensión detallada de HTML para hacerlo. Es muy raro que necesites escribir algo original o crear selectores largos y complicados. Casi siempre puedes encontrar exactamente lo que buscas en el HTML y luego solo tienes que copiarlo y pegarlo en el formato correcto. La mayor parte de jQuery gira en torno a saber qué extraer del código del sitio web, ¡y eso es lo que estamos aquí para enseñarte!

Antes de comenzar, aquí hay una lista de algunos términos clave para ayudarte a orientarte:

• HTML: el lenguaje de marcado con el que se crean los sitios web
• Elemento: elementos HTML que componen un sitio web. Piensa en ellos como bloques de construcción
• jQuery: el lenguaje de codificación que busca y describe (consulta) el HTML
• Selector: el código de jQuery que describe el elemento HTML que deseas seleccionar

Creación de un selector de jQuery

Hay cuatro pasos para crear un selector de jQuery:

1. Identifica el elemento de la página web al que deseas asociar el contenido de WalkMe.
2. Crea un selector de jQuery para ese elemento que permitirá a WalkMe adjuntarse a él.
3. Prueba el selector para garantizar que esté en el formato correcto
4. Conecta ese selector en el Editor de WalkMe

Paso 1: Identificar un elemento

Para comenzar, abre una nueva pestaña en tu navegador y ve a www.support.walkme.com. Encontremos un selector de jQuery para el texto "Bienvenido al soporte de WalkMe" en el centro de la página.

Haz clic con el botón derecho del ratón en "Bienvenido a soporte de WalkMe" como se muestra en la imagen 1 e inspecciona el elemento haciendo clic en Inspeccionar si estás en Chrome o Safari, o inspeccionar elemento si estás utilizando Firefox o Internet Explorer.

Tu página debe verse así:

La ventana que ves en la pantalla se llama Consola de desarrollo. Con la consola del desarrollador abierta, puedes ver la estructura HTML de la página junto con la página real. Otra forma de localizar el elemento deseado en el HTML es abrir la consola (haz clic con el botón derecho en cualquier lugar de la página y selecciona "Inspeccionar elemento") y hacer clic en el icono del cursor en la esquina izquierda del encabezado de la consola.

Una vez que hayas hecho clic en este icono del cursor, pasa el cursor sobre cualquier elemento de la página web. Esto te llevará al punto exacto del HTML de la consola donde se encuentra el elemento, y resaltará ese elemento en azul claro. Si haces clic en un elemento de la página web, la consola resaltará su línea de HTML en azul oscuro y se anclará a ese punto. Esta es la forma más fácil de encontrar elementos en el HTML. En la consola del desarrollador, puedes ver que la línea comienza con "

" es seleccionado. Cuando pasas el cursor sobre una línea de HTML, se mostrará su contenido asociado. En este ejemplo [Imagen 3], si mueves el cursor sobre el "

En el texto "Bienvenido a soporte de WalkMe" se muestra el texto.

Paso 2: Creación de un selector de jQuery para el elemento deseado

Elementos HTML

Los elementos son las partes del sitio que utiliza jQuery para seleccionar. Algunos de estos incluyen botón, div, h2, input e iframe. Estos elementos componen toda la página y son el núcleo de un sitio web.

Aquí hay un par de tipos comunes de elementos:

• div: abreviatura de contenedor, este es el bloque de construcción de un sitio web. Piensa en los sitios como una serie de bloques rectangulares que contienen todos los demás elementos.
• a: un enlace a otro sitio
• h2: un encabezado razonablemente grande, más pequeño que h1 pero más grande que h3.
• p: un párrafo. Estos dividen grandes porciones de HTML y facilitan la lectura y la navegación.
• Formulario (form): al igual que un div, este es un bloque de construcción del sitio. Sin embargo, los formularios suelen contener elementos editables como campos de entrada.
• Entrada (input): una parte del sitio que el usuario puede modificar o usar, como un campo de texto o una casilla de verificación.
• img: una imagen. ¡Esto debería ser bastante autoevidente!
  Los descriptores, las clases, los identificadores y los atributos determinan el aspecto y el comportamiento de esos elementos en una página. Al escribir jQuery, los elementos siempre deben preceder a cualquier descriptor. Esto significa que nunca debes colocar un símbolo de ningún tipo antes de un elemento.

Es importante saber que no siempre es necesario incluir el elemento que estás seleccionando en el selector de jQuery, solo son útiles para ubicarse en el HTML. En este ejemplo, nos centraremos en
Nos centraremos en el título de la página que encontramos con el inspector:

.

Como podemos ver por esta cadena de HTML, el elemento que estamos describiendo es un h2. Es la abreviación de "encabezado 2". El 2 indica el tamaño de la fuente del encabezado. Un elemento h4 tendrá una fuente pequeña, mientras que un h1 será grande. Como puedes ver, h2 es un elemento de encabezado bastante grande.

Cómo encontrar la clase de un elemento

Las clases son el descriptor más común de los elementos. Pueden describir diferentes tipos de elementos que tienen el mismo propósito o se encuentran en la misma parte de la página. Se escriben en el HTML como [class="XXX"] o . Eso los hace fáciles de encontrar y es una razón por la que son descriptores tan populares. Las clases también tienden a dejar en claro lo que hace un elemento.

Consideremos nuestro

cadena. El tipo de elemento que estamos buscando es un encabezado h2. Su clase es «site-header__title». Con solo mirar esta cadena, podemos ver que el elemento encabezado h2 que estamos buscando es el encabezado o el título de un sitio. Incluso sin mirar el sitio web, podemos suponer que el elemento es bastante grande y está situado en el centro.

¿Recuerdas que no es necesario incluir el tipo de elemento en jQuery? Sigamos con eso y utilicemos .site-header__title como nuestro selector de jQuery para esta sección. Ahora que te has decidido por un selector, puedes utilizarlo para identificar un elemento de un paso, lanzador o SmartTip o cualquier otra parte del contenido de WalkMe.

Este paso ahora apuntará al logotipo de soporte de WalkMe utilizando un selector de jQuery:

Cómo encontrar el ID de un elemento

Si existe un ID, es necesario que lo utilices en lugar de la clase. Esto se debe a que los identificadores son más específicos. El proceso de búsqueda del identificador de un elemento es similar al de encontrar su clase. En una nueva pestaña, abre www.support.walkme.com, haz clic con el botón derecho en la barra de búsqueda y selecciona Inspeccionar.

Deberías ver esto en la consola de desarrolladores:

Lo vemos en la línea HTML seleccionada El identificador (ID) es hkb-search.

Ahora que hemos encontrado el atributo ID del elemento, es hora de transformarlo en un selector de jQuery. Sabemos que "." es el atajo para las clases específicas; los identificadores tienen un atajo similar. En lugar de utilizar un ".", apuntaremos al ID con un "#". Nuestro selector final de jQuery para apuntar al cuadro de búsqueda es: #hkb-search.

Este paso ahora señalará a la barra de búsqueda utilizando un selector de jQuery:

Cómo encontrar un elemento dentro de un iFrame

Encontrar un elemento dentro de un iFrame sigue un proceso similar. La siguiente plantilla de selector de jQuery permite a WalkMe apuntar a un elemento en un iFrame. Actualiza los elementos en negrita como se ve en el ejemplo con los selectores respectivos:

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

Para evaluar el selector en la consola de herramientas de desarrollo, deberías utilizar la plantilla de wmjQuery a continuación:

Para obtener más información sobre iFrame iQuery, consulta este Tip Tuesday:

Paso 3: probando el selector

Ahora que sabes cómo crear un selector básico de jQuery, probemos los selectores para asegurarnos de que funcionan como esperamos.

1. Asegúrate de tener el Editor de WalkMe abierto y conectado a tu navegador. Esto garantiza que WalkMe esté en la página donde buscas el selector de jQuery.
2. Haz clic con el botón derecho en la página y selecciona Inspeccionar [o Inspeccionar elemento]
3. En la parte superior del cajón que se abre, haz clic en "Consola":
   
4. Escribe wmjQuery('tu selector') en la línea de comando, reemplazando 'tu selector' por el selector de jQuery que creaste, pero manteniendo las comillas individuales. Para continuar con nuestro ejemplo, escribiríamos wmjQuery('.site-header__title'). Una vez que hayas introducido el comando en la consola, presiona Intro.
   Probar nuestro selector .site-header__title tendría este aspecto:
   

Después de presionar Entrar, ¿qué significan los resultados?

En primer lugar, expande los resultados haciendo clic en la flecha junto a init. La longitud devuelta es el número de elementos que encuentra que coincide con nuestro Selector.

• Si devuelve una longitud: 0, significa que no se ha podido encontrar un elemento que coincida con ese Selector.
• Si dice longitud: 1, eso es una buena noticia ya que solo un elemento coincide con ese Selector.
• Si devuelve con una longitud superior a 1, ha encontrado varios elementos (es decir, más de uno) que coinciden con ese Selector. Con un resultado superior a 1, queremos intentar hacer que el Selector sea más
  específico.

Otra forma de probar el selector de jQuery es hacer clic en el resultado en la consola para verificar que esté capturando el elemento correcto en la página.

Aquí, estamos pasando el cursor sobre 0: h2:site-header__title. Podemos ver que el texto de bienvenida a soporte de WalkMe está resaltado. Esto muestra que nuestro jQuery está apuntando correctamente al elemento que estamos tratando de identificar.

Consejo profesional de jQuery: al utilizar los selectores de jQuery en el motor de reglas (por ejemplo, ShoutOut y Reglas de reproducción automática de contenido), podrás ver si el selector de jQuery se encuentra en la página actual. Esto se mostrará con una marca de verificación verde [como se ve en la imagen 12], mientras que si no se puede encontrar, habrá un signo de exclamación rojo. La marca de verificación se actualiza en tiempo real, ya que realizas actualizaciones en el Selector.

Esto es ideal para diagnosticar y solucionar problemas de selectores defectuosos.

Si tienes un selector largo como div.ht-container form.hkb-site-serch (incorrect) que aparece como falso (!) en el motor de reglas, puedes analizarlo para ver qué pieza está causando el problema.

Empiezas escribiendo div en el campo de texto de jQuery del motor de reglas. Si aparece con una marca de verificación, sabes que no hay nada malo. A continuación, añades .ht-container, para que el resultado sea div.ht-container. Este elemento HTML existe y está escrito correctamente. A continuación, añades form, lo que da como resultado el selector div.ht-container form. El formulario es un elemento secundario*** de div.ht-container, por lo que se trata de un selector válido. ¡El checkmark sigue ahí!

Ahora agreguemos la última parte de nuestro selector: .hkb-site-search. Si echas un vistazo a la línea resaltada, puedes ver que .hkb-site-serch es una clase que está escrita incorrectamente. Cuando lo añadimos al
Al final de nuestro correctamente escrito formulario div.ht-container, la marca de verificación verde se convertirá en un signo de exclamación rojo. Por lo tanto, sabemos que .hkb-site-serch es la parte de jQuery que arruina el selector.
Selector. Tras una inspección más detallada, podemos encontrar el error tipográfico (serch) y corregirlo a search. Una vez que corrijamos el error tipográfico en un nuevo Selector de div.ht-container form.hkb-site-search, el signo de exclamación se convertirá en un check. ¡Hemos solucionado nuestro Selector con éxito!

Paso 4: Implementación de tu Selector

Ahora que hemos probado el selector, podemos añadirlo al Editor de WalkMe siguiendo estos pasos:

1. Abre el Smart WalkThru que contiene el paso que queremos editar.
2. Haz clic en el paso
3. Haz clic en la pestaña de precisión
4. Selecciona "Selector de jQuery"
5. Pega en el jQuery que hemos creado
6. Haz clic en Guardar
7. Haz clic en el botón Reproducir en ese paso y verifica que funcione correctamente.

Si utilizas jQuery para un lanzador o SmartTip en lugar de un paso de Smart WalkThru, solo tienes que abrir ese lanzador o SmartTip y pasar al paso número 3.

Como alternativa, el selector de jQuery se puede añadir a cualquier conjunto de reglas que tenga la opción de selector de jQuery.

Por ejemplo, si quisiéramos hacer una reproducción automática de ShoutOut cuando el texto "Bienvenido al soporte de WalkMe" sea visible, tendría este aspecto:

El uso de los atributos de clase o ID de un elemento cubrirá la mayoría de los casos de uso en los que es necesario aplicar los selectores de jQuery. Sin embargo, puede haber algunos escenarios en los que debas dirigirte a algo más allá de la clase o el atributo ID.

Aprendizaje avanzado con jQuery

En el primer artículo, aprendimos a crear selectores básicos de jQuery seleccionando la clase o el atributo ID de un elemento. Sin embargo, un elemento no siempre tendrá una clase o un atributo de ID. En este artículo, aprenderemos a apuntar a los otros atributos del elemento, sin utilizar un selector de clase o ID. o #.

¿Qué sucede si mi elemento no tiene una clase o ID?

Si el elemento que estás buscando seleccionar no tiene una clase o ID que puedas utilizar, no te preocupes. Podemos utilizar la mayoría de las partes del HTML como parte de nuestro selector de jQuery.

En el caso de que no puedas utilizar una clase o ID para seleccionar un elemento, puedes utilizar cualquiera de los otros atributos del elemento. Los atributos proporcionan información adicional sobre el elemento. El
El selector de jQuery tendrá el formato de [Attribute="Value"].

En primer lugar, identifiquemos los atributos de un elemento.

Aquí, donde identificamos el elemento del logotipo de WalkMe, vemos que el elemento no tiene una clase o un ID para utilizar. Sin embargo, vemos que el elemento tiene un atributo llamado href que tiene el valor de https://support.walkme.com. Podemos utilizar ese atributo para apuntar al elemento del logotipo de WalkMe. Un selector de jQuery válido sería: [href="https://support.walkme.com"].

El elemento de logotipo también tiene otro atributo llamado data-ht-sitetitle con un valor de WalkMe Support. Alternativamente, podríamos apuntar a ese atributo en lugar del atributo href utilizando el
Selector de jQuery: [data-ht-sitetitle="WalkMe Support"].

Hay una cosa que se debe recordar sobre los atributos que no son Identificación (ID) o Clase (Class). Siempre debes incluir el tipo de elemento antes del atributo. Esto ayuda a WalkMe a orientar el tipo de elemento
Busca. Los atributos se pueden aplicar a cualquier tipo de elemento, por lo que es mejor reducir un poco los resultados para acelerar la búsqueda de WalkMe. Por lo tanto, si intentamos seleccionar el logotipo de WalkMe del sitio de soporte, utilizaremos un selector con el atributo a[href="https://support.walkme.com"].

Recuerda que una a es un código HTML para un enlace. Un href es una URL. Esto significa que el logotipo es un enlace a la página de soporte de WalkMe.

El siguiente paso mostrado ahora apuntará al logotipo de soporte de WalkMe utilizando un selector con el atributo href.

Es posible que notes que los ID y las Clases tienen el mismo formato que los atributos. ¡Esto se debe a que los ID y las Clases también son atributos! Al utilizar [class="CLASS NAME"] y [id="ID NAME"].
Este formato te permite seleccionar esos elementos, sin embargo, este formato es más tedioso. Recomendamos que utilices los atajos que hemos mencionado anteriormente para ahorrar tiempo.

Cómo utilizar elementos padre e hijo en jQuery.

Digamos que queremos utilizar el selector sin el tipo de elemento. En https://support.walkme.com, abre la consola de desarrolladores e introduce lo siguiente:

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

Revisa los resultados y observa la longitud que devuelve. En este ejemplo, deberías tener una longitud devuelta de 2:

Intenta pasar el cursor sobre los resultados para ver qué elementos está encontrando el Selector. Verás que este Selector de jQuery apunta tanto al logotipo de WalkMe como al texto "Inicio". Si quisiéramos dirigirnos al texto "Inicio", este Selector no funcionaría, ya que encuentra primero el logotipo de WalkMe.

¿Cómo podemos hacerlo más específico? Podríamos añadir el tipo de elemento del texto "Inicio", a. Sin embargo, esto no funcionaría bien porque el logotipo también es un a. Añadir un antes de el href seguiría devolviendo una longitud de 2 porque hay 2 elementos que se ajustan al Selector de jQuery.

Intentemos algo nuevo. En HTML, hay una forma práctica de codificar que se llama Elemento Padre-Hijo. Es posible que hayas notado que dentro del HTML hay líneas HTML que se pueden expandir para mostrar más código HTML en una estructura jerárquica. Cuando se expande un elemento, el elemento expandido es el padre y el código que aparece debajo contiene sus hijos.

Aquí puedes ver que el div con la clase ht-sitecontainer es el elemento padre de todos los elementos debajo de él, como el div con la clase site-header. Si buscamos más lejos en el árbol HTML, podemos ver que el div con la clase ht-container es el padre del div con la clase site-logo, pero el div con la clase ht-container sería el hijo del elemento de encabezado que está arriba.

Ahora que sabemos sobre los elementos padre-hijo, hablemos sobre cómo aplicarlos a nuestros selectores de jQuery y por qué son útiles en nuestro escenario actual. Cuando tengamos elementos que tengan una clase o atributo similar, también podemos echar un vistazo a los elementos superiores para ver si son diferentes y hacer referencia al elemento superior en nuestro jQuery para que nuestro selector sea más específico.

Si echamos un vistazo al HTML del logotipo de WalkMe y al texto 'Home' a continuación, podemos ver que el elemento del logotipo de WalkMe es un elemento hijo de un div con una clase denominada site-logo:

Si observamos el texto Home, podemos ver que es un elemento hijo de un elemento li con un par de atributos. Dado que los padres son diferentes, podemos utilizarlos en nuestro Selector.

Los elementos padre-hijo se especifican colocando un espacio entre los dos elementos. El elemento padre li aparece antes del espacio y el elemento hijo [href="https://support.walkme.com"] aparece después del espacio.

Si reunimos eso, nuestro jQuery más específico orientado al texto de Home se verá así: li [href='https://support.walkme.com']. Si introducimos esto en el comando wmjQuery y observamos los resultados a continuación, vemos que esta vez solo estamos trayendo un resultado para el texto Home.

Digamos que queremos reducir el selector de logotipos utilizando su relación jerárquica. Sabemos que el selector del logotipo es a[href='https://support.walkme.com"]. Como hemos visto anteriormente, su elemento padre es div.site-logo. Por lo tanto, podemos escribir nuestro selector de logos como div.site-logo a[href="https://support.walkme.com"].

Modificadores

Los modificadores se utilizan para reducir los resultados que devuelve el Selector. Simplemente debes añadirlos al final del Selector. Aunque puedes utilizar varios modificadores a la vez, intenta no utilizar más de dos. Algunos modificadores utilizados comúnmente son :contains(), :visible, :has() y :eq().

• h2:contains(Bienvenido a WalkMe):visible
  • :contains() → seleccionar un elemento que contenga los caracteres especificados entre paréntesis
  • :visible → seleccionar un elemento visible para el usuario, no solo para el ordenador
• .hkb-site-search:has([type="text"])
  • :has() → seleccionar un elemento que contenga otro elemento (especificado entre paréntesis) en su interior. En este caso, estás seleccionando uno que tenga un elemento con el atributo ([type="Text"] anidado dentro.
• form.hkb-site-search input:eq(0)
  • :eq() → selecciona el primer elemento (o el número que especifiques entre paréntesis) que coincida con el selector. Es importante recordar que el número entre paréntesis está indexado, lo que significa que el recuento comienza en 0. El primer elemento es :eq(0), el segundo es :eq(1) y así sucesivamente.
• form.hkb-site-search input:last
  • :last → selecciona el último elemento que coincida con el selector. Funciona de manera similar a :eq(). También puedes utilizar :first para seleccionar el primer elemento que coincida con tu criterio.
    Selector.

ID dinámicos

Hay una trampa que deberás tener en cuenta al escribir los selectores de jQuery: los ID dinámicos. Por lo general, consisten en largas cadenas de números seguidos o precedidos por una o dos palabras. Intenta evitar utilizarlos para identificar el elemento, ya que la cadena de números cambiará al actualizarse. Esto significa que tan pronto como se actualice la página, el ID cambiará y el selector de jQuery ya no funcionará. Para garantizar que esto no suceda, debes encontrar un selector diferente para los elementos con ID dinámicos. Por ejemplo, si intentas seleccionar el td con el ID dinámico a continuación, puedes utilizar .dataCol.inlineEditWrite o .labelCol:contains(Factores de complejidad) + td. Sin embargo, no debes utilizar td#00N0000067211_ilecell. Este es un ID dinámico y cambiará:

Si necesitas absolutamente usar un ID dinámico para identificar un elemento, solo debes utilizar una parte, la parte que no cambia. Esto requerirá algunas conjeturas, pero por lo general debes intentar encontrar una palabra o cadena de texto que tenga apariencia de inglés. En este caso, utilizar "ilecell" sería probablemente una apuesta segura. Para convertir este fragmento de un ID dinámico en un selector, utiliza el formato parcial que hemos discutido anteriormente, en la sección de atributos parciales. Si el ID completo se escribe como [id="00N00000067211_ilecell"], un selector parcial se verá así: [id*="ilecell"]. Aquí estamos escribiendo el ID en el mismo formato que utilizamos para otros atributos (recuerda que el ID es un atributo de uso común). Al añadir el * después de ID, le decimos a WalkMe que busque un ID que contenga "ilecell".

Ahora hemos escrito un atributo parcial para este ID dinámico. Es una alternativa más segura y robusta que utilizar el ID dinámico completo. Sin embargo, aunque [id*="ilecell"] probablemente seleccionará el elemento que queremos de forma consistente, puede coincidir con otros que no queremos. Al eliminar la parte dinámica del ID, hemos reducido el Selector a un atributo bastante general que probablemente describe otros campos.
en este sitio web. Por lo tanto, debes insertar este atributo parcial en un Selector de jQuery más grande. Utilicemos uno de los anteriores. Si queremos añadir nuestro atributo parcial a .dataCol.inlineEditWrite, podemos sustituirlo por una de las dos clases, creando [id*="ilecell"].inlineEditWrite. También podemos adjuntarlo hasta el final: .dataCol.inlineEditWrite[id*="ilecell"].