Cheatsheet pour le jQuery de WalkMe

Download as PDF

Conseils utiles

• Console : C'est généralement le mot utilisé pour décrire les outils du développement, en particulier la section Éléments qui montre tout le HTML qui existe sur une page.
  • Cela peut être déroutant car il existe également une section de la console où vous entrez dans votre wmjQuery pour tester vos sélecteurs. Ces deux sections sont généralement interchangeables, mais si quelqu'un vous demande de saisir quelque chose dans la console, il se réfère à l'onglet Console dans les outils de développement.
  • Pour y accéder, utilisez F12 ou rendez-vous sur votre menu de navigateur et sélectionnez les outils de développement.
• Les majuscules sont importantes : Tout jQuery est sensible à la casse. Si vous saisissez une lettre en majuscule ou en minuscule et que vous vous trompez, vous ne serez pas en mesure de trouver le sélecteur souhaité.
• Testez en permanence : vous devez toujours tester votre jQuery via la section de la console des outils de développement avant de l'utiliser.
  • Utilisez la commande : wmjQuery("insert_your_selector_here")

Sélecteurs jQuery

• Éléments : ils se trouvent généralement dans la section des outils de développement comme l'écriture rose et violette (ainsi que sur la page lorsque vous passez la souris sur la section des Éléments). Ils n'ont pas de caractères spéciaux pour les démarquer et doivent être sous forme de mot.
  • Exemples courants : div, span, script, head, body, input, li, a, img
  • Exemple de recherche en utilisant le jQuery de WalkMe :
    • wmjQuery("span")
• ID : lorsque vous passez la souris sur ce sélecteur dans la section des outils de développement, l'écriture apparaîtra à l'écran en orange, précédé d'un "#", à côté de l'élément inspecté
  • Les ID sont l'un des sélecteurs les plus importants que nous pouvons utiliser car ils sont généralement utilisés comme des identificateurs uniques par les développeurs. Pour cette raison, vous verrez souvent les ID suivis d'un nombre aléatoire. C'est ce qu'on appelle un ID dynamique. Nous avons tendance à éviter la sélection WalkMe car elle peut être différente d'une connexion à l'autre et n'est pas un sélecteur fiable.
  • Il n'existe aucun exemple commun car ils sont uniques d'un site à l'autre. Vous pouvez les voir apparaître comme ceci : #header, #logo, #searchbar.
  • Exemple de recherche en utilisant le jQuery de WalkMe :
    • wmjQuery("#logo")
• Classe : lorsque vous passez la souris sur ce sélecteur dans la section des outils de développement, l'écriture apparaîtra à l'écran en bleu, précédé d'un ".".
  • Les classes sont très courantes et sont réutilisées sur l'ensemble d'un site. Vous devrez vous assurer que la classe que vous avez choisie ne s'affiche qu'une fois sur la page que vous avez l'intention de sélectionner ou que vous avez indiqué précisément à WalkMe à quelle classe de multiples vous vous référez sur la page.
  • Il n'existe aucun exemple commun car elles ont tendance à être unique d'un site à l'autre. Vous pouvez les voir apparaître comme ceci : .btn, .dropdown, .navlink.
  • Exemple de recherche en utilisant le jQuery de WalkMe :
    • wmjQuery(".btn")
• Attributs : vous ne les verrez pas en passant la souris et vous devrez les chercher dans la section des outils de développement.
  • Ils sont utilisés pour décrire un sélecteur et doivent donc être utilisés en association avec un élément, un ID ou une classe pour des raisons de performance. S'ils sont utilisés seuls, WalkMe devra effectuer une recherche sur chaque sélecteur de la page pour voir s'il correspond.
  • Exemples communs : valeur, name, type
  • Exemple de recherche en utilisant le jQuery de WalkMe :
    • wmjQuery("#example[name='Website User']")
    • Souvenez-vous ; mettez toujours un élément, un ID, une classe devant l'attribut comme indiqué dans cet exemple.

Les modificateurs spéciaux

• Utilisation du caractère générique : vous pouvez utiliser un caractère générique pour rendre votre sélection un peu moins spécifique.
  • C'est utile lorsque vous voulez sélectionner plusieurs boutons comme un bouton d'enregistrement mais qu'ils sont un peu différents les uns des autres. C'est également utile pour les éléments dynamiques lorsqu'une de leur partie reste cohérente.
  • Exemple de recherche en utilisant le jQuery de WalkMe :
    • wmjQuery("#example[name*='Website']")
    • Cela correspondra toujours à l'utilisateur du site qui a été utilisé dans l'exemple de l'attribut.
  • Cela peut également être utilisé pour les sélecteurs d'ID et de classe. Les sélecteurs HTML dans la section des outils de développement s'affichent comme [class='btn'] par rapport au .btn, que vous verrez à l'écran lorsque vous passerez la souris sur le HTML. Cela signifie que notre caractère générique peut également s'appliquer ici.
    • Exemple de recherche en utilisant le jQuery de WalkMe :
      • wmjQuery("[class*='btn']")
      • Cela correspondra toujours à tous les sélecteurs .btn sur la page, même s'il s'agit de .btn1234 ou de .btntab.
