JavaScript在web自動化測試中的作用
阿新 • • 發佈：2019-08-24
前言
JS的全稱JavaScript，是一種執行在瀏覽器中的解釋型指令碼語言，通常用來實現web前端頁面的基本功能，對於前端開發人員是不得不掌握的一門基本技能，但是對於做web自動化測試的人員來說，如果為了實施自動化測試專門研究JS的指令碼語法不僅浪費時間，也偏離了我們的工作重心，所以今天就給大家總結一下，在web自動化測試中常用的一些JS指令碼，只要掌握這些指令碼的使用，無需再為專門學習js指令碼而花費太多時間，優秀程式設計師的素質是什麼？有現成的直接用，絕不浪費時間自己寫！^_^ 開玩笑的，俗話說技多不壓身，多掌握一門技能，只有好處沒壞處。正文開始！
視窗滾動
用途：滑動web頁面
def scrollTo(x, y):
js = """
window.scrollTo("{x}", "{y}")
""".format(x=x, y=y)
driver.execute_script(js)引數說明
x：螢幕向右移動的距離
y：螢幕向下移動的距離
移除屬性
用途：以下方法可以刪除元素的任何屬性，主要用來移除時間控制元件的readonly屬性
def remove_attribute(css, attribute, index=0):
js = """
var element = document.querySelectorAll("{css}")[{index}];
element.removeAttribute("{attr}");
""".format(css=css, index=index, attr=attribute)
driver.execute_script(js)引數說明
css:：css表示式
index：索引值，預設0，標識第一個元素
attribute：元素的某個屬性，比如readonly，value，name等
高亮元素
用途：方便使用者檢視當前操作的是哪個頁面元素，也方便測試人員定位問題
def height_light(css, index=0):
js = """
var element = document.querySelectorAll("{css}")[{index}];
element.style.border="2px solid red";
""".format(css=css, index=index)
driver.execute_script(js)引數說明
css：css表示式
index：索引值，預設0，標識第一個元素
點選元素
用途：由於web自動化的最大問題就是穩定性比較差，有些時候使用selenium無法點選元素，因此我們可以使用JS實現元素的點選操作
def click(css, index=0):
js = """var element = document.querySelectorAll("{css}")[{index}];
element.click();""".format(css=css, index=index)
driver.execute_script(js)
引數說明
css：css表示式
index：索引值，預設0，標識第一個元素
清除輸入框內容
用途：用來清除輸入框的內容
def clear(css, index=0):
js = """var element = document.querySelectorAll("{css}")[{index}];
element.value = "";""".format(css=css, index=index)
driver.execute_script(js)
引數說明
css：css表示式
index：索引值，預設0，標識第一個元素
輸入內容
用途：輸入框中輸入內容
def input(self, css, value, index=0):
js = """var element = document.querySelectorAll("{css}")[{index}];
element.value = "{value}";""".format(css=css, index=index, value=value)
driver.execute_script(js)
引數說明
css：css表示式
value：待輸入的資料
index：索引值，預設0，標識第一個元素
說明
以上所有的JS操作，還可以結合selenium中的WebElement按照以下方式實現，因為JS中查詢元素的方法有限，比如xpath定位，在js中不存在
如滾動頁面
def scrollTo(self, element, x, y):
js = """
arguments[0].scrollTo("{}", "{}")
""".format(x, y)
driver.execute_script(js, element)
引數說明
element：通過selenium中的定位方法查詢到的WebElement元素物件
arguments[0]：代表execute_script（）方法的第二個引數
測試程式碼
我們簡單的寫個測試指令碼來測試一下以上JS指令碼是否能夠順利執行
js_element.py
""" ------------------------------------ @Time : 2019/8/23 19:00 @Auth : linux超 @File : js_element.py @IDE : PyCharm @Motto: Real warriors,dare to face the bleak warning,dare to face the incisive error! @QQ : [email protected] @GROUP: 878565760 ------------------------------------ """ class CssElement(object): driver = None def __init__(self, css, index=None, describe=None): self.css = css if index is None: self.index = 0 else: self.index = index self.desc = describe def __get__(self, instance, owner): if instance is None: return None global driver driver = instance.driver return self def clear(self): """ 清除內容 """ js = """var elm = document.querySelectorAll("{css}")[{index}]; elm.style.border="2px solid red"; elm.value = "";""".format(css=self.css, index=self.index) driver.execute_script(js) def input(self, value): """ 輸入內容 """ js = """var elm = document.querySelectorAll("{css}")[{index}]; elm.style.border="2px solid red"; elm.value = "{value}";""".format(css=self.css, index=self.index, value=value) driver.execute_script(js) def click(self): """ 點選元素 """ js = """var elm = document.querySelectorAll("{css}")[{index}]; elm.style.border="2px solid red"; elm.click();""".format(css=self.css, index=self.index) driver.execute_script(js) def remove_attribute(self, attribute): """ 刪除某個元素的屬性，比如日期空間的readonly屬性 """ js = """ var elm = document.querySelectorAll("{css}")[{index}]; elm.removeAttribute("{attr}"); """.format(css=self.css, index=self.index, attr=attribute) driver.execute_script(js) @staticmethod def remove_attr(element, attribute): js = """ arguments[0].removeAttribute("{attr}"); """.format(attr=attribute) driver.execute_script(js, element) @staticmethod def scrollTo(x, y): js = """ window.scrollTo("{}", "{}") """.format(x, y) driver.execute_script(js) @staticmethod def window_scroll(element, x, y): js = """ arguments[0].scrollTo("{}", "{}") """.format(x, y) driver.execute_script(js, element) def height_light(self): js = """ var element = document.querySelectorAll("{css}")[{index}]; element.style.border="2px solid red"; """.format(css=self.css, index=self.index) driver.execute_script(js) @staticmethod def height_lig(element): js = """ arguments[0].style.border="2px solid red"; """ driver.execute_script(js, element) if __name__ == '__main__': pass
用例
test_js.py
""" ------------------------------------ @Time : 2019/8/22 16:51 @Auth : linux超 @File : test_js.py @IDE : PyCharm @Motto: Real warriors,dare to face the bleak warning,dare to face the incisive error! @QQ : [email protected] @GROUP: 878565760 ------------------------------------ """ import time from selenium.webdriver.remote.webdriver import WebDriver import unittest from selenium import webdriver from javascript.js_element import CssElement class Base(object): window = CssElement def __init__(self, driver: WebDriver): self.driver = driver def load_url(self, url): return self.driver.get(url) class BaiDuPage(Base): search_input = CssElement("#kw", describe="百度搜索框") search_button = CssElement("#su", describe="百度按鈕") def search(self): self.search_input.height_light() self.search_input.clear() time.sleep(2) # 為了看到效果 self.search_input.input("linux超") time.sleep(2) self.search_button.height_light() self.search_button.click() time.sleep(2) self.window.scrollTo("0", "500") time.sleep(2) # 為了看到效果 class ChinaRailway(Base): data_input = CssElement("#train_date", describe="日期控制元件") def input_date(self, date): self.data_input.height_light() self.data_input.remove_attribute("readonly") self.data_input.input(date) time.sleep(2) # 為了看到效果 class TestJs(unittest.TestCase): def setUp(self): self.driver = webdriver.Firefox() self.driver.maximize_window() self.driver.implicitly_wait(20) self.bai_du_page = BaiDuPage(self.driver) self.china_railway = ChinaRailway(self.driver) def test_search(self): """百度搜索""" self.bai_du_page.load_url("https://www.baidu.com") self.bai_du_page.search() def test_china_railway(self): """12306日期""" self.china_railway.load_url("https://www.12306.cn/index/") time.sleep(5) # self.china_railway.input_date("2021-01-01") def tearDown(self): self.driver.quit() if __name__ == '__main__': unittest.main()
執行效果及輸出
總結
以上所有的操作僅支援CSS表示式， 當然你可以修改替換querySelectorAll方法為getElementById, getElementByClassName等，但是需要注意使用getElementById時，不需要index引數；
Js相對於selenium的控制頁面元素，執行速度更快，而且當遇到selenium比較難處理的操縱時，可以考慮使用js程式碼來實現，當然還是需要你懂點Js程式碼，不懂也沒關係，掌握以上程式碼完全夠你解決實際