Wie man JavaScriptExecutor in Selenium verwendet

Selenium ist eine Open-Source-Suite von Tools und Bibliotheken, die es Ihnen ermöglicht, mit Browsern zu interagieren, um verschiedene Operationen wie das Senden von Text, das Klicken auf eine Schaltfläche, das Auswählen von Dropdowns usw. durchzuführen.

Es gibt jedoch Szenarien, in denen die tatsächlichen Selenium WebDriver-Befehle nicht wie erwartet funktionieren, da Selenium nicht direkt mit den WebElements interagieren kann. Hier kommt JavaScriptExecutor ins Spiel.

In diesem Blog diskutieren wir JavaScriptExecutor in Selenium und wie Sie mit praktischen Anwendungsfällen und Beispielen beginnen können.

Was ist JavaScriptExecutor in Selenium?

JavaScriptExecutor ist eine von Selenium bereitgestellte Schnittstelle, die beim Ausführen von JavaScript-Befehlen hilft. Diese Schnittstelle bietet Methoden zum Ausführen von JavaScript im ausgewählten Fenster oder der aktuellen Webseite. Es ist für alle von Selenium unterstützten Sprachbindungen verfügbar.

Der JavaScriptExecutor in Selenium kann direkt verwendet werden, indem das folgende Paket in den Automatisierungstestskripten importiert wird:

org.openqa.selenium.JavascriptExecutor

JavaScriptExecutor in Selenium bietet zwei Methoden zur Interaktion mit den WebElements:

• executeScript() – Diese Methode führt JavaScript im Kontext des aktuell ausgewählten Fensters oder Frames in Selenium aus. Das Skript wird als der Körper einer anonymen Funktion ausgeführt.
• executeAsyncScript() – Diese Methode führt einen asynchronen JavaScript-Schnipsel im Kontext des aktuell ausgewählten Fensters oder Rahmens in Selenium aus. Das Skript wird als Körper einer anonymen Funktion ausgeführt.

Hinweis: Der Hauptunterschied zwischen den Methoden executeScript() und executeAsyncScript() besteht darin, dass das mit executeAsyncScript() aufgerufene Skript das Ende der Ausführung mit der Funktion callback() signalisieren muss.

Aufrufe von Methoden mit executeAsyncScript() werden hauptsächlich verwendet, wenn im Browser unter Test eine Verzögerung erforderlich ist oder wenn Tests in einer AJAX-Anwendung synchronisiert werden müssen.

Warum JavaScriptExecutor in Selenium verwenden?

Es gibt Szenarien, in denen einige WebDriver-Befehle aufgrund verschiedener Gründe nicht wie erwartet funktionieren, wie folgt:

1. Selenium interagiert nicht direkt mit den WebElements
2. Ausführen von Aktionen wie Scrollen ins Sichtfeld, Klicken auf die WebElements, die hinter der Überlagerung versteckt sind, oder Setzen von Werten in schreibgeschützten Feldern
3. Ausführen browser-spezifischer Verhaltensweisen wie dynamische Änderung des DOM

In diesen Fällen greifen wir auf den JavaScriptExecutor in Selenium zurück.

Traditionell verwenden wir Selenium-Lokatoren wie ID, Name, CSS-Selektor, XPath usw., um ein WebElement zu lokalisieren. Wenn diese Lokatoren nicht funktionieren oder Sie mit einem kniffligen XPath umgehen, hilft in solchen Fällen JavaScriptExecutor, das gewünschte WebElement zu lokalisieren.

Es gibt Fälle, in denen die Methode click() nicht in allen Webbrowsern funktionieren kann oder die Websteuerelemente sich in verschiedenen Browsern unterschiedlich verhalten können. Um solche Situationen zu überwinden, sollte der JavaScriptExecutor verwendet werden, um einen Klick auszuführen.

Wie wir wissen, haben Browser eine JavaScript-Implementierung in sich und können JavaScript-Befehle verstehen. Daher ermöglicht uns das Verständnis des JavaScriptExecutors in Selenium, eine Vielzahl von Operationen effizienter durchzuführen.

Grundlagen des JavaScriptExecutors in Selenium

Ziel dieses Abschnitts ist es, eine grobe Vorstellung von den Implementierungsschritten des JavaScriptExecutors in Selenium zu geben. Für die Demonstration werden wir Java als bevorzugte Programmiersprache verwenden.

Werfen wir einen Blick auf die wesentlichen Schritte.

1. Importieren Sie das Paket, das mit JavaScriptExecutor verbunden ist:

