51Testing软件测试论坛

标题: JavaScript有什么用?Web自动化有话说 [打印本页]

作者: lsekfe    时间: 2022-7-19 09:56
标题: JavaScript有什么用?Web自动化有话说
前言
  JS的全称JavaScript,是一种运行在浏览器中的解释型脚本语言,通常用来实现web前端页面的基本功能,对于前端开发人员是不得不掌握的一门基本技能,但是对于做web自动化测试的人员来说,如果为了实施自动化测试专门研究JS的脚本语法不仅浪费时间,也偏离了我们的工作重心,所以今天就给大家总结一下,在web自动化测试中常用的一些JS脚本,只要掌握这些脚本的使用,无需再为专门学习js脚本而花费太多时间,优秀程序员的素质是什么?有现成的直接用,绝不浪费时间自己写!^_^ 开玩笑的,俗话说技多不压身,多掌握一门技能,只有好处没坏处。正文开始!
  窗口滚动
  用途:滑动web页面
  1. <font size="3">def scrollTo(x, y):
  2.     js = """
  3.     window.scrollTo("{x}", "{y}")
  4.     """.format(x=x, y=y)
  5.     driver.execute_script(js)</font>
复制代码
 参数说明
  x:屏幕向右移动的距离
  y:屏幕向下移动的距离
  移除属性
  用途:以下方法可以删除元素的任何属性,主要用来移除时间控件的readonly属性。
  1. def remove_attribute(css, attribute, index=0):
  2.     js = """
  3.     var element = document.querySelectorAll("{css}")[{index}];
  4.         element.removeAttribute("{attr}");
  5.     """.format(css=css, index=index, attr=attribute)
  6.     driver.execute_script(js)
复制代码
参数说明
  css::css表达式
  index:索引值,默认0,标识第一个元素
  attribute:元素的某个属性,比如readonly,value,name等
  高亮元素
  用途:方便用户查看当前操作的是哪个页面元素,也方便测试人员定位问题。
  1. def height_light(css, index=0):
  2.     js = """
  3.     var element = document.querySelectorAll("{css}")[{index}];
  4.         element.style.border="2px solid red";
  5.     """.format(css=css, index=index)
  6.     driver.execute_script(js)
复制代码
参数说明
  css:css表达式
  index:索引值,默认0,标识第一个元素
  点击元素
  用途:由于web自动化的最大问题就是稳定性比较差,有些时候使用selenium无法点击元素,因此我们可以使用JS实现元素的点击操作。
  1. def click(css, index=0):
  2.     js = """var element = document.querySelectorAll("{css}")[{index}];
  3.                element.click();""".format(css=css, index=index)
  4.     driver.execute_script(js)
复制代码
参数说明
  css:css表达式
  index:索引值,默认0,标识第一个元素
  清除输入框内容
  用途:用来清除输入框的内容。
  1. def clear(css, index=0):
  2.     js = """var element = document.querySelectorAll("{css}")[{index}];
  3.                 element.value = "";""".format(css=css, index=index)
  4.     driver.execute_script(js)
复制代码
参数说明
  css:css表达式
  index:索引值,默认0,标识第一个元素
  输入内容
  用途:输入框中输入内容。
  1. def input(self, css, value, index=0):
  2.     js = """var element = document.querySelectorAll("{css}")[{index}];
  3.                 element.value = "{value}";""".format(css=css, index=index, value=value)
  4.     driver.execute_script(js)
复制代码
参数说明
  css:css表达式
  value:待输入的数据
  index:索引值,默认0,标识第一个元素
  说明
  以上所有的JS操作,还可以结合selenium中的WebElement按照以下方式实现,因为JS中查找元素的方法有限,比如xpath定位,在js中不存在。
  如滚动页面:
  1. def scrollTo(self, element, x, y):
  2.     js = """
  3.     arguments[0].scrollTo("{}", "{}")
  4.     """.format(x, y)
  5.     driver.execute_script(js, element)
