Selenium執行JavaScript指令碼
阿新 • • 發佈：2020-12-31
JavaScript是執行在客戶端（瀏覽器）和伺服器端的指令碼語言，允許將靜態網頁轉換為互動式網頁。可以通過 Python Selenium WebDriver 執行 JavaScript 語句，在Web頁面中進行js互動。那麼js能做的事，Selenium應該大部分也能做。WebDriver是模擬終端使用者的互動，所以就不能點選不可見的元素，有時可見元素也不能點選。在這些情況下，我們就可以通過WebDriver 執行JavaScript來點選或者執行頁面元素。本文將介紹如何使用**WebDriver執行**JavaScript語句。
# Web元素定位及操作
使用execute_script() 執行 JavaScript 程式碼，有兩種方法實現元素操作
## 方法1：文件級別操作
直接使用JavaScript實現元素定位和動作執行，主要方法有：
```python
document.getElementById
document.getElementsByClassName
document.getElementsByName
document.getElementsByTagName
document.getElementsByTagNameNS
```
測試示例：
1. 開啟百度一下
2. 輸入框輸入”test“
3. 點選百度一下
python程式碼：
```python
def test_baidu(self):
self.driver.get("http://www.baidu.com")
self.driver.execute_script('document.getElementById("kw").value = "test"')
time.sleep(2)
self.driver.execute_script('document.getElementById("su").click()')
time.sleep(2)
```
在執行過程中，WebDriver 將 JavaScript 語句注入到瀏覽器中，然後指令碼將執行。這個注入 JavaScript 有自己的名稱空間，不會干擾實際網頁中的 JavaScript執行。
## 方法2：元素級別操作
可以先使用WebDriver獲取想要操作的元素，然後使用JavaScript執行操作。
```python
input_ele = driver.find_element_by_id("su")
driver.execute_script("arguments[0].click();", input_ele)
```
python程式碼：
```python
def test_baidu2(self):
self.driver.get("http://www.baidu.com")
input_ele = self.driver.find_element_by_id("kw")
self.driver.execute_script("arguments[0].value = 'test';", input_ele)
time.sleep(2)
baidu_ele = self.driver.find_element_by_id("su")
self.driver.execute_script("arguments[0].click();", baidu_ele)
time.sleep(2)
```
可以在語句中使用多個 JavaScript動作：
```python
username = driver.find_element_by_xpath("//*[@id='username']")
password = driver.find_element_by_xpath("//*[@id='password']")
driver.execute_script("arguments[0].value = 'admin';arguments[1].value = 'admin';", username, password)
```
# 獲取返回值
可以返回JavaScript的執行結果：
```python
driver.execute_script("return document.getElementById('kw').value")
driver.execute_script("return document.title;") # 返回網頁標題
```
# 滑動
在**Web自動化測試 | ActionChains、TouchAction** 中介紹了TouchAction類中scroll_from_element()也可以滑動頁面。
## 滑動到瀏覽器底部
```python
document.documentElement.scrollTop=10000
window.scrollTo(0, document.body.scrollHeight)
```
## 滑動到瀏覽器頂部
```python
document.documentElement.scrollTop=0
window.scrollTo(document.body.scrollHeight,0)
```
# 更改元素屬性
大部分時間控制元件都是 readonly屬性，需要手動去選擇對應的時間。自動化測試中，可以使用JavaScript程式碼取消readonly屬性。
測試頁面：https://www.12306.cn/index/
測試步驟：
1. 開啟測試頁面
2. 修改出發日期
3. 斷言日期是否修改成功
python測試程式碼：
```python
def test_datettime(self):
self.driver.get("https://www.12306.cn/index/")
# 取消readonly屬性
self.driver.execute_script("dat=document.getElementById('train_date'); dat.removeAttribute('readonly')")
self.driver.execute_script("document.getElementById('train_date').value='2020-10-01'")
time.sleep(3)
now_time = self.driver.execute_script("return document.getElementById('train_date').value")
assert '2020-10-01' == now_time
```
# 總結
Selenium WebDriver 執行 JavaScript程式碼是一個非常強大的功能，可以實現WebElement 介面所有功能，甚至更多的功能。比如在web效能測試中可以呼叫Web API介面window.performance來測試Web效能。
--THE END--
> 文章標題：Selenium執行JavaScript指令碼
> 本文作者：hiyo
> 本文連結：[https://hiyong.gitee.io/posts/selenium-javascript/](https://hiyong.gitee.io/posts/selenium-javascript/)
> 歡迎關注公眾號:「測試開發小記」及時接收最新技術文章！