import org.openqa.selenium.JavascriptExecutor;

2. Verwenden Sie JavaScriptExecutor, erstellen Sie eine Referenz für das Interface und weisen Sie es dem WebDriver-Instanz durch Typecasting zu:

JavascriptExecutor js = (JavascriptExecutor) driver;

3. Rufen Sie die Methoden executeAsyncScript() oder executeScript() auf. Zum Beispiel ist die Syntax für executeScript() wie folgt:

js.executeScript(java.lang.String script, java.lang.Object... args)

Demo: Verwendung von JavaScriptExecutor in Selenium

Bevor wir uns ansehen, wie man JavaScriptExecutor in Selenium verwendet, befolgen Sie bitte diese Voraussetzungen:

• Erstellen Sie ein neues Maven-Projekt mit der IntelliJ IDE
• Fügen Sie die neueste Selenium WebDriver-Abhängigkeit in die pom.xml hinzu
• Fügen Sie die neueste TestNG-Abhängigkeit in die pom.xml hinzu

Wir werden die Website des LambdaTest eCommerce Playground verwenden, um die Funktionsweise des JavaScriptExecutor in Selenium zu demonstrieren, indem wir die Tests im lokalen Chrome-Browser ausführen.

Test Szenario 1

Unser Ziel ist es, einen einfachen Code zu schreiben, um ein Beispiel unter Verwendung der Methode executeScript() für das folgende Test Szenario zu illustrieren.

1. Navigieren Sie zur Seite „Account Login“ der Website des LambdaTest eCommerce Playground.
2. Geben Sie gültige Anmeldeinformationen ein und klicken Sie auf die Schaltfläche „Login“, indem Sie das Feld mit einem roten Rand hervorheben.
3. Drucken Sie den Seitentitel und den Domainnamen.
4. Überprüfen Sie, dass der Seitenheader „My Account“ bei erfolgreicher Anmeldung angezeigt wird.

Implementierung

Erstellen Sie eine neue TestJavaScriptExecutor-Klasse zur Implementierung des Testszenarios. Wir würden zunächst zwei Methoden in dieser Testklasse erstellen, die es uns ermöglichen, die Selenium WebDriver-Sitzungen einzurichten und ordnungsgemäß zu beenden.

Lassen Sie uns den WebDriver auf Klassenebene deklarieren, da wir ihn in beiden Methoden benötigen, d.h. in der setup()-Methode, um die Treiber-Sitzung zu starten, und in der tearDown()-Methode, um die Sitzung ordnungsgemäß zu beenden.

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

    //...

}

Lassen Sie uns eine neue setup()-Methode erstellen, die eine Instanz der WebDriver-Klasse instanziiert und entsprechend die Konfiguration für die Ausführung der Tests im lokalen Chrome-Browser festlegt.

@BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

Diese Methode öffnet den Chrome-Browser, maximiert das Fenster und wendet auch eine implizite Wartezeit von 30 Sekunden an. Diese implizite Wartezeit ermöglicht es, dass alle Website-Inhalte erfolgreich geladen werden, bevor die Testausführung beginnt.

@AfterTest

    public void tearDown () {

        driver.quit ();

    }

Schließlich wird, wenn der Test ausgeführt wird, die tearDown()-Methode aufgerufen, die die RemoteWebDriver-Sitzung ordnungsgemäß schließt.

Lassen Sie uns jetzt eine testJavaScriptExecutorCommand() -Methode in derselben Testklasse hinzufügen, um das besprochene Testszenario zu implementieren.

@Test

    public void testJavaScriptExecutorCommand () {

        driver.get ("https://ecommerce-playground.lambdatest.io/index.php?route=account/login");

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        //....

      }

Der Code navigiert zur Anmeldeseite der LambdaTest eCommerce Playground-Website. Die nächste Zeile wandelt die WebDriver-Instanz in JavascriptExecutor um, sodass JavaScript-Befehle im Browser ausgeführt werden können.

WebElement emailAddressField = driver.findElement (By.id ("input-email"));

js.executeScript ("arguments[0].style.border='3px solid red'", emailAddressField);

emailAddressField.sendKeys ("[email protected]");

js.executeScript ("arguments[0].style.border='2px solid #ced4da'", emailAddressField);

Danach wird das emailAddressField mithilfe der id-Locatorstrategie lokalisiert. Anschließend wird der JavaScriptExecutor-Befehl verwendet, um den Rand des E-Mail-Feldes rot hervorzuheben.

WebElement passwordField = driver.findElement (By.id ("input-password"));

