Hoe JavaScriptExecutor te gebruiken in Selenium

Selenium is een open-source suite van tools en bibliotheken die je in staat stelt om te communiceren met browsers om verschillende bewerkingen uit te voeren zoals het verzenden van tekst, klikken op een knop, het selecteren van dropdowns, enzovoort.

Echter, er zijn scenario’s waar de daadwerkelijke Selenium WebDriver commando’s niet werken zoals verwacht, omdat Selenium niet rechtstreeks kan communiceren met de WebElements. Hier komt JavaScriptExecutor in beeld.

In deze blog bespreken we JavaScriptExecutor in Selenium en hoe je aan de slag kunt met praktische gebruikscases en voorbeelden.

Wat Is JavaScriptExecutor in Selenium?

JavaScriptExecutor is een interface die door Selenium wordt geleverd en helpt bij het uitvoeren van JavaScript-opdrachten. Deze interface biedt methoden om JavaScript uit te voeren op het geselecteerde venster of de huidige webpagina. Het is beschikbaar voor alle programmeertalen die worden ondersteund door Selenium.

De JavaScriptExecutor in Selenium kan direct worden gebruikt door het importeren van de volgende package in de automatiseringstestscripts:

org.openqa.selenium.JavascriptExecutor

JavaScriptExecutor in Selenium biedt twee methoden om te communiceren met de WebElements:

• executeScript() – Deze methode voert JavaScript uit in de context van het momenteel geselecteerde venster of frame in Selenium. Het script zal worden uitgevoerd als de body van een anonieme functie.
• executeAsyncScript() – Deze methode voert een asynchroon stukje JavaScript uit in de context van het momenteel geselecteerde venster of frame in Selenium. Het script zal worden uitgevoerd als de body van een anonieme functie.

Let op: Het belangrijkste verschil tussen de methoden executeScript() en executeAsyncScript() is dat het script dat wordt aangeroepen met behulp van executeAsyncScript() moet aangeven dat de uitvoering is voltooid met behulp van de functie callback().

Het aanroepen van methoden met executeAsyncScript() wordt voornamelijk gebruikt wanneer er een vertraging moet worden uitgevoerd in de browser onder test of wanneer tests gesynchroniseerd moeten worden binnen een AJAX-toepassing.

Waarom JavaScriptExecutor gebruiken in Selenium?

Er zijn scenario’s waarin sommige WebDriver-opdrachten niet werken zoals verwacht om verschillende redenen, zoals:

1. Selenium die niet rechtstreeks communiceert met de WebElements
2. Het uitvoeren van acties zoals scrollen naar weergave, klikken op de WebElements die verborgen zijn achter de overlay, of waarden instellen in de alleen-lezen velden
3. Het uitvoeren van browser-specifieke gedragingen zoals het dynamisch wijzigen van de DOM

In deze gevallen maken we gebruik van JavaScriptExecutor in Selenium.

Traditioneel gebruiken we Selenium locators zoals ID, Naam, CSS Selector, XPath, etc., om een WebElement te lokaliseren. Als deze locators niet werken, of als je te maken hebt met een lastige XPath, kan JavaScriptExecutor helpen om het gewenste WebElement te lokaliseren.

Er zijn gevallen waarin de click() methode mogelijk niet werkt op alle webbrowsers, of de web controls zich anders kunnen gedragen op verschillende browsers. Om dergelijke situaties te overwinnen, moet JavaScriptExecutor worden gebruikt om een klikactie uit te voeren.

Zoals bekend hebben browsers JavaScript-implementatie in zich en kunnen ze JavaScript-opdrachten begrijpen. Daarom stelt het begrijpen van JavaScriptExecutor in Selenium ons in staat om een reeks operaties efficiënter uit te voeren.

Basis van JavaScriptExecutor in Selenium

Het doel van dit gedeelte is om een hoog niveau idee te geven over de implementatiestappen van de JavaScriptExecutor in Selenium. Voor de demonstratie zullen we Java als de voorkeursprogrammeertaal gebruiken.

Laten we eens kijken naar de belangrijkste stappen.

