JavaScript在web自動化測試中的作用示例詳解
更新時間：2019年08月25日 10:12:11 作者：linux超
這篇文章主要給大家介紹了關于JavaScript在web自動化測試中的作用的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
前言
JS的全稱JavaScript，是一種運行在瀏覽器中的解釋型腳本語言，通常用來實現(xiàn)web前端頁面的基本功能，對于前端開發(fā)人員是不得不掌握的一門基本技能，但是對于做web自動化測試的人員來說，如果為了實施自動化測試專門研究JS的腳本語法不僅浪費時間，也偏離了我們的工作重心，所以今天就給大家總結(jié)一下，在web自動化測試中常用的一些JS腳本，只要掌握這些腳本的使用，無需再為專門學習js腳本而花費太多時間，優(yōu)秀程序員的素質(zhì)是什么？有現(xiàn)成的直接用，絕不浪費時間自己寫！^_^ 開玩笑的，俗話說技多不壓身，多掌握一門技能，只有好處沒壞處。正文開始！
窗口滾動
用途：滑動web頁面
def scrollTo(x, y):
js = """
window.scrollTo("{x}", "{y}")
""".format(x=x, y=y)
driver.execute_script(js)
參數(shù)說明
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)
參數(shù)說明
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)
參數(shù)說明
css：css表達式
index：索引值，默認0，標識第一個元素
點擊元素
用途：由于web自動化的最大問題就是穩(wěn)定性比較差，有些時候使用selenium無法點擊元素，因此我們可以使用JS實現(xiàn)元素的點擊操作
def click(css, index=0):
js = """var element = document.querySelectorAll("{css}")[{index}];
element.click();""".format(css=css, index=index)
driver.execute_script(js)
參數(shù)說明
css：css表達式
index：索引值，默認0，標識第一個元素
清除輸入框內(nèi)容
用途：用來清除輸入框的內(nèi)容
def clear(css, index=0):
js = """var element = document.querySelectorAll("{css}")[{index}];
element.value = "";""".format(css=css, index=index)
driver.execute_script(js)
參數(shù)說明
css：css表達式
index：索引值，默認0，標識第一個元素
輸入內(nèi)容
用途：輸入框中輸入內(nèi)容
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)
參數(shù)說明
css：css表達式
value：待輸入的數(shù)據(jù)
index：索引值，默認0，標識第一個元素
說明
以上所有的JS操作，還可以結(jié)合selenium中的WebElement按照以下方式實現(xiàn)，因為JS中查找元素的方法有限，比如xpath定位，在js中不存在
如滾動頁面
def scrollTo(self, element, x, y):
js = """
arguments[0].scrollTo("{}", "{}")
""".format(x, y)
driver.execute_script(js, element)
參數(shù)說明
element：通過selenium中的定位方法查找到的WebElement元素對象
arguments[0]：代表execute_script（）方法的第二個參數(shù)
測試代碼
我們簡單的寫個測試腳本來測試一下以上JS腳本是否能夠順利執(zhí)行
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 : 28174043@qq.com
@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):
"""
清除內(nèi)容
"""
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):
"""
輸入內(nèi)容
"""
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 : 28174043@qq.com
@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()
執(zhí)行效果及輸出
總結(jié)
以上所有的操作僅支持CSS表達式， 當然你可以修改替換querySelectorAll方法為getElementById, getElementByClassName等，但是需要注意使用getElementById時，不需要index參數(shù)；
Js相對于selenium的控制頁面元素，執(zhí)行速度更快，而且當遇到selenium比較難處理的操縱時，可以考慮使用js代碼來實現(xiàn)，當然還是需要你懂點Js代碼，不懂也沒關系，掌握以上代碼完全夠你解決實際問題
好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。
相關文章
Javascript異步編程async實現(xiàn)過程詳解
這篇文章主要介紹了Javascript異步編程async實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了微信小程序開發(fā)的基本流程步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
今天系統(tǒng)的學了一下javascript的內(nèi)置對象。2011-08-08
IE事件對象（The Internet Explorer Event Object）
不同于DOM事件對象，基于Event Handler授權(quán)這種方式，IE事件對象可以用不同的方式進行訪問。當一個事件Handler通過DOM 0 級的方式被授權(quán)，則這個事件對象將作為window對象的屬性而存在2012-06-06
本篇文章主要介紹了JS實現(xiàn)頁面打?。ㄕw、局部），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了javascript去掉代碼里面的注釋的方法和具體代碼，有需要的小伙伴可以參考下。2015-07-07
在FIREBUG里如果一個對象同時擁有l(wèi)ength屬性和splice方法，就會被firebug顯示為數(shù)組的形式2011-11-11
下面小編就為大家?guī)硪黄狫avaScript必看小技巧(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
javascript實現(xiàn)點擊提交按鈕后顯示loading的方法
這篇文章主要介紹了javascript實現(xiàn)點擊提交按鈕后顯示loading的方法,涉及javascript動態(tài)設置頁面元素樣式的相關技巧,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了js實現(xiàn)的在本地預覽圖片功能,結(jié)合實例形式分析了JavaScript兼容移動web與IE瀏覽器的圖片預覽功能相關實現(xiàn)技巧,需要的朋友可以參考下2019-11-11