selenium---經過JS語法操做頁面元素

　　作過web測試的小夥伴們都知道，web元素如今不少是JS寫的，那麼既然是JS寫的，能夠經過JS語言去操做頁面，來幫助咱們操做一些selenium不能覆蓋的功能。問題來了咱們可否經過JS來定位元素呢？問題又來了selenium中如何調用JS語法呢？

調用JS語法

調用JS語法須要用到selenium中的方法 execute_script() ，參數直接填寫JS語法。

源碼：

def execute_script(self, script, *args):
        """
        Synchronously Executes JavaScript in the current window/frame.

        :Args:
         - script: The JavaScript to execute.
         - \*args: Any applicable arguments for your JavaScript.

        :Usage:
            driver.execute_script('return document.title;')
        """
        converted_args = list(args)
        command = None
        if self.w3c:
            command = Command.W3C_EXECUTE_SCRIPT
        else:
            command = Command.EXECUTE_SCRIPT

        return self.execute(command, {
            'script': script,
            'args': converted_args})['value']

經過JS定位元素

在前面安靜提到了selenium中調用JS的語法，那麼如何經過JS定位元素呢？前面介紹了經過瀏覽器快速定位元素的方法，其實那就是經過JS語法進行查找元素，那直接經過上述方法調用語法，就能夠快速定位到元素內容。

JS定位元素

# 一、經過元素id屬性，獲取元素
document.getElementById('id');

# 二、經過元素name屬性，獲取元素列表
document.getElementsByName('name');

# 三、經過標籤名，獲取元素列表
document.getElementsByTagName('tag_name');

# 四、經過類名，獲取元素列表
document.getElementsByClassName("class_name");

# 五、經過選擇器，獲取一個元素
document.querySelector("css selector")

# 六、經過CSS選擇器，獲取元素列表
document.querySelectorAll("css selector")

上面是經過JS語法進行定位的元素信息，那麼有的小夥伴們問了。那你如何進行操做呢？那也有的小夥伴們說了，直接經過執行JS語法方法而後直接進行操做瀏覽器方法哈，固然這個方法是不行的，若是這樣操做會報錯的。那應該怎麼操做呢？別急，繼續往下看

經過JS進行瀏覽器操做

所謂的瀏覽器操做，無非就是點擊，輸入，或者清空，那麼咱們經過JS來操做的話，咱們能夠直接經過JS語法進行修改裏面的值來進行操做。這裏安靜也是經過百度爲例進行操做

from selenium import webdriver
import time
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
js1 = "document.getElementById('kw').value='測試-安靜博客園'"
driver.execute_script(js1)
time.sleep(2)
js2 = 'document.getElementById("su").click()'
driver.execute_script(js2)

這裏輸入的話直接經過value的值=XXXX，點擊的話直接在JS後.click()，

注意：JS除了用id定位外，還能夠用class來定位元素，值得注意的是：js用class屬性定位，返回的是一個list對象,在使用的時候須要加上索引值

JS修改元素屬性

web自動化主要是對頁面元素進行操做，有時候沒法定位或者找不到元素，咱們能夠經過JS進行修改元素屬性，而後在進行經過JS定位

# 修改元素屬性
document.getElementById("id").setAttribute("屬性名","屬性值")

萬事用百度，咱們拿百度來改個元素id吧。

from selenium import webdriver
import time
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
# 經過JS修改id屬性值
js1 = 'document.getElementById("kw").setAttribute("id","anjing")'
# 執行JS語言
driver.execute_script(js1)
time.sleep(1)
# 經過修改的id進行定位
driver.find_element_by_id('anjing').send_keys('測試-安靜 博客園')

其餘經過JS操做元素操做

一、刪除屬性

# 刪除屬性
document.getElementById("id").removeAttribute("屬性值")

二、獲取屬性

# 獲取元素屬性值
document.getElementById("id").getAttribute(屬性值)

# 若是想要獲取js返回的屬性值，須要js前加return
js2 = 'return  document.getElementById("anjing").getAttribute("name")'
x = driver.execute_script(js2)
print(x)

三、修改屬性值

# 修改屬性值
document.getELementById("id").屬性="屬性值"

這些具體的實例操做，等後面安靜會一點點的給你們補充

 

簡單的介紹瞭如何經過Python進行執行JS腳本幫咱們執行一些selenium中沒法操做的內容，在web自動化中JS語言主要起輔助工做，大多數的仍是須要經過selenium，可是若是你學習了新的自動化框架Cypress的話，那麼用JS腳本就會不少了。

 

安靜寫的文章若是對您有所幫助，點個關注，持續更新。不懂的或者寫錯的地方，能夠下方留言。