执行JavaScript脚本

执行 javaScript 脚本

简介

JavaScript 是一种脚本语言，简称 js，有的场景需要使用 js 脚本注入辅助我们完成 Selenium 无法做到的事情。

当 webdriver 遇到无法完成的操作时，可以使用 JavaScript 来完成，webdriver 提供了 execute_script() 方法来调用 js 代码。

场景应用

执行 js 有两种场景：

在页面上直接执行 js。
在某个已经定位的元素上执行 js。

执行 js

Selenium 可以通过 execute_script() 来执行 JavaScript 脚本。

driver.execute_script：同步执行 JavaScript 在当前的窗口框架下。
js 脚本可以在浏览器的开发者工具 -> Console 中进行调试。

js 的返回结果

获取元素控件中的属性值，与 Selenium 结合，在代码中返回 js 结果。

Python 版本示例

# 获取网页性能的响应时间，js脚本中使用return代表返回获取的结果
js = "return JSON.stringify(performance.timing);"
driver.execute_script(js)

Java 版本示例

String js = "return JSON.stringify(performance.timing);"
((JavascriptExecutor)driver).executeScript(js);

arguments 传参

执行 JavaScript 也可以通过传参的方式传入元素信息，还可以通过下面的方法点击被遮挡的元素。

例如：某个元素在实际的操作过程中被其他的元素遮挡，就可以使用 js 点击的方式，以下代码演示。

Python 示例

element = driver.find_element(by, locator)
#arguments[0]代表所传值element的第一个参数
#click()代表js中的点击动作
driver.execute_script("arguments[0].click();",element)

Java 示例

JavascriptExecutor js =(JavascriptExecutor)driver;
WebElement train_date = driver.findElement(By.id("train_date"));
 js.executeScript("arguments[0].value='2024-12-20'", train_date);

自动化过程中的报错如下：

Other element would receive the click:
<label class="custom-control-label" for="user_remember_me">...</label>

如果出现上面的错误，可以使用 js 的方式进行点击。

JS 脚本实战演示

以企业微信为例，使用 js 点击添加图片。

python 示例

#导入依赖
from selenium import webdriver
from selenium.webdriver.common.by import By


class TestWework:
    def setup(self):
        self.driver = webdriver.Chrome()
        #隐式等待
        self.driver.implicitly_wait(10)

    def test_upload(self):
        #元素定位
        element_add = self.driver.find_element\
            (By.CSS_SELECTOR, ".js_upload_file_selector")
        #执行js代码
        self.driver.execute_script\
            ("arguments[0].click();", element_add)
        self.driver.find_element(By.ID,'js_upload_input').\
            send_keys('D:\project\demo1\demo.png')
        assert len(self.driver.find_elements(By.CSS_SELECTOR,\
            '.material_pic_list_item')) == 1

    def teardown(self):
        self.driver.quit()

Java 示例

import org.junit.jupiter.api.AfterAll;
import org.junit.jupiter.api.BeforeAll;
import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.edge.EdgeDriver;

import static io.netty.util.internal.SystemPropertyUtil.contains;
import static org.hamcrest.MatcherAssert.assertThat;

public class js_excuterTest {
    static WebDriver driver;
    @AfterAll
    static void teardown(){
        driver.quit();


    }
    @BeforeAll
    static void setup(){
        driver =new EdgeDriver();

    }

    @Test
    void js_2_1() throws InterruptedException {
        //打开12306网站
        driver.get("https://www.12306.cn/index/");
        //将driver引擎强转为js引擎来使用
        JavascriptExecutor js =(JavascriptExecutor)driver;
        Thread.sleep(1000);
        WebElement train_date = driver.findElement(By.id("train_date"));
        System.out.println("1");
        js.executeScript("arguments[0].value='2024-12-20'", train_date);
        System.out.println("2");
        //一般js脚本字符串都是遵循：定位元素，然后通过.运算符操作元素，现在使用selenium方式获取到元素直接给js脚本使用,通过JS脚本传回来的数据是对象，需要转化成字符串
        String o = (String) js.executeScript("return arguments[0].value", train_date);
        System.out.println("3");
        assertThat(o,contains("12-20"));


    }
}

总结

与 CSS，xpath 等专注于元素定位的方式不同，JS 虽然也有定位功能，但是其着力点在于对元素的直接操作，使其元素的属性得到修改。