JavaScript在Web自动化测试中的作用

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 : 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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/0360b3f8baa41cb4c94d8369aa15dfc3.html