前言

之前經常使用 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 檔案