勿忘初心

个人签名

530篇博客

网易严选定制化chrome测试插件

勿忘初心2018-09-29 14:35

本文来自网易云社区

作者:吴琪惠


背景
因为一些个人比较懒的原因,不愿意去各路管理后台查询->操作,查询->再操作,抑或是数据库查询->操作,查询->再操作…为了跳出这个查找操作链,曾经尝试过很多方式,chrome插件是其中一种。
目前,组内也有一个测试平台,能够在平台上点一下,或者输入一个id就能做一些工作,但人总在考虑是否有更佳的方式,甚至不用输入任何值,不去关心cookie等麻烦事。因为常使用chrome的接口测试插件,开始思考是否能够为严选测试环境做一个专门的测试插件。
人生苦短,我只想一键操作。

基本功能
暂时做了2个简单的功能:
第一个是进入商品详情页面之后,双击页面触发插件监听,生成每个规格ID和库存信息,页面截图如下:
第二个功能,是进入订单列表页面,双击页面触发插件监听,识别未发货订单,并在订单下增加一个发货按钮,点击发货按钮即可完成订单发货操作,效果如下:
按照以往的测试发货流程,我们需要复制订单号--> 登录后台查找订单对应的包裹号 --> 修改发货请求参数 --> 打开服务器/测试平台执行发货,目前只要双击-->点击,即可完成,无需任何查询和切换到其他系统的操作。

插件文件
chrome插件可以简单的理解为一个web应用,我们要写的是html和js代码。严选测试插件的文件列表如下:
其中,manifest配置文件里面,设置了一些必要的参数信息,具体可参考上面加的链接,有详细的说明。
{
	"manifest_version": 2,
	"name": "严选测试插件",
	"description": "严选的测试辅助插件",
	"version": "0.0.1",
	"background": { "scripts": ["js/jquery-2.0.0.min.js", "js/background.js"] },
	"page_action": {
		"default_icon": {
			"19": "19.png",
			"38": "38.png" // 插件图标
		},
		"default_title": "严选测试插件" // shown in tooltip
	},
	"permissions" : ["tabs","http://test.yx.mail.netease.com/toolbox/"],
	"content_scripts":[{
		"matches":["http://you.yxp.163.com/*","http://you.163.com/*"],
		"js":["js/jquery-2.0.0.min.js", "js/content_script.js"],
		"run_at":"document_start"
	}]
}
在background.js里面加了对页面的监听,保证插件只针对测试环境url生效,即只有在当前url下,插件图标才会生效,且图标会呈高亮显示。


function getDomainFromUrl(url){
	var host = "null";
	if(typeof url == "undefined" || null == url)
		url = window.location.href;
	var regex = /.*\:\/\/([^\/]*).*/;
	var match = url.match(regex);
	if(typeof match != "undefined" && null != match)
		host = match[1];
	return host;
}


function checkForValidUrl(tabId, changeInfo, tab) {
	console.log(getDomainFromUrl(tab.url));
	if(getDomainFromUrl(tab.url).toLowerCase()=="you.yxp.163.com"){
		chrome.pageAction.show(tabId);
	}
};

chrome.tabs.onUpdated.addListener(checkForValidUrl);
content_scrpit.js是注入到测试页面的脚本,也就是这里的代码是注入到我们待测页面的,会直接影响严选测试环境web端主页。在这里,我做了几个简单的判断,一个是区分当前是哪个页面,针对商品详情页面和订单列表页面url进行解析判断,以辨别进入到不同的事件中。
//添加监听
window.addEventListener("dblclick", (e) => {
	if (checkUrl("/order/myList")) {//订单列表页的处理
		addbutton();
		$('body').on('click', '.toolboxtest', function() {
		    console.log($(this).attr('id'));
		    $.ajax({
		        type:"post",
		        url:"http://xxxx/toolbox/aftersale/packageDeliver",
		        data:{orderId:$(this).attr('id'), packageId:""},
		        error:function(xhr,err){
		            alert('请求失败,errorcode=' + xhr.status + ', errormsg=' + err + '!')
		        },
		        success:function(data){
		            alert(JSON.stringify(data));
		            window.location.reload();
		        }
		    });
		});
	}else if(checkUrl("/item/detail")){//商品详情页的处理
		console.log("go to page /item/detail");
		var itemid = GetQueryString("id");
		$.ajax({
		    type:"get",
		    url:"http://xxxx/toolbox/itemsku/getsku/"+itemid,
		    error:function(xhr, err){
		        chrome.runtime.sendMessage({type:"yx_pc_detail", error:xhr.status + ', errormsg='+xhr.result});
		    },
		    success:function(data) {
		        var skustr = "xxx";
		        $('.m-info').append(skustr); //详细处理不加赘述
		    }
		});
	}
}, false);
popup.js/popup.html是插件点击之后弹出框,最早期的时候是做了这样一个版本,但因为这个框当鼠标移开的时候,框就会消失,不便于查看和操作,早期版本如下图

插件的安装和打包
    1、打开chrome浏览器,输入chrome://extensions/ 进入到chrome插件管理页面
    2、开启右上角的“开发者模式”,点击“加载已解压的扩展程序”
    3、选择“yanxuan-chrome-testplugin”所在文件夹根目录,确定
    4、导入之后点击开关开启插件
    5、也可对插件进行打包,在插件页面点击“打包扩展程序”,生成扩展程序打包文件,使用时拖入到chrome中即可完成插件安装



遇到的坑
    1、最早开始的时候,在 manifest.json文件里面,设置了run_at参数的值为document_start,发现总是找不到发货的订单所在位置,左思右想发现页面尚未加载如何找到控件,改成了默认值document_idle,等页面加载完成再查找;
     然而问题又来了,页面加载完了,再添加监听已经来不及了,导致按钮添加不上去,后来修改为"run_at":"document_start"并且添加了window.addEventListener监听事件解决了问题
    2、查询和操作功能是调用了ajax请求实现的,请求的是目前现有的一个测试平台的接口,也是将原有的接口平台尽可能的二次利用。

后续
    1、前端小白,伤痕累累,没有基础的前提下做的还是略感吃力
    2、插件尚未做开关服务,目前只能手动开启关闭
    3、功能还很简单,但是个思路拉~

网易云免费体验馆,0成本体验20+款云产品! 

更多网易研发、产品、运营经验分享请访问网易云社区