• Sélecteurs de relation : vous pouvez utiliser la relation de sélecteurs pour rendre votre jQuery plus spécifique.
  • Descendant : indiqué à l'aide d'un espace
    • Exemple de recherche en utilisant le jQuery de WalkMe :
      • wmjQuery("Input .btn")
      • Cela renverra toutes les classes de btn qui sont issues d'un élément Input. Dans la section des outils de développement, vous verrez que votre sélecteur souhaité est en retrait sur la droite du sélecteur de progéniteurs qui se situe au-dessus.
  • Jumeau : indiqué à l'aide d'un signe plus
    • Exemple de recherche en utilisant le jQuery de WalkMe :
      • wmjQuery("Input+.btn")
      • Cela renverra toutes les classes de btn qui sont jumellées à un élément Input. Dans la section des outils de développement, vous verrez votre sélecteur souhaité en dessous de son jumeau et qui partage le même niveau de retrait. Ayez toujours l'élément jumeau avant votre élément souhaité.
• Commandes : vous pouvez ajouter des commandes à la fin de votre énoncé jQuery pour rendre votre recherche plus précise. Celles-ci s'ajoutent en tapant les deux points suivis de la commande.
  • Premier sélecteur : yourselector:first
    • Exemple de recherche en utilisant le jQuery de WalkMe :
      • wmjQuery(".btn:first")
      • Cela renverra la première classe de btn sur la page actuelle.
  • Dernier sélecteur : yourselector:last
    • Exemple de recherche en utilisant le jQuery de WalkMe :
      • wmjQuery(".btn:last")
      • Cela renverra la dernière classe de btn sur la page actuelle.
  • Sélection par le nombre de sélecteurs : yourselector:eq(number_of_element)
    • Exemple de recherche en utilisant le jQuery de WalkMe :
      • wmjQuery(".btn:eq(2)")
      • Cela renverra la 3e classe de btn sur la page actuelle. C'est la 3e classe car le premier sélecteur est étiqueté 0. Donc, dans ce cas, vous aurez les classes btn 0, btn 1, btn 2.
  • Sélection par le texte : yourselector:contains("desired selector's text")
    • Exemple de recherche en utilisant le jQuery de WalkMe :
      • wmjQuery(".btn:contains('Save')")
      • Cela renverra toutes les classes de btn sur la page actuelle qui contiennent le texte Save. Assurez-vous d'ouvrir le sélecteur dans la section des outils de développement en utilisant le symbole de la carotte à gauche d'une ligne. Vous trouverez le texte sur la ligne la plus interne des
        sélecteurs.
  • Sélection par les sélecteurs : yourselector:has("selectors inside the desired selector")
    • Exemple de recherche en utilisant le jQuery de WalkMe :
      • wmjQuery("Input:has('.btn')")
      • Cela renverra tous les éléments Input sur la page actuelle qui ont la classe btn comme descendants. Assurez-vous d'ouvrir le sélecteur dans la section des outils de développement en utilisant le symbole de la carotte à gauche d'une ligne. Vous trouverez les sélecteurs qui sont en retrait de votre sélecteur souhaité.
  • Sélecteur visible : yourselector:visible(nombre d'éléments)
    • Exemple de recherche en utilisant le jQuery de WalkMe :
      • wmjQuery(".btn:visible")
      • Il est utilisé lorsque vous avez des versions cachées de votre sélecteur souhaité sur une page. Un exemple serait sur les applications de la page unique où vous pouvez basculer d'un onglet à l'autre. Cela signifie que l'élément est toujours techniquement sur la page, même s'il est caché.

Sélecteurs jQuery pour les composants du lecteur WalkMe

Ce tableau est utile pour quiconque veut créer le contenu WalkMe qui interagit avec le lecteur WalkMe (le plus souvent SC, PS et CS).

*Remplacez les XXXXXX par l'ID WalkMe pertinent du composant.

Cela peut également être utilisé pour les sélecteurs d'ID et de classe. Les sélecteurs HTML dans la section des outils de développement s'affichent comme [class='btn'] par rapport au .btn, que vous verrez à l'écran lorsque vous passerez la souris sur le HTML. Cela signifie que notre caractère générique peut également s'appliquer ici.

Le modèle de sélecteur jQuery ci-dessous permet à WalkMe de cibler un élément dans un iFrame. Mise à jour des éléments en caractères gras comme dans l'exemple avec les sélecteurs respectifs :

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

Pour évaluer le sélecteur dans la console des outils du développement, vous devrez utiliser le modèle wmjQuery ci-dessous :

Webinaire jQuery