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


Posted in Javascript onAugust 25, 2019

前言

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

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

执行效果及输出

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

总结

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

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

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
javascript object array方法使用详解
Dec 03 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
angularjs自定义过滤器demo示例
Aug 24 #Javascript
Jquery实现获取子元素的方法分析
Aug 24 #jQuery
微信小程序class封装http代码实例
Aug 24 #Javascript
微信小程序前端promise封装代码实例
Aug 24 #Javascript
node获取客户端ip功能简单示例
Aug 24 #Javascript
js针对图片加载失败的处理方法分析
Aug 24 #Javascript
js prototype和__proto__的关系是什么
Aug 23 #Javascript
You might like
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
python编程线性回归代码示例
2017/12/07 Python
python字符串的方法与操作大全
2018/01/30 Python
python 文件查找及内容匹配方法
2018/10/25 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Python实现word2Vec model过程解析
2019/12/16 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
4s客服专员岗位职责
2013/12/01 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
大学毕业自我评价
2014/02/02 职场文书
派出所所长先进事迹
2014/05/19 职场文书
工地标语大全
2014/06/18 职场文书
研究生导师推荐信
2015/03/25 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android