Selenium 简明教程

Selenium WebDriver - JavaScript Executor

Selenium Webdriver 用于运行 JavaScript 命令以与页面浏览器中出现的元素通信。这是在 JavaScriptExecutor 接口的帮助下完成的。有时，Selenium Webdriver 中可用的定位器无法与页面上的元素交互，在这些情况下，我们可以借助 JavaScriptExecutor 方法。

Selenium Webdriver are used to run JavaScript commands to communicate with elements appearing within a browser on a page. This is done with the help of the JavaScriptExecutor interface. Sometimes, the locators available in Selenium Webdriver fail to interact with the elements on a page, in those scenarios we can take the help of the JavaScriptExecutor methods.

Basic Methods to Run JavaScript Commands

JavaScriptExecutor 接口中提供了多种方法。它们如下所示 −

There are multiple the methods available in JavaScriptExecutor interface. They are listed below −

executeScript Method

此方法用于在当前活动窗口或框架中执行 JavaScript。它是一个匿名函数，支持多种数据类型，如 WebElements、Long、String、Lists 和 Boolean。

This method is used to execute JavaScript in a window or frame currently active. It is an anonymous function, supports various data types like WebElements, Long, String, Lists, and Boolean.

executeAsyncScript Method

这是一种多线程方法，用于在当前活动的窗口或框架上执行各个 JavaScript 任务。它允许页面解析继续进行，优化性能并提供极佳的灵活性。此方法使异步 JavaScript 能够以最佳方式执行。

It is a multi-threaded approach to execute individual JavaScript tasks on window or frame in currently active. It allows page parsing to continue, optimizing performance and providing great flexibility. This method enables the asynchronous JavaScript to be executed in an optimal way.

Steps to Execute the JavaScript commands

使用 JavaScriptExecutor 接口用 Selenium Webdriver 执行 JavaScript 命令的步骤如下：

The steps to execute JavaScript commands along with Selenium Webdriver using the JavaScriptExecutor interface are listed below −

Step 1 − 导入 JavaScriptExecutor 的软件包。

Step 1 − Package import for JavaScriptExecutor.

Step 2 − 创建引用变量 JavaScriptExecutor 接口。

Step 2 − Creating a reference variable JavaScriptExecutor interface.

Step 3 − 调用 JavaScriptExecutor 方法。

Step 3 − Calling the JavaScriptExecutor methods.

Syntax

import org.openqa.selenium.JavascriptExecutor;
JavascriptExecutor j = (JavascriptExecutor) driver;
j.executeScript(script, args);

Example

让我们以以下页面为例，我们在其中用 URL 打开应用程序 − Selenium Automation Practice Form 。

Let us take an example of the below page, where we would open an application with a URL − Selenium Automation Practice Form.

然后，获取文本： Selenium - Automation Practice Form ，和域 www.tutorialspoint.com 。接下来，我们在 Name 标记旁边的输入框中输入文本 Selenium 。

Then, get the text: Selenium - Automation Practice Form, and domain as www.tutorialspoint.com. Next we would enter the text Selenium in the input box beside the Name label.

然后，我们单击 Login ，因此，我们导航到具有文本 Welcome, Login In 的新页面。然后，我们将刷新浏览器，然后分别获取文本、URL 和域 Welcome, Login In 、 Selenium Automation Practice Form 和 www.tutorialspoint.com 。

Then, we would click on the Login, because of that we navigate to a new page having the text Welcome, Login In. We would refresh the browser then and get the text, URL and domain as Welcome, Login In, Selenium Automation Practice Form and www.tutorialspoint.com respectively.

代码实现

