WalkMe jQuery Hilfestellung

Download as PDF

Hilfreiche Tipps

• Console: Dies ist im Allgemeinen die Bezeichnung für die „Developer Tools“ (Entwicklerwerkzeuge), speziell für den Abschnitt „Elements“, der das gesamte auf einer Seite vorhandene HTML anzeigt.
  • Das kann verwirrend sein, da es auch einen Abschnitt „Console“ für die Eingabe Ihrer wmjQuery gibt, mit der Sie Ihre Selektoren testen können. Diese beiden Abschnitte werden in der Regel als austauschbar bezeichnet, aber wenn Sie aufgefordert werden, etwas in die Konsole einzugeben, ist damit die Registerkarte „Console“ in den Entwicklerwerkzeugen gemeint.
  • Um darauf zuzugreifen, verwenden Sie F12 oder gehen Sie in das Menü Ihres Browsers und wählen Sie „Developer Tools“ aus.
• Großschreibung ist wichtig: In jQuery wird zwischen Groß- und Kleinschreibung unterschieden. Wenn Sie den falschen Groß- oder Kleinbuchstaben eingeben, können Sie den gewünschten Selektor nicht zuordnen.
• Immer testen: Sie sollten Ihr jQuery immer über den Konsolenbereich der Entwicklerwerkzeuge testen, bevor Sie es verwenden.
  • Verwenden Sie den Befehl: wmjQuery("insert_your_selector_here")

jQuery selectors (jQuery-Selektoren)

• Elemente: Werden normalerweise im Abschnitt Elemente der Entwicklerwerkzeuge als rosa/violette Schrift angezeigt (sowie auf der Seite, wenn Sie den Mauszeiger über den Abschnitt Elemente bewegen). Sie haben keine Sonderzeichen, um sie zu kennzeichnen und sollten als ein Wort geschrieben werden
  • Gängige Beispiele: div, span, script, head, body, input, li, a, img
  • Beispielsuche unter Verwendung von WalkMe jQuery:
    • wmjQuery("span")
• IDs: Wenn Sie den Mauszeiger über diesen Selektor im Abschnitt Elemente der Entwicklerwerkzeuge bewegen, erscheint der Schriftzug neben dem geprüften Element auf dem Bildschirm in Orange, geführt von einem „#“.
  • IDs gehören zu den stärksten Selektoren, die wir verwenden können, da sie in der Regel von Entwicklern als Unique Identifier erstellt werden. Aus diesem Grund sehen Sie oft IDs mit einer zufälligen Zahl dahinter. Diese Gegebenheit ist als dynamische ID bekannt. WalkMe-Auswahl, wir neigen dazu, diese zu vermeiden, da sie sich von Anmeldung zu Anmeldung ändern können und keine zuverlässigen Selektoren sind.
  • Es gibt keine gängigen Beispiele, da diese von Site zu Site unterschiedlich sein werden. Möglicherweise werden sie wie folgt angezeigt: #header, #logo, #searchbar.
  • Beispielsuche unter Verwendung von WalkMe jQuery:
    • wmjQuery("#logo")
• Class: Wenn Sie den Mauszeiger über diesen Selektor im Abschnitt Elemente der Entwicklungswerkzeuge bewegen, erscheint der Schriftzug neben dem geprüften Element auf dem Bildschirm in Blau, geführt von einem „.“
  • Klassen sind sehr gebräuchlich und werden in einer Site wiederverwendet. Stellen Sie sicher, dass die von Ihnen gewählte Klasse nur einmal auf der Seite angezeigt wird, auf der Sie eine Auswahl treffen wollen, oder dass Sie WalkMe genau mitgeteilt haben, auf welche Klasse der Vielzahl auf der Seite Sie sich beziehen.
  • Es gibt keine gängigen Beispiele, da diese von Site zu Site unterschiedlich sind. Möglicherweise werden sie wie folgt angezeigt: .btn, .dropdown, .navlink.
  • Beispielsuche unter Verwendung von WalkMe jQuery:
    • wmjQuery(".btn")
• Attributes – Sie sehen diese nicht, wenn Sie den Mauszeiger darüber bewegen, sondern müssen sie im Abschnitt Elemente der Entwicklerwerkzeuge suchen.
  • Sie werden zur Beschreibung eines Selektors verwendet und sollten daher aus Leistungsgründen in Verbindung mit einem Element, einer ID oder einer Klasse verwendet werden. Wenn sie alleine verwendet werden, muss WalkMe jeden Selektor auf der Seite durchsuchen, um zu sehen, ob er passend ist.
  • Gängige Beispiele: value, name, type
  • Beispielsuche unter Verwendung von WalkMe jQuery:
    • wmjQuery("#example[name='Website User']")
    • Denken Sie daran: Stellen Sie dem Attribut immer ein Element/eine ID/eine Klasse voran, wie in diesem Beispiel gezeigt.

Special Modifiers

• Wildcard Usage (Verwendung von Platzhaltern): Sie können einen Platzhalter verwenden, um Ihre Auswahl etwas weniger spezifisch zu gestalten.
  • Das ist in Bereichen nützlich, in denen Sie mehrere Schaltflächen auswählen möchten, z. B. eine Speicher-Schaltfläche, die sich aber ein wenig voneinander unterscheiden. Es ist auch nützlich für dynamische Elemente, bei denen ein Teil von ihnen konsistent bleibt.
  • Beispielsuche unter Verwendung von WalkMe jQuery:
    • wmjQuery("#example[name*='Website']")
    • Dies stimmt immer noch mit dem „Benutzer der Website“ überein, der im Attribut-Beispiel verwendet wurde.
  • Dies kann auch für ID/Klassen-Selektoren verwendet werden. HTML-Selektoren im Abschnitt Elemente der Entwicklerwerkzeuge werden als [class='btn'] angezeigt, im Gegensatz zum .btn, das Sie auf dem Bildschirm sehen, wenn Sie den Mauszeiger über das HTML bewegen. Das bedeutet, dass unser Platzhalter auch hier angewendet werden kann.
    • Beispielsuche unter Verwendung von WalkMe jQuery:
      • wmjQuery("[class*='btn']")
      • Dies stimmt immer noch mit allen .btn-Selektoren auf der Seite überein, auch wenn es sich um . btn1234 oder .btntab handelt.
