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

最近在做的一个项目中，我需要帮客户去维护一些基础数据，其中有一项工作内容就是需要对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事件。 其实我也没懂。。不过这个问题在进行自动化测试的时候也是要考虑的。如果研发用了什么稀奇古怪的开发方式，那么在进行页面自动化的时候也会变得很麻烦。。