selenium3+python自動化9-JS增加、刪除、修改HTML元素屬性

一、前言

這節主要是總結JS代碼對HTML元素的增、刪、改內容。因為它可以幫助我們解決很多實際問題，比如：打開多個窗口的時候，之前講過用switch_to進行窗口之間的切換（selenium3+python自動化7-switch_to總結），但是切換比較麻煩。想要讓新打開的鏈接在一個窗口打開，就需要修改元素的target屬性才能解決。在測試的時候，會遇到有的日期輸入框無法直接輸入，需要點開日歷控件彈框，從日歷控件上點日期，這樣比較繁瑣，想要直接輸入日期，就要刪除元素中限制輸入的屬性（readonly），顯然JS在這方面就很厲害。

用JS添加刪除或者修改html元素的時候只是在瀏覽器解析的時候后將其刪除或添加，而源代碼是不會改變的，頁面中本來有什么元素還是會有的。

二、常見操作

#給id為nice的元素 增加 title屬性並賦值為“測試title”
js='document.getElementById("nice").setAttribute("title","測試title")'
#給id為nice的元素 刪除 title屬性
js='document.getElementById("nice").removeAttribute("title")'
#獲取id為nice的元素 title屬性的值
js='document.getElementById("nice").getAttribute("title")'
#修改id為nice的元素 title屬性的值
js='document.getELementById("nice").title="測試"'

JS除了用id定位外，還可以用class來定位元素，值得注意的是：js用class屬性定位，返回的是一個list對象,在使用的時候需要加上索引值，中間單詞是elements。例如：js='documen.getElementsByClassName("good")[0].setAttribute("title","測試title")' class為good的第一個元素增加title屬性並賦值為“測試title”

三、實際應用

1.修改元素屬性：以百度為例，點擊登錄頁面的立即注冊，頁面會打開一個新的窗口，原因是：“立即注冊”鏈接元素屬性target="_blank"導致。讓鏈接在一個窗口打開就要修改target屬性的值為空。

代碼如下：

from selenium import webdriver
from time import sleep
driver=webdriver.Chrome()
driver.maximize_window()
driver.get('https://www.baidu.com/')
driver.find_element_by_link_text("登錄").click()
sleep(1)
#定位“立即注冊”位置，修改target屬性值為空，讓新打開的鏈接顯示在同一個窗口
js='document.getElementsByClassName("pass-reglink pass-link")[0].target=""'
driver.execute_script(js)#執行js語句
driver.find_element_by_link_text("立即注冊").click()
sleep(3)
driver.quit()

2.去掉元素屬性：以12306的車票查詢界面為例，出發日期輸入框無法直接輸入時間，因為元素的屬性是readonly，需要先去掉屬性，才可以輸入。

 代碼如下：

from selenium import webdriver
from time import sleep
driver=webdriver.Chrome()
driver.maximize_window()
driver.get('https://www.12306.cn/index/')
sleep(2)
#js去掉屬性
js='document.getElementById("train_date").removeAttribute("readonly")'
driver.execute_script(js)
#方式一：通過send_keys()輸入值
# driver.find_element_by_id("train_date").clear()
# driver.find_element_by_id("train_date").send_keys('2020-08-20')
#方式二：js修改屬性的值
js='document.getElementById("train_date").value="2019-01-12"'
driver.execute_script(js)
sleep(2)
driver.quit()