前言

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("", "")
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代码,不懂也没关系,掌握以上代码完全够你解决实际问题

JavaScript在web自动化测试中的作用的更多相关文章

  1. web自动化测试中绕开验证码登陆的方式

    web自动化测试中登陆需验证码是很大的一个困扰.现推荐一种简单的避开验证码登陆的方式,先代码进入登录页,人工输入验证码登录后浏览器自动保存cookie,再在新的标签中登录. 具体代码如下: publi ...

  2. python web自动化测试中失败截图方法汇总

    在使用web自动化测试中,用例失败则自动截图的网上也有,但实际能落地的却没看到,现总结在在实际应用中失败截图的几种方法: 一.使用unittest框架截图方法:   1.在tearDown中写入截图的 ...

  3. web自动化测试中接口测试学习笔记

    一.web基础 web是实现:客户端浏览器端<—————>服务端  交互的应用: web通常包含两部分:web客户端.web服务端:web客户端技术包含html.javascript.aj ...

  4. (转)Web自动化测试中的接口测试

    1.背景 1.1 Web程序中的接口 1.1.1 典型的Web设计架构 web是实现了基于网络通信的浏览器客户端与远程服务器进行交互的应用,通常包括两部分:web服务器和web客户端.web客户端的应 ...

  5. Web自动化测试中的接口测试

    1.2.3 接口可测性分析 接口显而易见要比UI简单的都,只需要知道协议和参数即可完成一次请求,从自动化测试实施难易程度来看,有以下几个特征: 1)驱动执行接口的自动化成本不高:HTTP,RPC,SO ...

  6. TestNG测试框架在基于Selenium进行的web自动化测试中的应用

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ TestNG+Selenium+Ant TestNG这个测试框架可以很好的和基于Selenium的 ...

  7. web自动化测试中的PO模式(一)

    1.PO模式的思想 原理: 将页面的元素定位和元素行为封装成一个page类 类的属性:元素的定位 类的行为:元素的操作 页面对象和测试用例分离 测试用例: 调用所需要页面对象中的行为,组成测试用例 测 ...

  8. web.xml中listener作用及使用

    一.WebContextLoaderListener 监听类 它能捕捉到server的启动和停止,在启动和停止触发里面的方法做对应的操作! 它必须在web.xml 中配置才干使用,是配置监听类的 二. ...

  9. 〇——HTML的本质以及在Web程序中的作用

    对于所有的Web应用,其实本质上都是一个socket服务端,用户的浏览器就是一个socket的client,我们看看下面这段代码 import socket def handle_request(cl ...

随机推荐

  1. springboot快速入门02--Controller编写和测试

    02springboot快速入门--Controller编写和测试 1.新建一个HelloController import org.springframework.boot.SpringApplic ...

  2. Hybrid App从概念到实战

    最近一直在准备找工作,看了很多公司的招聘介绍,有相当一部分直接写:熟悉 Hybrid App 开发加分!正好,我司开发的就有这种 Hybrid App--使用WebViewJavascriptBrid ...

  3. jQuery甘特图/日程图/横道图/插件

    基于JQ的一款灵活高效,支持自定义拓展的甘特图/日程图插件 支持月/周/小时等显示方式 支持拖动改变时间 展开与收起 添加/删除,刷新 节假日高亮 clicked,dblClicked,changed ...

  4. 给hexo博客的NEXT主题添加一个云日历

    一点废话 hexo中有文件的归档,但是博文的数目多了,浏览的时候也是很不方便的.于是我就有找个云日历的想法了,折腾了几天,网上的方法都试过了.但是没出效果.于是想着自己来写一个.这自己写的这部分是基于 ...

  5. 《VR入门系列教程》之11---基本几何-材质-光照

    网格.多边形.顶点     绘制3D图形有许多方法,用的最多的是用网格绘制.一个网格由一个或多个多边形组成,这些多边形的顶点都是三维空间中的点,它们具有x.y.z三个坐标值.网格中通常采用三角形和四边 ...

  6. 用python输出菱形

    num = eval(input('请输入最多*所在行数:')) a = num b = num #上三角 for i in range(1,num+1): print((a-1) *' ', (2* ...

  7. linux初学者-iptables篇

     linux初学者-iptables篇 iptables是防火墙的一种,是用来设置.维护和检查linux内核的IP过滤规则的,可以完成封包过滤.封包重定向和网络地址转换(NAT)等功能. iptabl ...

  8. js异步解决方法

    在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作.在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有ht ...

  9. UPC Contest RankList – 2019年第二阶段我要变强个人训练赛第十六场

    E: 飞碟解除器 •题目描述 wjyyy在玩跑跑卡丁车的时候,获得了一个飞碟解除器,这样他就可以免受飞碟的减速干扰了.飞碟解除器每秒末都会攻击一次飞碟,但每次只有p/q的概率成功攻击飞碟.当飞碟被成功 ...

  10. 02 | 健康之路 kubernetes(k8s) 实践之路 : 生产可用环境及验证

    上一篇< 01 | 健康之路 kubernetes(k8s) 实践之路 : 开篇及概况 >我们介绍了我们的大体情况,也算迈出了第一步.今天我们主要介绍下我们生产可用的集群架设方案.涉及了整 ...