JavaScript在web自動(dòng)化測(cè)試中的作用示例詳解

更新時(shí)間：2019年08月25日 10:12:11 作者：linux超

這篇文章主要給大家介紹了關(guān)于JavaScript在web自動(dòng)化測(cè)試中的作用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

JS的全稱JavaScript，是一種運(yùn)行在瀏覽器中的解釋型腳本語(yǔ)言，通常用來(lái)實(shí)現(xiàn)web前端頁(yè)面的基本功能，對(duì)于前端開(kāi)發(fā)人員是不得不掌握的一門基本技能，但是對(duì)于做web自動(dòng)化測(cè)試的人員來(lái)說(shuō)，如果為了實(shí)施自動(dòng)化測(cè)試專門研究JS的腳本語(yǔ)法不僅浪費(fèi)時(shí)間，也偏離了我們的工作重心，所以今天就給大家總結(jié)一下，在web自動(dòng)化測(cè)試中常用的一些JS腳本，只要掌握這些腳本的使用，無(wú)需再為專門學(xué)習(xí)js腳本而花費(fèi)太多時(shí)間，優(yōu)秀程序員的素質(zhì)是什么？有現(xiàn)成的直接用，絕不浪費(fèi)時(shí)間自己寫(xiě)！^_^ 開(kāi)玩笑的，俗話說(shuō)技多不壓身，多掌握一門技能，只有好處沒(méi)壞處。正文開(kāi)始！

窗口滾動(dòng)

用途：滑動(dòng)web頁(yè)面

def scrollTo(x, y):
 js = """
 window.scrollTo("{x}", "{y}")
 """.format(x=x, y=y)
 driver.execute_script(js)

參數(shù)說(shuō)明

x：屏幕向右移動(dòng)的距離

y：屏幕向下移動(dòng)的距離

移除屬性

用途：以下方法可以刪除元素的任何屬性，主要用來(lái)移除時(shí)間控件的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ù)說(shuō)明

css:：css表達(dá)式

index：索引值，默認(rèn)0，標(biāo)識(shí)第一個(gè)元素

attribute：元素的某個(gè)屬性，比如readonly，value，name等

高亮元素

用途：方便用戶查看當(dāng)前操作的是哪個(gè)頁(yè)面元素，也方便測(cè)試人員定位問(wèn)題

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ù)說(shuō)明

css：css表達(dá)式

index：索引值，默認(rèn)0，標(biāo)識(shí)第一個(gè)元素

點(diǎn)擊元素

用途：由于web自動(dòng)化的最大問(wèn)題就是穩(wěn)定性比較差，有些時(shí)候使用selenium無(wú)法點(diǎn)擊元素，因此我們可以使用JS實(shí)現(xiàn)元素的點(diǎ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ù)說(shuō)明

css：css表達(dá)式

index：索引值，默認(rèn)0，標(biāo)識(shí)第一個(gè)元素

清除輸入框內(nèi)容

用途：用來(lá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ù)說(shuō)明

css：css表達(dá)式

index：索引值，默認(rèn)0，標(biāo)識(shí)第一個(gè)元素

輸入內(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ù)說(shuō)明

css：css表達(dá)式

value：待輸入的數(shù)據(jù)

index：索引值，默認(rèn)0，標(biāo)識(shí)第一個(gè)元素

說(shuō)明

以上所有的JS操作，還可以結(jié)合selenium中的WebElement按照以下方式實(shí)現(xiàn)，因?yàn)镴S中查找元素的方法有限，比如xpath定位，在js中不存在

如滾動(dòng)頁(yè)面

def scrollTo(self, element, x, y):
 js = """
 arguments[0].scrollTo("{}", "{}")
 """.format(x, y)
 driver.execute_script(js, element)

參數(shù)說(shuō)明

element：通過(guò)selenium中的定位方法查找到的WebElement元素對(duì)象

arguments[0]：代表execute_script（）方法的第二個(gè)參數(shù)

測(cè)試代碼

我們簡(jiǎn)單的寫(xiě)個(gè)測(cè)試腳本來(lái)測(cè)試一下以上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):
  """
  點(diǎn)擊元素
  """
  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):
  """
  刪除某個(gè)元素的屬性，比如日期空間的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表達(dá)式，當(dāng)然你可以修改替換querySelectorAll方法為getElementById, getElementByClassName等，但是需要注意使用getElementById時(shí)，不需要index參數(shù)；

Js相對(duì)于selenium的控制頁(yè)面元素，執(zhí)行速度更快，而且當(dāng)遇到selenium比較難處理的操縱時(shí)，可以考慮使用js代碼來(lái)實(shí)現(xiàn)，當(dāng)然還是需要你懂點(diǎn)Js代碼，不懂也沒(méi)關(guān)系，掌握以上代碼完全夠你解決實(shí)際問(wèn)題

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: