New Relic Synthetics ist ein Monitoring-Tool, mit dem Sie Scripted Browser-Tests erstellen und die Verfügbarkeit, Uptime und Performance Ihrer Website überwachen können. Monitoring mit Synthetics zeigt Ihnen, wie Ihre Website oder Webanwendung beim Zugriff an verschiedenen Orten weltweit funktioniert, damit Ihre Benutzer:innen unabhängig von ihrem Standort eine gleichbleibende Website-Performance erwarten können.

Mit New Relic Synthetics können Sie Scripted Tests erstellen, die die Nutzung Ihrer Website oder Webanwendung simulieren, z. B. das Klicken auf Schaltflächen, Ausfüllen von Webformularen und Navigieren durch die Webseiten. Diese Tests laufen entweder nach einem festgelegten Zeitplan ab oder können manuell ausgelöst werden. Die Ergebnisse sehen Sie dann im New Relic Dashboard.

In diesem Blog erfahren Sie, wie Sie mit Selenium 4 Synthetic Tests für eine Reihe interessanter Use Cases schreiben, z. B. asynchronen Code, veraltete Elemente, animierte Komponenten und mehr. Wir möchten einige der häufigsten Problemfälle abdecken, die Ihnen unterkommen können, und hoffen, dass unsere praktischen Lösungen und Workarounds Ihnen dabei helfen, die neuen Features und Toolsets von Selenium 4 optimal auszuschöpfen.

New Relic Scripted Browser-Tests mit Selenium 4

Selenium wird seit langem als Open-Source-Framework für Webanwendungstests geschätzt, und mit dem Release von Selenium 4 hat es seinen Ruf als Branchenstandard weiter gefestigt. Die neueste Version enthält eine Reihe neuer Features und Verbesserungen, die die Automatisierung von Webtests für Entwickler:innen und Tester:innen noch leichter machen. Den Leitfaden zum Umstieg von der alten Synthetics-Laufzeit zur neuen mit Selenium 4 finden Sie in der New Relic Dokumentation.

Falls Ihnen der Begriff „Scripted Browser“ neu ist: Dies ist ein Feature von New Relic Synthetics, mit dem Benutzer:innen benutzerdefinierte Abläufe und Interaktionen auf ihren Websites oder Anwendungen mit Skripten simulieren können. So können Sie testen, wie echte Benutzer:innen Ihre Website nutzen – von der Anmeldung über die Navigation durch die Webseiten bis hin zum Ausfüllen von Webformularen. Und all dies wird durch ein Skript automatisiert, das sich auf Selenium JavaScript WebDriver-Bindings stützt.
Führen Sie folgende Schritte aus, um einen Scripted Browser-Monitor zu erstellen:

  • Gehen Sie zu one.newrelic.com > Synthetics.
  • Wählen Sie scripted browser als den Monitortyp.
  • Geben Sie einen Namen und eine Beschreibung Ihres Monitors ein (z. B. Websitename.com scripted browser).
  • Wählen Sie die Orte aus, an denen der Monitor ausgeführt werden soll (z. B. Hamburg, Mumbai, Bali, Madrid und Montreal).
  • Wählen Sie die Ausführungshäufigkeit aus (z. B. alle fünf Minuten).

Nach Abschluss dieser Schritte können Sie das Skript zum Testen der Website-Performance erstellen und sich vergewissern, dass bestimmte Elemente einwandfrei geladen werden.

Async/Await in Skripts implementieren

Wenn Sie New Relic mit Selenium 4 verwenden, müssen Sie Ihre eigenen async-Funktionen und -Zusagen managen. Auf diese Weise können Sie Ihre Skripts lesbarer und unmissverständlicher verfassen. 

Sehen wir uns die „async/await“-Syntax an:

// Variablen festlegen
const By = $selenium.By
const until = $selenium.until

// Zur Seite navigieren
await $webDriver.get('https://automationintesting.com/selenium/testpage/')
// Warten, bis Dropdown gefunden wurde
const dropdown = await $webDriver.wait(until.elementLocated(By.id('gender')))
// Auf Dropdown klicken
await dropdown.click()
// Dropdown-Option auswählen
const option = await dropdown.findElement(By.xpath("//option[. = 'Female']"))
// Prüfen, ob die Option ausgewählt ist
const optionSelected = await option.isSelected()
// Falls nicht, Option auswählen
if (!optionSelected) {
 await option.click()
}

