前言
之前經常使用 execute_script() 方法執行 JavaScript 的來解決頁面上一些 selenium 無法操作的元素,但是一直無法獲取執行的返回值。
最近翻文檔,發現 execute_script 是可以拿到 JavaScript 執行后的返回值的
演示案例
以打開https://www.cnblogs.com/yoyoketang/網頁為示例,使用 JavaScript 來定位元素
目標元素元素屬性
<a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">
博客園</a>
我們可以在瀏覽器 Console 執行 JavaScript 獲取到元素的文本屬性值
document.getElementById("blog_nav_sitehome").innerText;
但是在代碼里面執行的時候,卻拿不到返回值
from selenium import webdriver
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
driver = webdriver.Chrome()
driver.get("https://www.cnblogs.com/yoyoketang/")
# 定位博客首頁 "博客園" 按鈕
# <a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客園</a>
js_blog = 'document.getElementById("blog_nav_sitehome").innerText;'
blog = driver.execute_script(js_blog)
print(blog)
運行后結果返回 None,之前一直沒找到解決辦法,最近翻文檔發現需在 JavaScript 腳本前面加 return 即可解決
return 返回值
在 JavaScript 腳本前面加 return 獲取返回值,修改后如下
from selenium import webdriver
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
driver = webdriver.Chrome()
driver.get("https://www.cnblogs.com/yoyoketang/")
# 定位博客首頁 "博客園" 按鈕
# <a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客園</a>
js_blog = 'return document.getElementById("blog_nav_sitehome").innerText;'
blog = driver.execute_script(js_blog)
print(blog)
再次執行就能得到結果:博客園
返回 JavaScript 元素對象
JavaScript 定位到的元素對象也能返回給 selenium, 拿到元素對象后也可以繼續操作
from selenium import webdriver
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
driver = webdriver.Chrome()
driver.get("https://www.cnblogs.com/yoyoketang/")
# 定位博客首頁 "博客園" 按鈕
# <a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客園</a>
js_blog = 'return document.getElementById("blog_nav_sitehome");'
blog = driver.execute_script(js_blog)
print(blog) # 返回元素對象
# 獲取元素屬性
t = blog.text
print(t)
# 獲取元素 href 屬性
link = blog.get_attribute("href")
print(link)
# 點擊元素
blog.click()
運行后結果:
<selenium.webdriver.remote.webelement.WebElement (session="a56f9aee265dd471eaa45655dfbfdbb9", element="39c918ab-1ca1-4e09-ba8d-a6979595a917")>
博客園
https://www.cnblogs.com/
jquery 使用
上面的 JavaScript 方法同樣適用於 jquery 定位元素和操作元素
from selenium import webdriver
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
driver = webdriver.Chrome()
driver.get("https://www.cnblogs.com/yoyoketang/")
# 定位博客首頁 "博客園" 按鈕
# <a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客園</a>
# js_blog = 'return document.getElementById("blog_nav_sitehome");'
# jquery 也適用
jq_blog = "return $('#blog_nav_sitehome')[0];"
blog = driver.execute_script(jq_blog)
print(blog) # 返回元素對象
# 獲取元素屬性
t = blog.text
print(t)
# 獲取元素 href 屬性
link = blog.get_attribute("href")
print(link)
# 點擊元素
blog.click()
運行后結果:
<selenium.webdriver.remote.webelement.WebElement (session="a56f9aee265dd471eaa45655dfbfdbb9", element="39c918ab-1ca1-4e09-ba8d-a6979595a917")>
博客園
https://www.cnblogs.com/
需要注意的是 jquery 並不是適用所有的 web 網頁,需頁面有加載 jquery 的 js 文件