js.executeScript ("arguments[0].style.border='3px solid red'", passwordField);

passwordField.sendKeys ("Password123");

js.executeScript ("arguments[0].style.border='2px solid #ced4da'", passwordField);

Als Nächstes wird das Passwortfeld lokalisiert und mit einem roten Rahmen hervorgehoben. Diese Hervorhebung hilft dabei, zu erkennen, welche Schritte während der Ausführung des automatisierten Tests durchgeführt werden.

WebElement loginBtn = driver.findElement (By.cssSelector ("input.btn"));

js.executeScript ("arguments[0].style.border='3px solid red'", loginBtn);

js.executeScript ("arguments[0].click();", loginBtn);

Ebenso wird die Login-Schaltfläche mithilfe der CSS-Selektor-Strategie lokalisiert und ebenfalls hervorgehoben.

String titleText = js.executeScript ("return document.title;").toString ();

System.out.println ("Page Title is: " + titleText);

​

String domainName = js.executeScript ("return document.domain;").toString ();

System.out.println ("Domain is: " + domainName);

Der Seitentitel und der Domainname werden als Nächstes mit dem JavaScriptExecutor lokalisiert und in der Konsole ausgegeben.

String myAccountHeader = driver.findElement (By.cssSelector ("#content h2")).getText ();

assertEquals (myAccountHeader, "My Account");

Schließlich wird der Seitenkopf der Seite „Mein Konto“, die nach einem erfolgreichen Login angezeigt wird, lokalisiert und eine Überprüfung durchgeführt, um zu überprüfen, ob der Text „Mein Konto.“ angezeigt wird.

Hier ist der vollständige Code aus der Klasse TestJavaScriptExecutor:

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

​

    @BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

​

    @AfterTest

    public void tearDown () {

        driver.quit ();

    }

​

    @Test

    public void testJavaScriptExecutorCommand () {

        driver.get ("https://ecommerce-playground.lambdatest.io/index.php?route=account/login");

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        WebElement emailAddressField = driver.findElement (By.id ("input-email"));

        js.executeScript ("arguments[0].style.border='3px solid red'", emailAddressField);

        emailAddressField.sendKeys ("[email protected]");

        js.executeScript ("arguments[0].style.border='2px solid #ced4da'", emailAddressField);

​

        WebElement passwordField = driver.findElement (By.id ("input-password"));

        js.executeScript ("arguments[0].style.border='3px solid red'", passwordField);

        passwordField.sendKeys ("Password123");

        js.executeScript ("arguments[0].style.border='2px solid #ced4da'", passwordField);

​

        WebElement loginBtn = driver.findElement (By.cssSelector ("input.btn"));

        js.executeScript ("arguments[0].style.border='3px solid red'", loginBtn);

        js.executeScript ("arguments[0].click();", loginBtn);

​

        String titleText = js.executeScript ("return document.title;")

            .toString ();

        System.out.println ("Page Title is: " + titleText);

​

        String domainName = js.executeScript ("return document.domain;")

            .toString ();

        System.out.println ("Domain is: " + domainName);

​

        String myAccountHeader = driver.findElement (By.cssSelector ("#content h2"))

            .getText ();

        assertEquals (myAccountHeader, "My Account");

    }

Testausführung

Der folgende Screenshot aus der IntelliJ IDE zeigt, dass der Test erfolgreich ausgeführt wurde.

Test-Szenario 2

Unser Ziel ist es, einen einfachen Code zu schreiben, um ein Beispiel mit der Methode executeAsyncScript() anhand des folgenden Testszenarios zu veranschaulichen.

1. Navigieren Sie zur Website LambdaTest eCommerce Playground.
2. Scrollen Sie bis zum Ende der Startseite.
3. Überprüfen Sie, ob der Text „VOM BLOG“ im unteren Abschnitt der Seite angezeigt wird.

Implementierung:

Erstellen Sie eine neue Methode testExecuteAsyncScript() in der vorhandenen Textklasse TestJavaScriptExecutor.

@Test

    public void testExecuteAsyncScript() {

        driver.get("https://ecommerce-playground.lambdatest.io");

        JavascriptExecutor js = (JavascriptExecutor) driver;

        js.executeAsyncScript("var callback = arguments[arguments.length - 1];" + "window.scrollBy(0,document.body.scrollHeight); + callback()");

​

        String fromTheBlogText = driver.findElement(By.cssSelector("#entry_217991 > h3")).getText();

        assertEquals(fromTheBlogText, "FROM THE BLOG");

    }

