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 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
js实现随机抽奖
Mar 19 Javascript
vue与iframe之间的信息交互的实现
Apr 08 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 接口类与抽象类的实际作用
2009/11/26 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
任意位置显示html菜单
2007/02/01 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
2016/06/24 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
vue组件与复用详解
2018/04/08 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python中time包实例详解
2021/02/02 Python
Python实现区域填充的示例代码
2021/02/03 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
小学生新学期寄语
2014/01/19 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
三年级小学生评语
2014/04/22 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
超市理货员岗位职责
2014/07/04 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
离婚协议书范本
2015/01/26 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js