• Relation Selectors: Sie können nutzen, wie Selektoren zueinander in Beziehung stehen, um Ihr jQuery spezifischer zu gestalten.
  • Descendant (Nachfolgeelement): gekennzeichnet mit einem Leerzeichen
    • Beispielsuche unter Verwendung von WalkMe jQuery:
      • wmjQuery("Input .btn")
      • Dadurch werden alle btn-Klassen zurückgegeben, die von einem Input-Element abgeleitet sind. Im Abschnitt Elemente der Entwicklerwerkzeuge sehen Sie Ihren gewünschten Selektor eingerückt rechts neben dem darüber liegenden Progenitor-Selektor.
  • Sibling (Gleichgeordnetes Element): gekennzeichnet mit einem Plus-Zeichen
    • Beispielsuche unter Verwendung von WalkMe jQuery:
      • wmjQuery("Input+.btn")
      • Dadurch werden alle btn-Klassen zurückgegeben, die gleichgeordnet mit einem Input-Element sind. Im Bereich Elemente der Entwicklerwerkzeuge sehen Sie Ihren gewünschten Selektor unterhalb des gleichgeordneten Elements und auf der gleichen Einrückungsebene. Lassen Sie das gleichgeordnete Element immer vor Ihrem gewünschten Element stehen.
• Commands: Sie können am Ende Ihrer JQuery-Anweisung Befehle hinzufügen, um Ihre Suche präziser zu gestalten. Diese werden hinzugefügt, indem Sie einen Doppelpunkt hinzufügen, gefolgt von dem Befehl.
  • First Selector: yourselector:first
    • Beispielsuche unter Verwendung von WalkMe jQuery:
      • wmjQuery(".btn:first")
      • Dadurch wird die erste btn-Klasse auf der aktuellen Seite zurückgegeben.
  • Letzter Selector: yourselector:last
    • Beispielsuche unter Verwendung von WalkMe jQuery:
      • wmjQuery(".btn:last")
      • Dadurch wird die letzte btn-Klasse auf der aktuellen Seite zurückgegeben.
  • Selecting by Selector Number (Auswahl nach Selektornummer): yourselector:eq(number_of_element)
    • Beispielsuche unter Verwendung von WalkMe jQuery:
      • wmjQuery(".btn:eq(2)")
      • Dadurch wird die dritte btn-Klasse auf der aktuellen Seite zurückgegeben. Es ist der dritte, da der erste Selektor als 0 gekennzeichnet ist. In diesem Fall hätten Sie also die Klassen btn 0, btn 1, btn 2.
  • Selecting by Text (Auswählen nach Text): yourselector:contains("desired selector's text")
    • Beispielsuche unter Verwendung von WalkMe jQuery:
      • wmjQuery(".btn:contains('Save')")
      • Dies gibt alle btn-Klassen auf der aktuellen Seite zurück, die den Text „Save“ (Speichern) beinhalten. Achten Sie darauf, dass Sie den Selektor im Bereich Elemente der Entwicklerwerkzeuge mit dem Möhren-Symbol links neben einer Zeile öffnen. Sie finden den Text in der innersten Zeile des
        Selektors.
  • Selecting by Selectors (Auswählen nach Selektoren): yourselector:has("selectors inside the desired selector")
    • Beispielsuche unter Verwendung von WalkMe jQuery:
      • wmjQuery("Input:has('.btn')")
      • Dadurch werden alle Eingabeelemente auf der aktuellen Seite zurückgegeben, die die Klasse btn als Nachfolgeelement haben. Achten Sie darauf, dass Sie den Selektor im Bereich Elemente der Entwicklerwerkzeuge mit dem Möhren-Symbol links neben einer Zeile öffnen. Sie finden die Selektoren, die von Ihrem gewünschten Selektor absteigend sind.
  • Visible Selector: yourselector:visible(number of element)
    • Beispielsuche unter Verwendung von WalkMe jQuery:
      • wmjQuery(".btn:visible")
      • Dies wird verwendet, wenn es versteckte Versionen Ihres gewünschten Selektors auf einer Seite gibt. Ein Beispiel wäre bei Single-Page-Anwendungen, wo Sie zwischen Registerkarten wechseln können. Das bedeutet, dass sich das Element technisch gesehen immer noch auf der Seite befindet, auch wenn es nicht sichtbar ist.

jQuery-Selektoren für WalkMe Player-Komponenten

Diese Tabelle ist für jeden hilfreich, der WalkMe-Inhalte erstellen möchte, die mit dem WalkMe Player interagieren (am häufigsten SC, PS und CS).

*Ersetzen Sie die XXXXXX durch die entsprechende WalkMe-ID der Komponente

iFrame jQuery

Die nachfolgende jQuery-Selektor-Vorlage ermöglicht es WalkMe, ein Element in einem iFrame gezielt anzusteuern. Aktualisieren Sie die fett markierten Elemente wie im Beispiel mit den entsprechenden Selektoren:

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

Um den Selektor in der Dev Tools Console (Konsole der Entwicklerwerkzeuge) auszuwerten, sollten Sie die folgende wmjQuery-Vorlage verwenden:

jQuery-Webinar