Der Code wird zur Startseite der LambdaTest eCommerce Playground-Website navigieren. Als nächstes wird die Methode executeAsyncScript() des JavaScriptExecutor aufgerufen, in der die Aktion zum Scrollen des Fensters durchgeführt wird.

In der Methode executeAsyncScript() müssen die ausgeführten Skripte explizit signalisieren, dass sie durch Aufrufen der bereitgestellten Methode callback() beendet sind.

JavascriptExecutor js = (JavascriptExecutor) driver;

 js.executeAsyncScript("var callback = arguments[arguments.length - 1];" 

+ "window.scrollBy(0,document.body.scrollHeight); + callback()");

Nach dem Scrollen zum Ende des Fensters wird der Text „FROM THE BLOG“ gefunden und eine Überprüfung wird durchgeführt.

String fromTheBlogText = driver.findElement(By.cssSelector("#entry_217991 > h3")).getText();

 assertEquals(fromTheBlogText, "FROM THE BLOG");

Testausführung

Der folgende Screenshot zeigt, dass der Test erfolgreich durchgeführt wurde.

Befehle zur Verwendung von JavaScriptExecutor in Selenium

Lassen Sie uns einige Szenarien untersuchen, die wir mithilfe der JavaScriptExecutor-Schnittstelle für die Testautomatisierung mit Selenium behandeln könnten.

Um auf eine Schaltfläche zu klicken:

js.executeScript("document.getElementById('enter element id').click();");

//or

js.executeScript("arguments[0].click();", okButton);

Um Text in ein Textfeld einzugeben, ohne die Methode sendKeys() zu verwenden:

js.executeScript("document.getElementById(id').value='someValue';");

js.executeScript("document.getElementById('Email').value='SeleniumTesting.com';");

Um das Kontrollkästchen zu behandeln, indem der Wert als true oder false übergeben wird:

js.executeScript("document.getElementById('enter element id').checked=false;");

Um ein Warnungsfenster in Selenium WebDriver zu generieren:

js.executeScript("alert('Welcome To Selenium Testing');");

Um das Browserfenster mithilfe von JavaScript zu aktualisieren:

js.executeScript("history.go(0)");

Um den Innertext der gesamten Webseite in Selenium zu erhalten:

String innerText = js.executeScript(" return document.documentElement.innerText;").toString();

System.out.println(innerText);

Um den Titel der Webseite zu erhalten:

String titleText =  js.executeScript("return document.title;").toString();

System.out.println(titleText);

Um den Domainnamen zu erhalten:

String domainName=  js.executeScript("return document.domain;").toString();

System.out.println(domainName);

​

Um die URL einer Webseite zu erhalten:

String url=  js.executeScript("return document.URL;").toString();

System.out.println(url);

Um die Höhe und Breite einer Webseite zu erhalten:

js.executeScript(“return window.innerHeight;”).toString();

js.executeScript(“return window.innerWidth;”).toString();

Um mithilfe von JavaScript zu einer anderen Seite zu navigieren:

js.executeScript("window.location = 'https://www.google.com");

Um einen Bildlauf in einer Anwendung mithilfe von Selenium durchzuführen:

• Um die Seite um 500px vertikal zu scrollen:
  Java

   js.executeScript("window.scrollBy(0,500)");

• Um die Seite vertikal bis zum Ende zu scrollen:
  Java

  js.executeScript("window.scrollBy(0,document.body.scrollHeight)");

Hinzufügen eines Elements im Document Object Model (DOM):

js.executeScript("var btn=document.createElement('newButton');"

+ "document.body.appendChild(btn);");

​

Um das Shadow Root im DOM zu erhalten:

WebElement element = driver.findElement(By.id("shadowroot"));

js.executeScript("return arguments[0].shadowRoot", element);

Schlussfolgerung

Selenium verfügt über eine Schnittstelle namens JavaScriptExecutor, die verwendet wird, wenn WebDriver-Befehle nicht wie beabsichtigt funktionieren. Mit Hilfe von JavaScriptExecutor können wir WebDriver verwenden, um JavaScript-Code auf der Website auszuführen und uns so die Möglichkeit geben, eine Vielzahl von Aufgaben auf elegante und effektive Weise zu erledigen, die nur mit Java allein sonst unmöglich wären.

In diesem Blog haben wir erkundet, wie man JavaScriptExecutor in Selenium verwendet und seine verschiedenen Methoden. Darüber hinaus haben wir verschiedene Szenarien behandelt, um eine effektive Lösung mithilfe verschiedener Methoden und praktischer Beispiele zu finden.