JS執行器在UI自動化測試中的應用

前言

在進行UI自動化過程會遇到滾動條下拉、隱藏元素定位、只讀屬性元素的編輯、富文本處理等，此時可以使用JS執行器簡化我們的一些處理操作。

具體應用

JS執行器的使用步驟：

1.先寫個JS腳本，如果需要獲取操作后的值，JS腳本前面需要加return

2.使用webdriver的execute_script()方法執行腳本；方法中傳遞2個參數或1個參數；傳遞2個參數時，分別傳入JS腳本、要操作的頁面元素；傳遞1個參數時，傳入JS腳本，對整個webdriver做操作。

3.操作通過JS執行器注入了JS腳本的頁面元素或webdriver對象

接下來我們以百度、12306網站為例，演繹具體用法

1.通過JS腳本，獲取頁面元素的屬性值

from selenium import webdriverdriver = webdriver.Chrome()#創建瀏覽器對象
driver.maximize_window()#窗口最大化driver.get(r'https://www.baidu.com')#訪問百度
el = driver.find_element('id','su') #頁面的百度一下元素
'''
寫JS腳本，寫JS腳本的步驟：
js:定義一個變量名js，用于存放所寫的JS季報表
= ：賦值
JS腳本全部用引號引起來，整個腳本就是一個字符串
arguments[0]:理解為占位符,代值被操作的元素或對象
.:連接被操作的元素對象與所做的具體操作
getAttribute():我們這里的舉例的操作為：獲取元素的某個屬性值
JS腳本最前面加上return，是因為我們要獲取對元素操作后的值
'''
js = "return arguments[0].getAttribute('value')" #JS腳本的意思為：返回某個元素的value屬性的值
value = driver.execute_script(js,el)#執行JS腳本，傳入的2個參數依次為：要執行的腳本、要操作的對象
print(value)#打印獲取到的值
driver.quit()#關閉瀏覽器

執行的結果：

2.通過JS腳本，獲取頁面元素的文本值

from selenium import webdriverdriver = webdriver.Chrome()#創建瀏覽器對象
driver.maximize_window()#窗口最大化driver.get(r'https://www.12306.cn/index/')#訪問12306#頁面的出發日期元素
el = driver.find_element('xpath','/html/body/div[3]/div[2]/div/div[1]/div/div[2]/div[1]/div[1]/div[2]/label') #
js = "return arguments[0].innerHTML" #JS腳本的意思為：返回某個元素的文本值
value = driver.execute_script(js,el)#執行JS腳本，傳入的2個參數依次為：要執行的腳本、要操作的對象
print(value)#打印獲取到的值
driver.quit()#關閉瀏覽器

?運行結果

3.通過JS腳本，刪除頁面元素的屬性值，然后對頁面元素進行操作

我們發現出發日期輸入框因為有readonly屬性，導致這個輸入框我們無法直接輸入日期，在實際的自動化操作中我們就只能通過點擊右邊的日歷控件，從而選擇日期，這樣操作就變得非常的復雜，現在我們通過執行JS腳本，刪除中個輸入框的readonly屬性，實現對這個輸入框直接輸入日期


from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()#創建瀏覽器對象
driver.maximize_window()#窗口最大化driver.get(r'https://www.12306.cn/index/')#訪問12306#頁面的出發日期輸入框
el = driver.find_element('xpath','//input[@id="train_date" and @class="input"]')
js = "arguments[0].removeAttribute('readonly')" #JS腳本的意思為：移除某個元素的readonly屬性
driver.execute_script(js,el)#執行JS腳本，傳入的2個參數依次為：要執行的腳本、要操作的對象
sleep(1)#強制等待1秒
el.clear() #清空輸入框內容
el.send_keys("2021-07-11")#對輸入框進行輸入操作
sleep(3)
driver.quit()#關閉瀏覽器

?執行結果

4.通過JS腳本，修改頁面元素的屬性值

