在當(dāng)前窗口或框架上下文中，執(zhí)行 JavaScript 腳本。

使用JavaScript操作頁面：

• 解決點(diǎn)擊不生效的問題
• 頁面滾動
• 修改元素屬性

JavaScript

// 進(jìn)入瀏覽器 -> 檢查 -> console
// 獲取網(wǎng)頁名稱
document.title

// 顯示 alert
window.alert("hello selenium")

// 獲取網(wǎng)頁的性能數(shù)據(jù)
JSON.stringify(performance.timing)

Selenium 調(diào)用

def execute_script(self, script, *args):
    # script: JavaScript 代碼
   	# args: 任何適用于 JavaScript 的參數(shù)
    ...
    
# 示例：返回 h1 標(biāo)簽元素的文本
driver.get("https://www.selenium.dev/")
header = driver.find_element(By.CSS_SELECTOR, "h1")
# return: 返回 js 執(zhí)行結(jié)果
# arguments: 參數(shù)傳遞
text = driver.execute_script('return arguments[0].innerText', header)
assert text == "Selenium automates browsers. That's it!"

定位元素

js = 'return document.getElementById("su")'
driver.execute_script(js)

滑動

常見的滑動場景分為四種：文章來源地址http://www.zghlxwxcb.cn/news/detail-582260.html

• 滑動至底部
• 滑動至頂部
• 滑動至具體位置
• 滑動至目標(biāo)元素可見

# 模擬鼠標(biāo)滾輪，滑動頁面至底部
js = "window.scrollTo(0, document.body.scrollHeight)" 
driver.execute_script(js)

# 模擬鼠標(biāo)滾輪，滑動頁面至頂部
js = "window.scrollTo(0, 0)"
driver.execute_script(js)
js = "window.scrollBy(0, 500)"  # 向下滑動500個(gè)像素
js = "window.scrollBy(0, -500)"　# 向上滾動500個(gè)像素
js = "window.scrollBy(500, 0)"  # 向右滑動500個(gè)像素
js = "window.scrollBy(-500, 0)"　# 向左滾動500個(gè)像素

# 滑動到具體位置
driver.execute_script("window.scrollTo(x, y)")  

# 向下滾動至-元素可見
driver.execute_script("arguments[0].scrollIntoView();", element)
 
# 向上滾動至-元素可見
driver.execute_script("arguments[0].scrollIntoView(false);", element)

示例：操作控件 & 獲取返回值

# 場景：百度搜索結(jié)果頁，滑動到頁面底部，點(diǎn)擊下一頁

"""
1. 進(jìn)入搜索結(jié)果頁
"""
driver.get("http://www.baidu.com")
driver.find_element_by_id("kw").send_keys("selenium")
ele_search = driver.execute_script('return document.getElementById("su")')
ele_search.click()

"""
2. 通過 JavaScript 滑動到頁面底部
"""
js_code = "document.documentElement.scrollTop=10000"
driver.execute_script(js_code)
sleep(2)
driver.find_element_by_css_selector("#page a:nth-last-child(1)").click()

"""
3. 斷言頁面跳轉(zhuǎn)，打印頁面標(biāo)題和頁面性能數(shù)據(jù)
"""
# 方法一: 多條 js 腳本分別執(zhí)行
js_codes = [
    "return document.title",
    "return JSON.stringify(performance.timing)"
]
for code in js_codes:
    print(self.driver.execute_script(code))

# 方法二 合并執(zhí)行
# 注意，在 title 處已經(jīng)返回，后續(xù)不會執(zhí)行
js_code = "return document.title;return JSON.stringify(performance.timing)"
title = self.driver.execute_script(js_code)
assert title == "selenium_百度搜索"

# 會打印 timing ，因?yàn)?title 未返回
js_code = "document.title;return JSON.stringify(performance.timing)"
print(self.driver.execute_script(js_code))

示例：修改控件屬性

"""
時(shí)間控件屬性為 readonly
手動測試時(shí)：手動去選擇對應(yīng)的時(shí)間
自動化測試時(shí)：使用 js 修改控件屬性
	- 要取消日志的 readonly 屬性
	- 給 value 賦值

場景：12306 網(wǎng)站內(nèi)修改出發(fā)日期
"""

"""
1. 打開 12306
"""
driver.get("https://www.12306.cn/index/")

"""
2. 修改出發(fā)日期為 2021-5-12
"""
driver.execute_script(
    'train_date=document.getElementById("train_date");'
    'train_date.removeAttribute("readonly");'
    'train_date.value = "2021-05-12"'
)

"""
3. 打印出發(fā)日期
"""
print(driver.execute_script(
    'return document.getElementById("train_date").value')
)
driver.quit()

到了這里，關(guān)于【selenium】執(zhí)行js腳本的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！