复制代码
参数说明
  element:通过selenium中的定位方法查找到的WebElement元素对象
  arguments[0]:代表execute_script()方法的第二个参数
  测试代码
  我们简单的写个测试脚本来测试一下以上JS脚本是否能够顺利执行。
  js_element.py
  1. """
  2. ------------------------------------
  3. [url=home.php?mod=space&uid=3428]@time[/url] : 2019/8/23 19:00
  4. @Auth : linux超
  5. [url=home.php?mod=space&uid=273702]@file[/url] : js_element.py
  6. @IDE  : PyCharm
  7. @Motto: Real warriors,dare to face the bleak warning,dare to face the incisive error!
  8. [url=home.php?mod=space&uid=10310]@QQ[/url]   : 28174043@qq.com
  9. @GROUP: 878565760
  10. ------------------------------------
  11. """


  12. class CssElement(object):

  13.     driver = None

  14.     def __init__(self, css, index=None, describe=None):
  15.         self.css = css
  16.         if index is None:
  17.             self.index = 0
  18.         else:
  19.             self.index = index
  20.         self.desc = describe

  21.     def __get__(self, instance, owner):
  22.         if instance is None:
  23.             return None
  24.         global driver
  25.         driver = instance.driver
  26.         return self

  27.     def clear(self):
  28.         """
  29.         清除内容
  30.         """
  31.         js = """var elm = document.querySelectorAll("{css}")[{index}];
  32.                     elm.style.border="2px solid red";
  33.                     elm.value = "";""".format(css=self.css, index=self.index)
  34.         driver.execute_script(js)

  35.     def input(self, value):
  36.         """
  37.         输入内容
  38.         """
  39.         js = """var elm = document.querySelectorAll("{css}")[{index}];
  40.                     elm.style.border="2px solid red";
  41.                     elm.value = "{value}";""".format(css=self.css, index=self.index, value=value)
  42.         driver.execute_script(js)

  43.     def click(self):
  44.         """
  45.         点击元素
  46.         """
  47.         js = """var elm = document.querySelectorAll("{css}")[{index}];
  48.                    elm.style.border="2px solid red";
  49.                    elm.click();""".format(css=self.css, index=self.index)
  50.         driver.execute_script(js)

  51.     def remove_attribute(self, attribute):
  52.         """
  53.         删除某个元素的属性,比如日期空间的readonly属性
  54.         """
  55.         js = """
  56.         var elm = document.querySelectorAll("{css}")[{index}];
  57.             elm.removeAttribute("{attr}");
  58.         """.format(css=self.css, index=self.index, attr=attribute)
  59.         driver.execute_script(js)

  60.     @staticmethod
  61.     def remove_attr(element, attribute):
  62.         js = """
  63.         arguments[0].removeAttribute("{attr}");
  64.         """.format(attr=attribute)
  65.         driver.execute_script(js, element)

  66.     @staticmethod
  67.     def scrollTo(x, y):
  68.         js = """
  69.         window.scrollTo("{}", "{}")
  70.         """.format(x, y)
  71.         driver.execute_script(js)

  72.     @staticmethod
  73.     def window_scroll(element, x, y):
  74.         js = """
  75.         arguments[0].scrollTo("{}", "{}")
  76.         """.format(x, y)
  77.         driver.execute_script(js, element)

  78.     def height_light(self):
  79.         js = """
  80.         var element = document.querySelectorAll("{css}")[{index}];
  81.             element.style.border="2px solid red";
  82.         """.format(css=self.css, index=self.index)
  83.         driver.execute_script(js)

  84.     @staticmethod
  85.     def height_lig(element):
  86.         js = """
  87.         arguments[0].style.border="2px solid red";
  88.         """
  89.         driver.execute_script(js, element)


  90. if __name__ == '__main__':
  91.     pass
复制代码
用例
  test_js.py
  1. """
  2. ------------------------------------
  3. @Time : 2019/8/22 16:51
  4. @Auth : linux超
  5. @File : test_js.py
  6. @IDE  : PyCharm
  7. @Motto: Real warriors,dare to face the bleak warning,dare to face the incisive error!
  8. @QQ   : 28174043@qq.com
  9. @GROUP: 878565760
  10. ------------------------------------
  11. """
  12. import time
  13. from selenium.webdriver.remote.webdriver import WebDriver
  14. import unittest
  15. from selenium import webdriver

  16. from javascript.js_element import CssElement


  17. class Base(object):
  18.     window = CssElement

  19.     def __init__(self, driver: WebDriver):
  20.         self.driver = driver

  21.     def load_url(self, url):
  22.         return self.driver.get(url)


  23. class BaiDuPage(Base):
  24.     search_input = CssElement("#kw", describe="百度搜索框")
  25.     search_button = CssElement("#su", describe="百度按钮")

  26.     def search(self):
  27.         self.search_input.height_light()
  28.         self.search_input.clear()
  29.         time.sleep(2)  # 为了看到效果
  30.         self.search_input.input("linux超")
  31.         time.sleep(2)
  32.         self.search_button.height_light()
  33.         self.search_button.click()
  34.         time.sleep(2)
  35.         self.window.scrollTo("0", "500")
  36.         time.sleep(2)  # 为了看到效果


  37. class ChinaRailway(Base):
  38.     data_input = CssElement("#train_date", describe="日期控件")

  39.     def input_date(self, date):
  40.         self.data_input.height_light()
  41.         self.data_input.remove_attribute("readonly")
  42.         self.data_input.input(date)
  43.         time.sleep(2)  # 为了看到效果


  44. class TestJs(unittest.TestCase):

  45.     def setUp(self):
  46.         self.driver = webdriver.Firefox()
  47.         self.driver.maximize_window()
  48.         self.driver.implicitly_wait(20)
  49.         self.bai_du_page = BaiDuPage(self.driver)
  50.         self.china_railway = ChinaRailway(self.driver)

  51.     def test_search(self):
  52.         """百度搜索"""
  53.         self.bai_du_page.load_url("https://www.baidu.com")
  54.         self.bai_du_page.search()

  55.     def test_china_railway(self):
  56.         """12306日期"""
  57.         self.china_railway.load_url("https://www.12306.cn/index/")
  58.         time.sleep(5)  #
  59.         self.china_railway.input_date("2021-01-01")

  60.     def tearDown(self):
  61.         self.driver.quit()


  62. if __name__ == '__main__':
  63.     unittest.main()
复制代码
总结
  以上所有的操作仅支持CSS表达式, 当然你可以修改替换querySelectorAll方法为getElementById, getElementByClassName等,但是需要注意使用getElementById时,不需要index参数;
  Js相对于selenium的控制页面元素,执行速度更快,而且当遇到selenium比较难处理的操纵时,可以考虑使用js代码来实现,当然还是需要你懂点Js代码,不懂也没关系,掌握以上代码完全够你解决实际问题。














欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2