Selenium_使用execute_script执行JavaScript（11）

selenium的包含的方法已能完全满足UI自动化，但是有些时候又不得不用到执行JS的情况，比如在一个富文本框中输入1W个字，使用send_keys方法将经历漫长的输入过程，如果换成使用JS的innerHTML方法就能够很快的完成输入。

selenium执行JavaScript代码的方法有两种：

1. 执行原生的JS代码
2. 执行需格式化的JS代码

先简单写个html界面帮助演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea id="kw" cols="30" rows="10"></textarea>
    <input type="text" name="" id="kw1">
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="div">div标签</div>
    <button onclick="alt()" id="btn">按钮</button>
</body>
<script>
    function alt()
    {
        alert("我出来啦！！！");
    };
</script>
</html>

一、执行原生JS代码

这种方法是将所有操作全部交给js代码去实现，包括定位元素以及对元素的操作，因为原生JS定位元素有一定的局限性所以不是所有的元素都能使用该方法。

实现代码如下

from selenium import webdriver
import time

# 创建Chrome实例对象
driver = webdriver.Chrome()
# 打开浏览器并访问百度
driver.get("file:///C:/Users/41850/Desktop/test.html")
# 窗口最大化
driver.maximize_window()
time.sleep(2)

long_str = "超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超" \
             "长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长" \
             "内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容" \
             "超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长" \
             "内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内" \
             "容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容" \
             "超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超" \
             "长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长" \
             "内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内" \
             "容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容" \
             "超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容"

# 方法一：执行原生的JS代码
# 例1：向富文本插值
js = f"document.getElementById('kw').innerHTML='{long_str}';"
driver.execute_script(js)
time.sleep(1)

# 例2：向input框插值
js = f'document.getElementById("kw1").value="selenium"'
driver.execute_script(js)
time.sleep(1)

# 例3：滚动浏览器界面至指定元素
js = f"document.getElementById('div').scrollIntoView()"
driver.execute_script(js)
time.sleep(1)

# 例4：点击按钮
js = f'document.getElementById("btn").click()'
driver.execute_script(js)

# 关闭浏览器
# driver.quit()

二、先定位元素，再执行JS代码

第二种方法是先使用selenium定位元素，然后使用execute_script方法将传入的参数格式化成JS语句再执行，与第一种方法相比，更易用。

实现代码如下

from selenium import webdriver
import time

# 创建Chrome实例对象
driver = webdriver.Chrome()
# 打开浏览器并访问百度
driver.get("file:///C:/Users/41850/Desktop/test.html")
# 窗口最大化
driver.maximize_window()
time.sleep(2)

long_str = "超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超" \
             "长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长" \
             "内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容" \
             "超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长" \
             "内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内" \
             "容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容" \
             "超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超" \
             "长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长" \
             "内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内" \
             "容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容" \
             "超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容"

# 方法二：执行需格式化的JS代码
# 例1：向富文本插值
el = driver.find_element_by_id("kw")
js = f"arguments[0].innerHTML='{long_str}';"
driver.execute_script(js, el)
time.sleep(1)

# 例2：向input框插值
el = driver.find_element_by_id("kw1")
js = f'arguments[0].value="selenium"'
driver.execute_script(js, el)
time.sleep(1)

# 例3：滚动浏览器界面至指定元素
el = driver.find_element_by_id("div")

js = f"arguments[0].scrollIntoView()"
driver.execute_script(js, el)
time.sleep(1)

# 例4：点击按钮
el = driver.find_element_by_id("btn")
js = f'arguments[0].click()'
driver.execute_script(js, el)

# 关闭浏览器
# driver.quit()