from selenium import webdriver
from time import sleepdriver = webdriver.Chrome()#創建瀏覽器對象
driver.maximize_window()#窗口最大化driver.get(r'https://www.baidu.com')#訪問百度
el = driver.find_element('id','su') #頁面的百度一下元素js = "return arguments[0].setAttribute('value','AAAAA')" #JS腳本的意思為：返回某個元素的value屬性的值
driver.execute_script(js,el)#執行JS腳本，傳入的2個參數依次為：要執行的腳本、要操作的對象
sleep(10)
driver.quit()#關閉瀏覽器

?執行結果

5.執行JS腳本，進行滾動條操作

from selenium import webdriver
from time import sleepdriver = webdriver.Chrome()#創建瀏覽器對象
driver.maximize_window()#窗口最大化
driver.implicitly_wait(30)driver.get(r'https://www.baidu.com')#訪問百度
driver.find_element('id','kw').send_keys("它石科技")
driver.find_element('id','su').click()
sleep(3)
js = "document.documentElement.scrollTop=1000" #向下滾動
driver.execute_script(js)#執行JS腳本
sleep(3)
js1 = "document.documentElement.scrollTop=0" #先上滑動
driver.execute_script(js1)#執行JS腳本
sleep(3)
js2 = "window.scrollTo(100,200)" #左右滑動
driver.execute_script(js2)
sleep(3)
js3 = "arguments[0].scrollIntoView()"
el = driver.find_element('xpath','//span[text()="百度熱搜"]')
sleep(1)
driver.execute_script(js3,el)
sleep(3)
driver.quit()#關閉瀏覽器

執行結果：

由于是動態的圖，這里就不截圖了，大家可以按照代碼自己嘗試

總結：

selenium底層就方式通過執行JS腳本來操作頁面元素的，所以當我們使用普通封裝的常規操作方法無法進行相關操作時，可以使用JS執行器來達到我們的操作目的。

3.logging模塊的封裝處理

具體封裝好的log.py文件代碼如下：

