最近做自动化测试工具,因此需要脚本录制功能,所以查询资料在这里记录一下,两个核心技术点:
- 根据DOM元素来获取对应的XPath
- JS监听全局的元素点击事件
//获取xpath
function readXPath(element) {
if (element.id !== "") {//判断id属性,如果这个元素有id,则显 示//*[@id="xPath"] 形式内容
return '//*[@id=\"' + element.id + '\"]';
}
//这里需要需要主要字符串转译问题,可参考js 动态生成html时字符串和变量转译(注意引号的作用)
if (element == document.body) {//递归到body处,结束递归
return '/html/' + element.tagName.toLowerCase();
}
var ix = 1,//在nodelist中的位置,且每次点击初始化
siblings = element.parentNode.childNodes;//同级的子元素
for (var i = 0, l = siblings.length; i < l; i++) {
var sibling = siblings[i];
//如果这个元素是siblings数组中的元素,则执行递归操作
if (sibling == element) {
return arguments.callee(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (ix) + ']';
//如果不符合,判断是否是element元素,并且是否是相同元素,如果是相同的就开始累加
} else if (sibling.nodeType == 1 && sibling.tagName == element.tagName) {
ix++;
}
}
};
$(document).ready(function () {
var xpath = '', o;
$('*').click(function (e) {
e.stopPropagation();//停止冒泡
o = this;
alert(readXPath(o));
});
});
参考文章:
https://blog.csdn.net/u010085423/article/details/54628799
https://segmentfault.com/q/1010000005686667
网友评论