Selenium 系列篇（四）：JS 篇
點(diǎn)擊上方“AirPython”，選擇“加為星標(biāo)”
第一時(shí)間關(guān)注 Python 技術(shù)干貨！
1. 為什么需要 JS
前面 3 篇文章講了 Selenium 的一些基本操作，利用這部分技能，大部分網(wǎng)站的自動(dòng)化都能順利完成。
但是，也有一些網(wǎng)站的網(wǎng)頁(yè)操作沒法利用 WebDriver API 來(lái)完成，也有一些功能即使利用 WebDriver API 實(shí)現(xiàn)了，兼容性也不強(qiáng)，經(jīng)常需要去維護(hù)這套腳本，比如：瀏覽器的位置滑動(dòng)、元素點(diǎn)擊失效、選擇日期等。
這時(shí)候，利用?JavaScript?直接操作網(wǎng)頁(yè)內(nèi)部元素，能夠輔助我們完成 Selenium 自動(dòng)化測(cè)試中不能覆蓋的功能。
2. 怎么使用
Selenium 提供了下面這個(gè)方法：
driver.execute_script(js_code)其中 js_code 是一段 JS 腳本，常見的 JS 腳本包含：設(shè)置元素屬性、移除屬性、設(shè)置元素值、設(shè)置窗口位置等
和 Selenium CSS Selector 類型，利用 JS 查找元素的方式包含下面這 6 種：
#?1、通過元素id屬性，獲取元素
document.getElementById('id');
#?2、通過元素name屬性，獲取元素
document.getElementsByName('name');
#?3、通過標(biāo)簽名，獲取元素列表
#?獲取的是一個(gè)列表
document.getElementsByTagName('tag_name');
#?4、通過類名，獲取元素列表
document.getElementsByClassName("class_name");
#?5、通過選擇器，獲取一個(gè)元素
document.querySelector("css?selector")
#?6、通過CSS選擇器，獲取元素列表
document.querySelectorAll("css?selector")
拿到元素之后，就可以操作元素屬性了，比如：
#?操作屬性值
#?設(shè)置元素某一個(gè)元素值
element.setAttribute('屬性名','屬性值')
#?設(shè)置元素值
element.value="element_value";
#?刪除屬性
element.removeAttribute('屬性名')
組合上面的 3 個(gè)操作，即可以通過 JS 改變一個(gè)網(wǎng)頁(yè)元素的值了。
#?待執(zhí)行的js語(yǔ)句
exec_js?=?'document.getElementById(element_id).value="element_value";'
#?執(zhí)行js語(yǔ)句改變?cè)氐闹?/span>
driver.execute_script(exec_js)
3. 常見操作
以打開 12306 網(wǎng)站，選擇一個(gè)出發(fā)日期為例。
首先，利用常規(guī)模式編寫一波自動(dòng)化，利用 WebDriver 找到元素，然后直接給元素設(shè)置一個(gè)日期值。
運(yùn)行后會(huì)直接報(bào)錯(cuò)，運(yùn)行日志會(huì)提示目標(biāo)元素存在一個(gè)不可以編輯的屬性 -?readonly
這時(shí)候通過 JS 方法可以很方便地去掉這個(gè)屬性，然后再加上對(duì)元素的屬性操作，就能正常的設(shè)置日期。
改寫后的代碼如下：
from?time?import?sleep
from?selenium?import?webdriver
driver?=?webdriver.Chrome()
driver.get('https://www.12306.cn/index/')
#?去除掉元素的屬性
exec_js?=?'document.getElementById("train_date").removeAttribute("readonly");'
driver.execute_script(exec_js)
#?輸入日期
element_train_date?=?driver.find_element_by_id("train_date")
element_train_date.clear()
element_train_date.send_keys("2012-12-12")
sleep(5)
driver.quit()當(dāng)然，除了去掉元素屬性外，也可以先利用 JS 查找元素的語(yǔ)法獲取目標(biāo)元素，然后直接對(duì)元素設(shè)置一個(gè)日期，也能滿足我們的需求。
#?找到元素，直接設(shè)置一個(gè)容器
exec_js?=?'document.getElementById("train_date").value="2012-12-12";'
#?執(zhí)行js代碼
driver.execute_script(exec_js)4. 其他
?Selenium 自動(dòng)化的很多操作都能轉(zhuǎn)換為 JS?語(yǔ)句，然后利用?execute_script() 也能完成相同的功能。
但是，實(shí)際使用自動(dòng)化的過程中，JS 只是作為一個(gè)補(bǔ)充，協(xié)助我們完成一些 WebDriver 沒法實(shí)現(xiàn)的功能。
???