Das Praktische an der async/await-Syntax ist, dass sie sequenziell aufgebaut ist und wir sie daher einfach von oben nach unten lesen können. 

„Stale Element Reference“-Ausnahme beheben

Die Ausnahme „Stale Element Reference“ tritt auf, wenn ein älteres („stale“) Webelement, das zuvor in einem Selenium-Skript gefunden und bearbeitet wurde, aufgrund von Änderungen in der Struktur der Webseite nicht mehr vorhanden oder mit dem DOM verbunden ist. Dadurch kann bei dem Versuch, das Element zu bearbeiten, die Ausführung des Skripts fehlschlagen.

In der neuen Version von Selenium WebDriver hatten manche Benutzer:innen Schwierigkeiten bei der Anpassung an die aktualisierte Laufzeit. Einer der Gründe ist die Stale Element Reference-Ausnahme. Diese Ausnahme wird in der Selenium-Dokumentation beschrieben und tritt auf, wenn ein zuvor vorhandenes Webelement nicht mehr mit dem DOM verbunden oder gar nicht mehr vorhanden ist, was zu Problemen bei der Interaktion mit diesem Element führt.
Das Problem lässt sich beheben, indem das Skript wartet, bis das Element veraltet ist, damit es wiedergefunden wird und diesmal vom WebDriver ohne Probleme erfasst werden kann:

 

const stalledSearchInput = await
$webDriver.wait(until.elementLocated(By.name("search-input")));
// Folgende Zeile wartet, bis problematisches Element aus dem DOM entfernt wurde
await $webDriver.wait(until.stalenessOf(stalledSearchInput), DefaultTimeout);
// Folgende Zeile findet das Element erneut
const newSearchInput = await $webDriver.wait(until.elementLocated(By.name("search-input")));
await newSearchInput.click();

Animierte Elemente bearbeiten

Manche Seiten enthalten Animationen oder Elemente, die bei bestimmten Benutzeraktionen oder anderen Vorgängen auf der Seite aktiviert oder deaktiviert werden.
Für solche Elemente können wir die Methode „elementIsEnabled“ verwenden. Hier ist ein Beispiel:

const button = await $webDriver.wait(until.elementLocated(By.xpath("//button[div[text()='Button']]")));
await $webDriver.wait(until.elementIsEnabled(button));
await button.click();

In diesem Beispiel wartet das Skript, bis eine animierte Schaltfläche nach Ende der Animation aktiviert wird. Andernfalls wäre das Skript beim Versuch fehlgeschlagen, mit einem noch nicht aktivierten, vom WebDriver erkannten Element zu interagieren.

Fehler „Element not clickable at point“ beheben

Ein weiteres Problem, das häufig bei der Verwendung von Selenium WebDriver auftritt, ist der Fehler „Element not clickable at point“. Dieser Fehler tritt in der Regel dann auf, wenn Selenium WebDriver versucht, auf ein Element zuzugreifen, das sich hinter einem anderen Element verbirgt. Es kann beispielsweise sein, dass aufgrund eines ungünstigen oder komplexen Webdesigns ein „Input“-Element, auf das Selenium zuzugreifen versucht, durch ein „p“- oder anderes HTML-Element überlagert wird. Dieser Fehler kann auch auftreten, wenn ein Skript automatisch mit einem Recorder erstellt wird, der das falsche Element auswählt.

Um dieses Problem zu beheben, müssen wir das HTML-Dokument dieser Seite prüfen und dafür sorgen, dass Selenium auf das korrekte Element geführt wird. In der Regel muss dazu das Element selbst oder der Selektor genauer definiert werden.

Dieser Fehler kann aus weiteren Gründen auftreten:

  • Wenn Selenium im selben Selektor mehrere Elemente findet
  • Wenn ein Element nicht vom WebDriver erfasst wurde. – Eine einfache Lösung wäre, eine Callback-Funktion zum Klicken auf ein Element zu verwenden. Dadurch wird WebDriver angewiesen, automatisch zu einem Element zu scrollen, damit es immer im Blick ist.

 

.then(function (el) {
       el.click();
     });

Ich hoffe, diese Beispiele erleichtern und beschleunigen Ihren Umstieg zur neuen Laufzeit.