WalkMe jQuery Cheatsheet

Consejos útiles

• Consola: esta es la palabra que generalmente se utiliza para describir las Herramientas de desarrollo, específicamente la sección de Elementos que muestra todo el HTML que existe en una página.
  • Esto puede ser confuso, ya que también hay una sección de consola donde se introduce wmjQuery para probar los selectores. Estas dos secciones generalmente se mencionan indistintamente, pero si alguien te pide que introduzcas algo en la consola, se están refiriendo a la pestaña Consola en Herramientas de desarrollo.
  • Para acceder, utiliza la tecla F12 o ve al menú del navegador y selecciona Herramientas de desarrollo.
• Asuntos de mayúsculas: jQuery distingue entre mayúsculas y minúsculas. Si escribes una letra en mayúscula o minúscula incorrecta, no podrás hacer coincidir el selector deseado.
• Prueba siempre: antes de utilizar código de jQuery, siempre debes probarlo en la consola de herramientas de desarrollo.
  • Utiliza el comando: wmjQuery("insert_your_selector_here")

Selectores de jQuery

• Elementos: generalmente se muestran en la sección Elementos de Herramientas de desarrollo con el texto en rosa o morado (así como en la página, cuando pasar el cursor por la sección de Elementos). No tienen ningún carácter especial para denotarlos y deben escribirse como una palabra.
  • Ejemplos comunes: div, span, script, head, body, input, li, a, img
  • Ejemplo de búsqueda utilizando WalkMe jQuery:
    • wmjQuery("span")
• ID: al pasar el cursor sobre este selector en la sección de Elementos de Herramientas de desarrollo, el texto aparecerá en naranja, después de un "#", junto al elemento inspeccionado en la pantalla.
  • Los ID son unos de los selectores más fiables que podemos utilizar, ya que los desarrolladores generalmente los crean para ser identificadores únicos. Por eso, a menudo verás los ID con un número aleatorio después de ellos. A esto se conoce como ID dinámicos. Selectores de WalkMe: tendemos a evitarlos, ya que pueden cambiar de un inicio de sesión a otro y no son fiables.
  • No hay ejemplos comunes, ya que estos serán únicos de un sitio a otro. Es posible que aparezcan así: #header, #logo, #searchbar
  • Ejemplo de búsqueda utilizando WalkMe jQuery:
    • wmjQuery("#logo")
• Clase: al pasar el cursor sobre este selector en la sección de Elementos de Herramientas de desarrollo, el texto aparecerá en azul, después de un ".", junto al elemento inspeccionado en la pantalla.
  • Las clases son muy comunes y se reutilizan en todo un sitio. Debes asegurarte de que la clase que has elegido solo se muestre una vez en la página que quieres seleccionar o de que le hayas indicado específicamente a WalkMe la clase a la que te estás refiriendo entre todas las de la página.
  • No hay ejemplos comunes, ya que tienden a ser únicos de un sitio a otro. Es posible que los veas aparecer así: .btn, .dropdown, .navlink
  • Ejemplo de búsqueda utilizando WalkMe jQuery:
    • wmjQuery(".btn")
• Atributos: no los verás al pasar el cursor y tendrás que buscarlos en la sección Elementos de Herramientas de desarrollo.
  • Se utilizan para describir un selector y, por lo tanto, deben utilizarse junto con un elemento, ID o clase por razones de rendimiento. Si se utilizan por sí solos, WalkMe tendrá que buscar cada selector de la página para ver si coincide.
  • Ejemplos comunes: valor, nombre, tipo
  • Ejemplo de búsqueda utilizando WalkMe jQuery:
    • wmjQuery("#example[name='Website User']")
    • Recuerda: siempre se debe poner un Elemento/ID/Clase delante del atributo como se muestra en este ejemplo.

Modificadores especiales

• Uso de comodínes: puedes utilizar un comodín para que la selección sea un poco menos específica.
  • Esto es útil en áreas donde se desea seleccionar varios botones como un botón de guardar, pero que son un poco diferentes entre sí. También es útil para elementos dinámicos en los que una parte de ellos permanece constante.
  • Ejemplo de búsqueda utilizando WalkMe jQuery:
    • wmjQuery("#example[name*='Website']")
    • Esto seguirá coincidiendo con el "Website User" que se utilizó en el ejemplo de atributo.
  • Esto también se puede utilizar para los selectores de ID/clase. Los selectores HTML de la sección de Elementos de Herramientas de desarrollo se muestran como [class='btn'] en vez del .btn que verás en la pantalla cuando pases el cursor sobre el HTML. Esto significa que nuestro comodín también se puede aplicar aquí.
    • Ejemplo de búsqueda utilizando WalkMe jQuery:
      • wmjQuery("[class*='btn']")
      • Esto seguirá coincidiendo con todos los selectores .btn de la página, incluso si es .btn1234 o .btntab
