使用浏览器插件探索自动化测试

最近在做的一个项目中,我需要帮客户去维护一些基础数据,其中有一项工作内容就是需要对3000多个数据做批量的处理。

这个过程需要我在系统的页面上,批量的对每一页的数据进行过滤、全选,然后批量操作,直到这3000多个数据全部梳理完成。

借此机会探索一下浏览器插件开发,之所以决定用浏览器插件的方式,有以下几个原因:

1.  selenium也可是实现页面自动化,只是我觉得这个东西不是很好用,要一直占用你的桌面,所以有种排斥感

2.  自己完全可以调用服务接口,自己通过脚本模拟前端与接口的交互过程,这种方式最快,最稳定。最后还是用了这个方式来实现我的功能。

3.  近期各种抢票插件,以及抢月饼事件,是我对浏览器插件开发产生了兴趣,借此机会了解一下,顺便也试探一下这东西在自动化测试能否带来帮助


chrome插件开发的原理不做介绍了,下面有两个比较完备的连接,有点基础的人看一遍就能照着做了。

http://open.chrome.360.cn/    这是360浏览器团队翻译的开发文档

http://www.ituring.com.cn/book/1421   《chrome拓展及应用开发》


我的manifest.json文件

{
	"name": "b-extension",
	"version": "1.0",
	"manifest_version": 10,
	"description": "The first extension that I made.",
	"browser_action": {
		"default_icon": "icon.png",
		"default_popup":"popup.html"
	},
	"permissions": [
		"https://10.95.36.41/*"
	],
	"content_scripts":[
		{
			"matches":[ "https://10.95.36.41/ngsoc/home/configs/organizationWebsite" ],
			"js":[ "jquery-3.2.1.min.js","mytest.js" ]
		}
	]
}

打开指定页面后,自动运行我的js文件。

function click_next()
{
	$("td[title='下一页']").click();
	setTimeout("next_page()",5000);
}

function click_confirm()
{
	$("button[class='ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only']")[0].click();
	setTimeout("select_2()",20000);
}

function click_start()
{
	$("a[class='btn btn-default']")[3].click();
	setTimeout("click_confirm()",3000);
}

function click_all()
{
	$("th[role='columnheader']").eq(0).find('input').click();
	setTimeout("click_start()",1000);
}


function next_page()
{
	if  ($("td[title='下一页']").attr("class") != "ui-pg-button ui-disabled")
	{
		setTimeout("click_all()",1000);
	}
}

function select_2()
{
	$("div[class='form-group department-select']").find('select').val("2");
	var e = document.createEvent('HTMLEvents');
	e.initEvent('change',true,true);
	$("div[class='form-group department-select']").find('select')[0].dispatchEvent(e);
	setTimeout('search()',3000);
}

function search()
{
	$("span[class='glyphicon glyphicon-search']").click();
	setTimeout("next_page()",10000);
} 

setTimeout("select_2()",10000);

我的需求比较简单,就是在指定的页面上自动帮我循环的点击一些按钮,所以这里的代码量不大。不过还是遇到了一些问题,写下来记录一下。

1.  有些点击操作,需要等到服务器有响应之后,再去进行下面的点击操作。一开始我自己在js中定义了一个sleep函数,每两个操作之间sleep一段时间。但是运行起来却发现在插件运行的过程中,整个页面一片空白,点击也没有反映。第一感觉就是浏览器忙着执行我的js,没有时间渲染页面了。网上搜了一下,证实了我的想法。是因为chrome中,每个页面的渲染与js解析执行在一个线程中,因为我的js脚本中加入了大量的sleep,长时间占用线程,导致浏览器没有时间去渲染页面了。最后改为使用setTimeout()来实现,具体原因可以上网了解一下JavaScript的任务处理机制,以及为什么javaScript是单线程的却可以处理多任务。

2.  研发所使用的开发框架中,前端元素的id是随机生成的,也就是每次访问页面,每个元素的id都会产生变化。大致原因就是为了防止id重复,在开发过程中把每个元素的id定义成了变量,最后这些变量随机赋值。这也就导致我不能通过id在页面上去定位元素,好在最后还是通过每个元素的其它一些属性打到了定位的目的,但其实这也不是什么好的方法。 所以这个问题,如果需要做前端测试自动化的话,估计会很难搞定,只有id才能唯一定位一个元素,如果这个id变成动态分配的了,那么写自动化脚本的时候就会很苦恼了。

3.  通常下拉菜单都会自动绑定一个onchange事件,但是当我通过js  element.change()直接调用时,却没有任何效果。因为自己没什么js经验,最后找研发帮忙搞定了这个问题。大致原因:研发是通过v-model的变化来实现的change,而vue里select的change事件并没有绑定原生的change事件。 其实我也没懂。。不过这个问题在进行自动化测试的时候也是要考虑的。如果研发用了什么稀奇古怪的开发方式,那么在进行页面自动化的时候也会变得很麻烦。。







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值