Wie kann ich einen DOM-Selector oder XPath identifizieren, der in einem CloudWatch Canary GUI Workflow Builder verwendet werden soll?

Kurzbeschreibung

Wenn Sie beim Erstellen eines Canarys mit dem GUI Workflow Builder ein falsches DOM-Element ausgewählt haben, können die folgenden Fehler auftreten:

• „Fehler: Knoten ist entweder nicht sichtbar oder kein HTMLElement.“
• „Es wurde kein Testergebnis zurückgegeben. Fehler: Die Navigation ist fehlgeschlagen, weil der Browser die Verbindung unterbrochen hat!“
• „Auszeit-Fehler: Warte auf den Selektor“
• „Auszeit-Fehler: Warte auf XPath“

Behebung

Ermitteln Sie den richtigen Selektortyp

Der GUI Workflow Builder hat fünf Aktionen. Der erforderliche Selektortyp hängt von der Aktion und der verwendeten Laufzeitversion ab.

Runtime-Versionen verwenden Node.js und Puppeteer, und die Aktion Text verifizieren verwendet den XPath-Selektor. Die folgenden Aktionen verwenden den DOM-Selektor:

• Klicken
• Selektor überprüfen
• Text eingeben
• Mit der Navigation klicken

Für Runtime-Versionen, die Python und Selenium WebDriver verwenden, verwenden alle Aktionen den XPath-Selektor.

Den richtigen Selektor identifizieren

DOM-Selektoren

Um ein eindeutiges Attribut für Ihr DOM zu finden:

1. Öffnen Sie das Kontextmenü (Rechtsklick) für das Element (z. B. eine Schaltfläche, ein Eingabefeld, div, span oder h1).
2. Wählen Sie Element untersuchen (Mozilla Firefox) oder Untersuchen (Google Chrome) aus.
3. Beachten Sie das eindeutige DOM-Attribut, mit dem Sie Ihr Element identifizieren können (wie ID, Klasse oder Name).

Wenn Ihr DOM kein eindeutiges Attribut hat, verwenden Sie eine der folgenden Methoden, um das Element zu finden:

• Verwenden Sie abgeleitete Selektoren, um Elemente anhand des angegebenen Pfads oder Attributs abzugleichen. Sie müssen den genauen Pfad verwenden. Um beispielsweise Folgendes zu suchen <div class='new' id='newId'> <a href="/test1">Test 1</a> <a href="/test2">Test 2</a> <a href="/test3">Test 3</a> </div>, benutzen Sie div.new > a:first-child.
• Verwenden Sie Attributselektoren, um Elemente anhand des Vorhandenseins oder Werts eines bestimmten Attributs abzugleichen. Um beispielsweise Folgendes zu suchen <div class="user-panel main" id="userId"> <input name="login"/> </div>, verwenden Sie div.user-panel.main input[name='login'].

Im Entwicklermodus Ihres Internetbrowsers können Sie auch einen eindeutigen DOM-Selektor für Ihr DOM-Element abrufen.

Chrome:

1. Öffnen Sie das Kontextmenü (Rechtsklick) für das Element und wählen Sie dann Untersuchen.
2. Öffnen Sie auf der Registerkarte Elemente das Kontextmenü (Rechtsklick) für die hervorgehobene Linie.
3. Wählen Sie Kopieren und dann Selektor kopieren aus.

Firefox:

1. Öffnen Sie das Kontextmenü (Rechtsklick) für das Element und wählen Sie dann Elemente untersuchen.
2. Öffnen Sie auf der Registerkarte Inspector das Kontextmenü (Rechtsklick) für die hervorgehobene Linie.
3. Wählen Sie Kopieren und dann den CSS-Selektor aus.

Hinweis: Wenn das HTML-Dokument mehrere Instances des Selektors enthält, wählt der Canary das erste Element aus dem zurückgegebenen Array. Vermeiden Sie es, Elemente auszuwählen, die das CSS-Attribut display:none; enthalten. Diese Elemente sind unsichtbar und führen dazu, dass der Selektor ausfällt.

XPath-Selektoren

Holen Sie sich einen eindeutigen XPath-Selektor für Ihr DOM-Element, indem Sie den Entwicklermodus Ihres Internetbrowsers verwenden.

Chrome:

1. Öffnen Sie das Kontextmenü (Rechtsklick) für das Element und wählen Sie dann Untersuchen.
2. Öffnen Sie auf der Registerkarte Elemente das Kontextmenü (Rechtsklick) für die hervorgehobene Linie.
3. Wählen Sie Kopieren und dann XPath kopieren aus.

Firefox:

1. Öffnen Sie das Kontextmenü (Rechtsklick) für das Element und wählen Sie dann Elemente untersuchen.
2. Öffnen Sie auf der Registerkarte Inspector das Kontextmenü (Rechtsklick) für die hervorgehobene Linie.
3. Wählen Sie Kopieren und dann XPath aus.

Hinweis: Bevor Sie den XPath-Selektor hinzufügen, den Sie in den Canary kopiert haben, entfernen Sie das Präfix „//“. Der Kanarienvogel fügt Ihrem Code standardmäßig das Präfix „//“ hinzu.

Testen Sie den neuen Selektor und vergewissern Sie sich, dass er korrekt ist

Öffnen Sie den Konsolenmodus in Ihrem Internetbrowser

Chrome:

1. Wählen Sie oben rechts im Browser die Option Anpassen.
2. Erweitern Sie die Option Weitere Tools und wählen Sie dann Entwicklertools aus.
3. Wenn DevTools im Browser geöffnet sind, wählen Sie das Konsolenfenster aus.

Firefox:

1. Wählen Sie oben rechts im Browser Menü öffnen aus.
2. Wählen Sie Webentwickler und dann Web-Konsole aus.
   Hinweis: In einigen Versionen von Firefox befindet sich das Menü Webentwickler im Menü Tools.

Den DOM-Selektor testen

Die Syntax zum Testen der DOM-Auswahlabfrage in der Browserkonsole lautet: document.querySelectorAll("[AttributeName='AttributeValue']"). Wenn Sie beispielsweise ein div-Element mit id='username' haben, verwenden Sie das folgende Muster: document.querySelectorAll("[name='username']").

Den XPath-Selektor testen

Die Syntax zum Testen der XPath-Abfrage in der Browserkonsole lautet: $x("XPATH_QUERY"). Wenn Sie beispielsweise ein div-Element mit id=‘welcome‘ haben, das ein h1-Element enthält, verwenden Sie das folgende Muster: $x("//div[@id='welcome']//h1). Wenn Sie diesen Pfad zum Canary hinzufügen, lassen Sie das Präfix "//" weg.

Fügen Sie den neuen Selektor zum CloudWatch-Canary hinzu

1. Öffnen Sie die CloudWatch-Konsole.
2. Wählen Sie Canaries aus für Kunststoffe.
3. Wählen Sie Canary erstellen aus.
4. Wählen Sie Eine Vorlage benutzen und dann GUI Workflow Builder aus.
5. Sehen Sie sich das Beispiel in GUI Workflow Builder an, um einen Vorlage zu vervollständigen, der den neu erstellten Selektor verwendet.