做過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指令碼就會很多了。

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