• Selectores relacionados: puedes utilizar la forma en que los selectores se relacionan entre sí para hacer que jQuery sea más específico.
  • Descendente: representado mediante un espacio
    • Ejemplo de búsqueda utilizando WalkMe jQuery:
      • wmjQuery("Input .btn")
      • Esto devolverá todas las clases btn que sean descendientes de un elemento de entrada. En la sección de Elementos de Herramientas para desarrolladores, verás el selector deseado desplazado abajo y a la derecha del selector principal.
  • Elemento hermano: representado mediante un signo más
    • Ejemplo de búsqueda utilizando WalkMe jQuery:
      • wmjQuery("Input+.btn")
      • Esto devolverá todas las clases btn que sean elementos hermanos de un elemento de entrada. En la sección Elementos de Herramientas de desarrollo, verás el selector deseado debajo del elemento hermano y alineado al mismo nivel vertical. Siempre hay que colocar el elemento hermano antes del elemento deseado.
• Comandos: puedes añadir comandos al final de la declaración de jQuery para que la búsqueda sea más precisa. Se añaden escribiendo dos puntos antes del comando.
  • Primer selector: tuselector:first
    • Ejemplo de búsqueda utilizando WalkMe jQuery:
      • wmjQuery(".btn:first")
      • Esto devolverá la primera clase btn en la página actual.
  • Último selector: tuselector:last
    • Ejemplo de búsqueda utilizando WalkMe jQuery:
      • wmjQuery(".btn:last")
      • Esto devolverá la última clase btn en la página actual.
  • Seleccionar por número de selector: tuselector:eq(numero_del_elemento)
    • Ejemplo de búsqueda utilizando WalkMe jQuery:
      • wmjQuery(".btn:eq(2)")
      • Esto devolverá la tercera clase btn en la página actual. Es el tercero porque el primer selector está etiquetado como 0. Entonces, en este caso, tendrías las clases btn 0, btn 1, btn 2.
  • Seleccionar por texto: tuselector:contains("texto del selector deseado")
    • Ejemplo de búsqueda utilizando WalkMe jQuery:
      • wmjQuery(".btn:contains('Guardar')")
      • Esto devolverá todas las clases btn de la página actual que tienen el texto Guardar contenido en ellas. Asegúrate de que utilizas el símbolo "^" a la izquierda de una línea, para abrir el selector en la sección Elementos de Herramientas de desarrollo. El texto estará en la línea más interna de los
        selectores.
      • Si tienes 2 elementos con nombres similares en la misma página y deseas orientarlos con más precisión, puedes utilizar :textEquals(). Por ejemplo: .tabs__item.active.uiTabItem:textEquals(Acción diaria)
  • Selección por selectores: tuselector:has("selectores dentro del selector deseado")
    • Ejemplo de búsqueda utilizando WalkMe jQuery:
      • wmjQuery("Input:has('.btn')")
      • Esto devolverá todos los elementos de entrada de la página actual que tienen la clase btn como descendiente. Asegúrate de que utilizas el símbolo "^" a la izquierda de una línea, para abrir el selector en la sección Elementos de Herramientas de desarrollo. Encontrarás los selectores que descienden del selector deseado.
  • Selector visible: tuselector:visible(número de elemento)
    • Ejemplo de búsqueda utilizando WalkMe jQuery:
      • wmjQuery(".btn:visible")
      • Esto se utiliza cuando hay versiones ocultas del selector deseado en una página. Un ejemplo serían las aplicaciones de página única, en las que se puede cambiar de pestaña. Esto significa que el elemento sigue estando técnicamente en la página incluso si está oculto a la vista.

Selectores de jQuery para componentes de WalkMe Player

Esta tabla es útil para los que quieren crear contenido de WalkMe que interactúe con WalkMe Player (normalmente, SC, PS y CS).

*Reemplaza el XXXXXX por el ID de WalkMe relevante del componente

iFrame jQuery

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:

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

Para evaluar el selector en la consola de herramientas de desarrollo, es necesario utilizar la plantilla wmjQuery:

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

iFrame triple

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

Ejemplo: {"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 evaluar el selector en la consola de herramientas de desarrollo, es necesario utilizar la plantilla wmjQuery:

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

Seminario web de jQuery