1. Importeer het pakket dat geassocieerd is met JavaScriptExecutor:

import org.openqa.selenium.JavascriptExecutor;

2. Gebruik JavaScriptExecutor, maak een referentie voor de interface, en wijs deze toe aan de WebDriver-instantie door deze te type-casten:

JavascriptExecutor js = (JavascriptExecutor) driver;

3. Roep de executeAsyncScript() of executeScript() methodes aan. Bijvoorbeeld, de syntax voor executeScript() is hieronder gegeven:

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

Demo: Het gebruik van JavaScriptExecutor in Selenium

Voordat we kijken naar hoe JavaScriptExecutor in Selenium te gebruiken, volg deze vereisten:

• Maak een nieuw Maven-project met IntelliJ IDE
• Voeg de nieuwste Selenium WebDriver-afhankelijkheid toe in het pom.xml
• Voeg de nieuwste TestNG-afhankelijkheid toe in pom.xml

We zullen de LambdaTest eCommerce Playground website gebruiken om het gebruik van JavaScriptExecutor in Selenium te demonstreren door de tests uit te voeren op de lokale Chrome-browser.

Testscenario 1

Ons doel is om een eenvoudige code te schrijven om een voorbeeld te illustreren met behulp van de executeScript() methode met het volgende testscenario.

1. Navigeer naar de Account Login pagina van de LambdaTest eCommerce Playground-website.
2. Voer geldige aanmeldingsgegevens in en klik op de Login-knop door het veld te markeren met een rode rand.
3. Druk de paginatitel en domeinnaam af.
4. Controleer dat de paginakop “Mijn Account” wordt weergegeven bij een succesvolle aanmelding.

Implementatie

Maak een nieuwe TestJavaScriptExecutor klasse aan voor het implementeren van het testscenario. We zouden eerst twee methoden in deze testklasse maken die ons in staat stellen om de Selenium WebDriver-sessies op te zetten en op een nette manier af te sluiten.

Laten we de WebDriver op klasseniveau declareren aangezien we deze nodig zullen hebben in beide methoden, d.w.z. de setup() methode om de driversessie te starten en de tearDown() methode om de sessie op een nette manier af te sluiten.

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

    //...

}

Laten we een nieuwe setup() methode maken die een instantie van de WebDriver klasse zal instantiëren en dienovereenkomstig de configuratie zal instellen voor het uitvoeren van de tests op de lokale Chrome-browser.

@BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

Deze methode zal de Chrome-browser openen, het venster maximaliseren en ook een impliciete wachttijd van 30 seconden toepassen. Deze impliciete wachttijd zal ervoor zorgen dat alle website-inhoud succesvol geladen wordt voordat de testuitvoering begint.

@AfterTest

    public void tearDown () {

        driver.quit ();

    }

Tenslotte, wanneer de test wordt uitgevoerd, zal de tearDown() methode worden aangeroepen, die de RemoteWebDriver-sessie netjes zal sluiten.

Laten we nu een testJavaScriptExecutorCommand() methode toevoegen in dezelfde testklasse om het besproken testscenario te implementeren.

@Test

    public void testJavaScriptExecutorCommand () {

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

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        //....

      }

De code navigeert naar de inlogpagina van de LambdaTest eCommerce Playground website. De volgende regel cast de WebDriver-instantie naar JavascriptExecutor zodat JavaScript-commando’s kunnen worden uitgevoerd in de browser.

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);

Vervolgens lokaliseert het de emailAddressField met behulp van de id locator-strategie. Vervolgens gebruikt het het JavaScriptExecutor-commando om de rand van het e-mailadresveld in rode kleur te markeren.

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);

Vervolgens wordt het wachtwoordveld gelokaliseerd en gemarkeerd met een rode rand. Deze markering helpt bij het weten welke stappen worden uitgevoerd op het moment van de uitvoering van de automatiseringstest.

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

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

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

Op dezelfde manier wordt de knop ‘Inloggen’ gelokaliseerd met behulp van de CSS Selector-strategie en ook gemarkeerd.

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);

De paginatitel en domeinnaam worden vervolgens gelokaliseerd met behulp van de JavaScriptExecutor en afgedrukt op de console.

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

