JavaScript在web自动化测试中的作用示例详解

前言

JS的全称JavaScript，是一种运行在浏览器中的解释型脚本语言，通常用来实现web前端页面的基本功能，对于前端开发人员是不得不掌握的一门基本技能，但是对于做web自动化测试的人员来说，如果为了实施自动化测试专门研究JS的脚本语法不仅浪费时间，也偏离了我们的工作重心，所以今天就给大家总结一下，在web自动化测试中常用的一些JS脚本，只要掌握这些脚本的使用，无需再为专门学习js脚本而花费太多时间，优秀程序员的素质是什么？有现成的直接用，绝不浪费时间自己写！^_^ 开玩笑的，俗话说技多不压身，多掌握一门技能，只有好处没坏处。正文开始！

窗口滚动

用途：滑动web页面

1 2 3 4 5

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

参数说明

x：屏幕向右移动的距离

y：屏幕向下移动的距离

移除属性

用途：以下方法可以删除元素的任何属性，主要用来移除时间控件的readonly属性

1 2 3 4 5 6

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等

高亮元素

用途：方便用户查看当前操作的是哪个页面元素，也方便测试人员定位问题

1 2 3 4 5 6

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实现元素的点击操作

1 2 3 4

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，标识第一个元素

清除输入框内容

用途：用来清除输入框的内容

1 2 3 4

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，标识第一个元素

输入内容

用途：输入框中输入内容

1 2 3 4

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中不存在

如滚动页面

1 2 3 4 5

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107

""" ------------------------------------ @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):   """   清除内容   """   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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82

""" ------------------------------------ @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()

执行效果及输出

总结

以上所有的操作仅支持CSS表达式， 当然你可以修改替换querySelectorAll方法为getElementById, getElementByClassName等，但是需要注意使用getElementById时，不需要index参数；

Js相对于selenium的控制页面元素，执行速度更快，而且当遇到selenium比较难处理的操纵时，可以考虑使用js代码来实现，当然还是需要你懂点Js代码，不懂也没关系，掌握以上代码完全够你解决实际问题

​现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：485187702【暗号：csdn11】

最后感谢每一个认真阅读我文章的人，看着粉丝一路的上涨和关注，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走！ 希望能帮助到你！【100%无套路免费领取】