Code Implementation

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class JavaScriptsExe {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 25 secs
      driver.manage().timeouts().implicitlyWait(25, TimeUnit.SECONDS);

      // Creating a reference variable JavaScriptExecutor interface.
      JavascriptExecutor j = (JavascriptExecutor) driver;

      // launching a URL
      j.executeScript("window.location = 'https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php'");

      // getting current URL
      String url =  j.executeScript("return document.URL;").toString();
      System.out.println("Get the current URL: " + url);

      //identify text
      WebElement t = driver.findElement(By.xpath("/html/body/div/header/div[2]/h1"));

      // get text
      String text = (String) j.executeScript("return arguments[0].innerText", t);
      System.out.println("Text is: " + text);

      // getting current domain
      String domain = j.executeScript("return document.domain;").toString();
      System.out.println("Get the current domain: " + domain);

      // enter text in input box
      WebElement e = driver.findElement(By.xpath("//*[@id='name']"));
      j.executeScript("arguments[0].value='Selenium';", e);

      // get text entered
      String text1 = (String) j.executeScript("return arguments[0].value", e);
      System.out.println("Entered text is: " + text1);

      // perform click
      WebElement b = driver.findElement(By.xpath("//*[@id='collapseTwo']/div/ul/li[2]/a"));
      j.executeScript("arguments[0].click();", b);

      //identify text
      WebElement w = driver.findElement(By.xpath("//*[@id='signInForm']/h1"));

      // get text after click
      String text2 = (String) j.executeScript("return arguments[0].innerText", w);
      System.out.println("Text found after clicking is: " + text2);

      // refresh browser
      j.executeScript("history.go(0)");

      // getting current URL after browser refresh
      String url1 =  j.executeScript("return document.URL;").toString();
      System.out.println("Get the current URL after browser refresh: " + url1);

      //identify text again after refresh
      WebElement y = driver.findElement(By.xpath("//*[@id='signInForm']/h1"));

      // get text after refresh
      String text3 = (String) j.executeScript("return arguments[0].innerText", y);
      System.out.println("Text found after refresh is: " + text3);

      // getting current domain after browser refresh
      String domain1 = j.executeScript("return document.domain;").toString();
      System.out.println("Get the current domain after browser refresh: " + domain1);

      // Quit browser
      driver.quit();
   }
}

Get the current URL:
 https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php
Text is: Selenium - Automation Practice Form
Get the current domain: www.tutorialspoint.com
Entered text is: Selenium
Text found after clicking is: Welcome, Login In
Get the current URL after browser refresh:
https://www.tutorialspoint.com/selenium/practice/login.php
Text found after refresh is: Welcome, Login In
Get the current domain after browser refresh:
www.tutorialspoint.com

Process finished with exit code 0

在上面的示例中，我们启动了一个 URL，并在控制台中获取了当前 URL 和消息 - Getting the current URL: Selenium Automation Practice Form

In the above example, we had launched a URL and obtained the current URL with the message in the console - Getting the current URL: Selenium Automation Practice Form

然后分别获取文本和域，控制台中显示的消息为 - Text is: Selenium - Automation Practice Form 和 Getting the current domain: www.tutorialspoint.com 。

Then retrieved the text and domain with the message in the console - Text is: Selenium - Automation Practice Form and Getting the current domain: www.tutorialspoint.com respectively.

接下来，我们在一个输入框中输入文本 Selenium，并获取其值，控制台中显示的消息为 - Entered text is: Selenium 。然后，我们单击登录链接，并在导航后获取文本，控制台中显示的消息为: Text found after clicking is: Welcome, Login In 。最后，我们刷新了页面，并获取了页面的当前 URL、文本和域，控制台中显示的消息为 - Get the current URL after browser refresh: Selenium Useful Resources

Next, we entered the text Selenium in an input box and retrieved its value with the message in the console - Entered text is: Selenium. Then, we clicked the Login link and got the text after navigation with the message in console: Text found after clicking is: Welcome, Login In. Finally, we had refreshed the page and obtained current URL, text and domain of the page with the messages in the console - Get the current URL after browser refresh: Selenium Useful Resources

*刷新后找到的文本为: 欢迎、登录，在浏览器刷新后获取当前域: * www.tutorialspoint.com 分别。

*Text found after refresh is: Welcome, Login In, and Get the current domain after browser refresh: * www.tutorialspoint.com respectively.

最后，收到了消息 Process finished with exit code 0 ，表示代码成功执行。

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

Example - Scroll Down With JavaScriptExecutor

现在让我们讨论如何使用 scrollTo 方法向下滚动到网页底部，并获取该页面底部出现的按钮 Login ，如下图所示。scrollTo 方法采用两个参数 - 水平和垂直顶点。

Let us now discuss how to perform a scroll down to the bottom of a web page with the help of scrollTo method and get the button Login appearing at that page bottom as shown in the below image. The scrollTo method takes two parameters - horizontal and vertical vertices.

