1. 程式人生 > 其它 >035、javascript 操作元素 06、如何獲取 JavaScript的返回值,前面加 return

035、javascript 操作元素 06、如何獲取 JavaScript的返回值,前面加 return

參考學習大佬的資料:https://www.cnblogs.com/yoyoketang/p/14124336.html

演示案例

以開啟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;

return 返回值

在 JavaScript 指令碼前面加 return 獲取返回值,修改後如下:

# Environment: Python3.8.6 , Selenium3 環境 ( 3.141.0 版本)
# Environment: Chrome ( 92.0.4515.131, 正式版本) + chromedriver(92.0.4515.107版本)

from selenium import webdriver
import time

# 作者-上海悠悠 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) # 執行結果,在控制檯列印 部落格園
time.sleep(3) driver.quit()

再次執行就能得到結果:部落格園

返回 JavaScript 元素物件

JavaScript 定位到的元素物件也能返回給 selenium, 拿到元素物件後也可以繼續操作

from selenium import webdriver
import time

# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/

driver = webdriver.Chrome()
driver.get("https://www.cnblogs.com/yoyoketang/")
driver.maximize_window()
time.sleep(3)

# 定位部落格首頁 "部落格園" 按鈕
# <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()

time.sleep(3)
driver.quit()

執行後結果:

D:\SkyWorkSpace\WorkSpace\Web_AutoTest\Temp\day01\venv\Scripts\python.exe D:/SkyWorkSpace/WorkSpace/Web_AutoTest/Temp/day01/ch_003/ch_08.py
<selenium.webdriver.remote.webelement.WebElement (session="82be6bf8b0086c647e1c3b47a771ae9a", element="69a9d3b0-9ac9-4002-89b5-f65510b72121")>
部落格園
https://www.cnblogs.com/

Process finished with exit code 0

jquery 使用

上面的 JavaScript 方法同樣適用於 jquery 定位元素和操作元素

import time
from selenium import webdriver
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/

driver = webdriver.Chrome()
driver.get("https://www.cnblogs.com/yoyoketang/")
driver.maximize_window()
time.sleep(3)

# 定位部落格首頁 "部落格園" 按鈕
# <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()

time.sleep(3)
driver.quit()

執行後結果:

D:\SkyWorkSpace\WorkSpace\Web_AutoTest\Temp\day01\venv\Scripts\python.exe D:/SkyWorkSpace/WorkSpace/Web_AutoTest/Temp/day01/ch_003/ch_08.py
<selenium.webdriver.remote.webelement.WebElement (session="23168137889e98ac2234128f8df3126c", element="223acf18-ad9e-4c93-950c-53466c2cda36")>
部落格園
https://www.cnblogs.com/

Process finished with exit code 0

需要注意的是 jquery 並不是適用所有的 web 網頁,需頁面有載入 jquery 的 js 檔案