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定位元素

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

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

# 3、通過標簽名，獲取元素列表
document.getElementsByTagName('tag_name');

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

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

# 6、通過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操作元素操作

1、刪除屬性

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

2、獲取屬性

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

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

3、修改屬性值

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

這些具體的實例操作，等后面安靜會一點點的給大家補充

 

簡單的介紹了如何通過Python進行執行JS腳本幫我們執行一些selenium中無法操作的內容，在web自動化中JS語言主要起輔助工作，大多數的還是需要通過selenium，但是如果你學習了新的自動化框架Cypress的話，那么用JS腳本就會很多了。

 

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