代码实现

Code Implementation

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class PageDownsScroll {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 12 secs
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);

      //Opening the webpage where we will perform the scroll
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // JavascriptExecutor to scrolling to page bottom
      JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
      javascriptExecutor.executeScript("window.scrollBy(0,document.body.scrollHeight)");

      // access element at page bottom after scrolling
      WebElement w = driver.findElement(By.xpath("//*[@id='practiceForm']/div[11]/input"));

      System.out.println("Verify element presence after scroll down: " + w.isDisplayed());

      // quit the browser
      driver.quit();
   }
}

Output

Verify element presence after scroll down: true

要获取有关 Selenium Webdriver 滚动操作的更多信息，请参阅链接 Selenium Webdriver Scroll Operations 。

To get more information on Scrolling actions with Selenium Webdriver, please refer to the link Selenium Webdriver Scroll Operations.

Example - Create Alert with JavaScriptExecutor

让我们以以下页面为例，在其中我们将使用 JavaScriptExecutor 在网页上创建一个警报并获取文本 Tutorialspoint 。

Let us take an example of the below page where we would create an alert on a webpage using JavaScriptExecutor and obtain the text Tutorialspoint.

代码实现

Code Implementation

package org.example;

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.JavascriptExecutor;

public class JavaScriptAlert {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 20 secs
      driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

      // Creating a reference variable JavaScriptExecutor interface
      JavascriptExecutor j = (JavascriptExecutor) driver;

      //  create an Alert
      j.executeScript("alert('Tutorialspoint!!!');");

      // switch driver context to alert
      Alert alrt = driver.switchTo().alert();

      // Get alert text
      String s = alrt.getText();
      System.out.println("Alert text is: " + s);

      // Quit browser
      driver.quit();
   }
}

Output

Alert text is: Tutorialspoint!!!

在上面的示例中，我们创建了一个警报，并在控制台中获取了其文本，消息为 - Alert text is: Tutorialspoint!!!

In the above example, we had created an alert and obtained its text with the message in the console - Alert text is: Tutorialspoint!!!

Example - Select Checkbox with JavaScriptExecutor

让我们再以以下页面为例，在其中我们将使用 JavaScript Executor 选中复选框以选择 Main Level 2 选项 −

Let us take another example of the below page, where would check the checkbox to select the Main Level 2 option with the help of JavaScript Executor −

代码实现

Code Implementation

package org.example;

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.JavascriptExecutor;

public class JavaScriptHandlesCheckbox {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 20 secs
      driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

      // Creating a reference variable JavaScriptExecutor interface
      JavascriptExecutor j = (JavascriptExecutor) driver;

      // Opening the webpage where we will check checkbox
      driver.get("https://www.tutorialspoint.com/selenium/practice/check-box.php");

      // identify checkbox with xpath
      WebElement chkbox = driver.findElement(By.xpath("//*[@id='c_bs_2']"));

      // check the checkbox
      j.executeScript("document.getElementById('c_bs_2').checked=true;");

      // check if checkbox is selected
      System.out.println("Checkbox is selected: " + chkbox.isSelected());

      // Quitting browser
      driver.quit();
   }
}

Output

Checkbox is selected: true

在上面的示例中，我们选中复选框，并通过控制台中的消息验证是否选中了该复选框 - Checkbox is selected: true

In the above example, we had checked a checkbox and validated if it is checked with the message in the console - Checkbox is selected: true

Conclusion

至此，我们对 Selenium Webdriver JavaScript Executor 教程的全面讲解结束。我们从描述运行 JavaScript 命令的基本方法开始，步骤执行 JavaScript 命令，以及说明如何在 Selenium Webdriver 中处理 JavaScript Executor 的示例。这使你深入了解 Selenium Webdriver JavaScript Executor。明智的做法是不断练习你学到的内容并探索其他与 Selenium 相关的知识以加深你的理解并拓宽你的视野。

This concludes our comprehensive take on the tutorial on Selenium Webdriver JavaScript Executor. We’ve started with describing basic methods to run JavaScript commands, steps To execute the JavaScript commands, and examples to illustrate how to handle JavaScript Executor in Selenium Webdriver. This equips you with in-depth knowledge of the Selenium Webdriver JavaScript Executor. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.