assertEquals (myAccountHeader, "My Account");

Tenslotte wordt de paginakoptekst van de Mijn Account pagina, die wordt weergegeven na een succesvolle login, gelokaliseerd en wordt een assertie uitgevoerd om te controleren of de tekst “Mijn Account” wordt weergegeven.

Hier is de volledige code van de 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");

    }

Test Uitvoering

De volgende schermafbeelding van de IntelliJ IDE toont aan dat de test succesvol is uitgevoerd.

Test Scenario 2

Ons doel is om een eenvoudige code te schrijven om een voorbeeld te illustreren met behulp van de methode executeAsyncScript() met het volgende testsenario.

1. Navigeer naar de LambdaTest eCommerce Playground website.
2. Scroll naar beneden op de startpagina.
3. Controleer dat de tekst “FROM THE BLOG” wordt weergegeven in het onderste gedeelte van de pagina.

Implementatie:

Maak een nieuwe testExecuteAsyncScript() methode aan in de bestaande klasse 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");

    }

De code zal naar de startpagina van de LambdaTest eCommerce Playground-website navigeren. Vervolgens wordt de executeAsyncScript()-methode van de JavaScriptExecutor aangeroepen, waarbij de actie wordt uitgevoerd om het venster te scrollen.

In de executeAsyncScript()-methode moeten de uitgevoerde scripts expliciet aangeven dat ze zijn voltooid door de meegeleverde callback()-methode aan te roepen.

JavascriptExecutor js = (JavascriptExecutor) driver;

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

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

Na het scrollen naar de onderkant van het venster wordt de tekst “FROM THE BLOG” gevonden, en er zal een assertie op worden uitgevoerd.

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

 assertEquals(fromTheBlogText, "FROM THE BLOG");

Testuitvoering

De volgende schermafbeelding toont aan dat de test succesvol is uitgevoerd.

Opdrachten voor het gebruik van JavaScriptExecutor in Selenium

Laten we enkele scenario’s bekijken die we kunnen afhandelen met behulp van de JavaScriptExecutor-interface voor Selenium-testautomatisering.

Om op een knop te klikken:

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

//or

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

Om tekst in een tekstvak in te voeren zonder de sendKeys() -methode te gebruiken:

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

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

Om de selectievakje te hanteren door de waarde als true of false door te geven:

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

Om een waarschuwingspop-upvenster te genereren in Selenium WebDriver:

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

Om het browser-venster te vernieuwen met behulp van JavaScript:

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

Om de innerlijke tekst van de gehele webpagina in Selenium te krijgen:

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

System.out.println(innerText);

Om de titel van de webpagina te krijgen:

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

System.out.println(titleText);

Om de domeinnaam te krijgen:

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

System.out.println(domainName);

​

Om de URL van een webpagina te krijgen:

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

System.out.println(url);

Om de hoogte en breedte van een webpagina te krijgen:

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

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

Om naar een andere pagina te navigeren met behulp van JavaScript:

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

Om een scroll uit te voeren in een applicatie met behulp van Selenium:

• Om de pagina verticaal te scrollen voor 500px:
  Java

   js.executeScript(“window.scrollBy(0,500)”);

• Om de pagina verticaal te scrollen tot het einde:
  Java

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

Het toevoegen van een element in het Document Object Model (DOM):

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

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

​

Om de shadow root in het DOM te krijgen:

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

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

Conclusie

Selenium heeft een interface genaamd JavaScriptExecutor die wordt gebruikt wanneer WebDriver-opdrachten niet werken zoals bedoeld. Met behulp van JavaScriptExecutor kunnen we WebDriver gebruiken om JavaScript-code op de website uit te voeren, waardoor we verschillende taken op een elegante en effectieve manier kunnen afhandelen die anders onmogelijk zouden zijn met alleen Java.

In deze blog hebben we verkend hoe je JavaScriptExecutor in Selenium kunt gebruiken en de verschillende methoden ervan. Verder hebben we verschillende scenario’s behandeld om een effectieve oplossing te bereiken met behulp van verschillende methoden, samen met praktische voorbeelden.