import logging
import os
import time
class Logging():
def make_log_dir(self,dirname='logs'): #創建存放日志的目錄，并返回目錄的路徑
now_dir = os.path.dirname(__file__)
father_path = os.path.split(now_dir)[0]
path = os.path.join(father_path,dirname)
path = os.path.normpath(path)
if not os.path.exists(path):
os.mkdir(path)
return path
def get_log_filename(self):#創建日志文件的文件名格式，便于區分每天的日志
filename = "{}.log".format(time.strftime("%Y-%m-%d",time.localtime()))
filename = os.path.join(self.make_log_dir(),filename)
filename = os.path.normpath(filename)
return filename
def log(self):#生成日志的主方法
logger = logging.getLogger()
logger.setLevel(logging.INFO)
if not logger.handlers: #作用：防止日志重打
sh = logging.StreamHandler()
fh =
logging.FileHandler(filename=self.get_log_filename(),mode='a',encoding="utf-8")
fmt = logging.Formatter("%(asctime)s-%(levelname)s-%(filename)s-
Line:%(lineno)d-Message:%(message)s")
sh.setFormatter(fmt=fmt)
fh.setFormatter(fmt=fmt)
logger.addHandler(sh)
logger.addHandler(fh)
return logger
if __name__ == '__main__':
#Logging().log().debug("1111111111111111111111")
Logging().log().info("222222222222222222222222")
Logging().log().error("附件為IP飛機外婆家二分IP文件放")

selenium中的非input型上傳

我們在之前的文章中介紹了有四種方式可以實現，接下來我們展開說明一下實現

win32gui

廢話不多說，上代碼先：

示例網址:http://www.sahitest.com/demo/php/fileUpload.htm

# -*- coding: utf-8 -*-
from selenium import webdriver
import win32gui
import win32con
import timedr = webdriver.Firefox()
dr.get('http://sahitest.com/demo/php/fileUpload.htm')
upload = dr.find_element_by_id('file')
upload.click()
time.sleep(1)# win32gui
dialog = win32gui.FindWindow('#32770', u'文件上傳')  # 對話框
ComboBoxEx32 = win32gui.FindWindowEx(dialog, 0, 'ComboBoxEx32', None) 
ComboBox = win32gui.FindWindowEx(ComboBoxEx32, 0, 'ComboBox', None)
Edit = win32gui.FindWindowEx(ComboBox, 0, 'Edit', None)  # 上面三句依次尋找對象，直到找到輸入框Edit對象的句柄
button = win32gui.FindWindowEx(dialog, 0, 'Button', None)  # 確定按鈕Buttonwin32gui.SendMessage(Edit, win32con.WM_SETTEXT, None, 'd:\\baidu.py')  # 往輸入框輸入絕對地址
win32gui.SendMessage(dialog, win32con.WM_COMMAND, 1, button)  # 按buttonprint upload.get_attribute('value')
dr.quit()

結果：

baidu.py

在這里你需要一個非常重要的小工具：Spy++，百度一下有很多，當然你也可以用autoIT自帶的工具，不過沒有這個好用，建議去下一個吧。

而且，你得安裝pywin32的庫，你可以到這里找到對應你Python版本的庫，注意32位還是64位一定要和你安裝的Python版本對應。

安裝完成之后在【開始菜單Python的文件夾】里看到PyWin32的文檔【Python for?GitCode - 全球開發者的開源社區,開源代碼托管平臺 Documentation】，你能從中找到對應的方法API。

簡單介紹幾個用到的：

win32gui.FindWindow(lpClassName=None, lpWindowName=None):

自頂層窗口開始尋找匹配條件的窗口，并返回這個窗口的句柄。
lpClassName：類名，在Spy++里能夠看到
lpWindowName：窗口名，標題欄上能看到的名字
代碼示例里我們用來尋找上傳窗口，你可以只用其中的一個，用classname定位容易被其他東西干擾，用windowname定位不穩定，不同的上傳對話框可能window_name不同，怎么定位取決于你的情況。
win32gui.FindWindowEx(hwndParent=0, hwndChildAfter=0, lpszClass=None, lpszWindow=None)

搜索類名和窗體名匹配的窗體，并返回這個窗體的句柄。找不到就返回0。
hwndParent：若不為0，則搜索句柄為hwndParent窗體的子窗體。
hwndChildAfter：若不為0，則按照z-index的順序從hwndChildAfter向后開始搜索子窗體，否則從第一個子窗體開始搜索。
lpClassName：字符型，是窗體的類名，這個可以在Spy++里找到。
lpWindowName：字符型，是窗口名，也就是標題欄上你能看見的那個標題。
代碼示例里我們用來層層尋找輸入框和尋找確定按鈕
win32gui.SendMessage(hWnd, Msg, wParam, lParam)

hWnd：整型，接收消息的窗體句柄
Msg：整型，要發送的消息，這些消息都是windows預先定義好的，可以參見系統定義消息（System-Defined Messages）
wParam：整型，消息的wParam參數
lParam：整型，消息的lParam參數
代碼示例里我們用來向輸入框輸入文件地址以及點擊確定按鈕
至于win32api模塊以及其他的方法，這里不進行更多描述，想要了解的自行百度或看pywin32文檔。

SendKeys

首先要安裝SendKeys庫，可以用pip安裝

pip install SendKeys

代碼示例：

示例網址:http://www.sahitest.com/demo/php/fileUpload.htm

# -*- coding: utf-8 -*-
from selenium import webdriver
import win32gui
import win32con
import timedr = webdriver.Firefox()
dr.get('http://sahitest.com/demo/php/fileUpload.htm')
upload = dr.find_element_by_id('file')
upload.click()
time.sleep(1)# SendKeys
SendKeys.SendKeys('D:\\baidu.py')  # 發送文件地址
SendKeys.SendKeys("{ENTER}") # 發送回車鍵print upload.get_attribute('value')
dr.quit()

結果：

baidu.py
1
通過SendKeys庫可以直接向焦點里輸入信息，不過要注意在打開窗口是略微加一點等待時間，否則容易第一個字母send不進去（或者你可以在地址之前加一個無用字符），不過我覺得這種方法很不穩定，不推薦。

keybd_event

win32api提供了一個keybd_event()方法模擬按鍵，不過此方法比較麻煩，也不穩定，所以很不推薦，下面給出部分代碼示例，如果想要研究，可以自己研究研究

...# 先找一個input框，輸入想要上傳的文件的地址，剪切到剪貼板 
video.send_keys('C:\\Users\\Administrator\\Pictures\\04b20919fc78baf41fc993fd8ee2c5c9.jpg')
video.send_keys(Keys.CONTROL, 'a')  # selenium的send_keys（ctrl+a）
video.send_keys(Keys.CONTROL, 'x')  # (ctrl+x)
driver.find_element_by_id('uploadImage').click()  # 點擊上傳按鈕，打開上傳框# 粘貼（ctrl + v）
win32api.keybd_event(17, 0, 0, 0)  # 按下按鍵 ctrl
win32api.keybd_event(86, 0, 0, 0)  # 按下按鍵 v
win32api.keybd_event(86, 0, win32con.KEYEVENTF_KEYUP, 0)  # 升起按鍵 v
win32api.keybd_event(17, 0, win32con.KEYEVENTF_KEYUP, 0)  # 升起按鍵 ctrl
time.sleep(1)# 回車（enter）
win32api.keybd_event(13, 0, 0, 0)  # 按下按鍵 enter
win32api.keybd_event(13, 0, win32con.KEYEVENTF_KEYUP, 0)  # 升起按鍵 enter...

是不是很麻煩，當然，你甚至可以用按鍵把整個路徑輸入進去，不過，我想沒人愿意這么做的。而且在此過程中你不能隨意移動鼠標，不能使用剪貼板，太不穩定了，所以非常不建議你用這種辦法。

多文件上傳
接下來還有一種情況值得我們考慮，那就是多文件上傳。如何上傳多個文件，當然我們還是往輸入框里輸入文件路徑，所以唯一要搞清楚的就是多文件上傳時，文件路徑是怎么寫的。

我來告訴你吧，多文件上傳就是在文件路徑框里用引號括起單個路徑，然后用逗號隔開多個路徑，就是這么簡單，例如：
“D:\a.txt” “D:\b.txt”
但需要注意的是：只有多個文件在同一路徑下，才能這樣用，否則是會失敗的（下面的寫法是不可以的）：
“C:\a.txt” “D:\b.txt”

接下里找一個例子試試：

# -*- coding: utf-8 -*-from selenium import webdriver
import win32gui
import win32con
import timedr = webdriver.Firefox()
dr.get('http://www.sucaijiayuan.com/api/demo.php?url=/demo/20150128-1')dr.switch_to.frame('iframe')  # 一定要注意frame
dr.find_element_by_class_name('filePicker').click()
time.sleep(1)dialog = win32gui.FindWindow('#32770', None)
ComboBoxEx32 = win32gui.FindWindowEx(dialog, 0, 'ComboBoxEx32', None)
ComboBox = win32gui.FindWindowEx(ComboBoxEx32, 0, 'ComboBox', None)
Edit = win32gui.FindWindowEx(ComboBox, 0, 'Edit', None)
button = win32gui.FindWindowEx(dialog, 0, 'Button', None)# 跟上面示例的代碼是一樣的，只是這里傳入的參數不同，如果愿意可以寫一個上傳函數把上傳功能封裝起來
win32gui.SendMessage(Edit, win32con.WM_SETTEXT, 0, '"d:\\baidu.py" "d:\\upload.py" "d:\\1.html"')
win32gui.SendMessage(dialog, win32con.WM_COMMAND, 1, button)print dr.find_element_by_id('status_info').text
dr.quit()

結果：

選中3張文件，共1.17KB。
可見，多文件上傳并沒有那么復雜，也很簡單，唯一的區別就是輸入的參數不同而已。autoIT也可以實現，有興趣可以自己試試。

而且我們可以發現一點，就是上面的這個窗口的代碼跟之前示例中的基本是一樣，說明我們可以把上傳的部分抽出來，寫一個函數，這樣每次要上傳，直接去調用函數，傳入參數即可。