美文网首页
JavaScript监听全局点击事件并计算XPath

JavaScript监听全局点击事件并计算XPath

作者: 柠檬信息技术有限公司 | 来源:发表于2018-04-02 10:22 被阅读599次

最近做自动化测试工具,因此需要脚本录制功能,所以查询资料在这里记录一下,两个核心技术点:

  • 根据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

相关文章

  • JavaScript监听全局点击事件并计算XPath

    最近做自动化测试工具,因此需要脚本录制功能,所以查询资料在这里记录一下,两个核心技术点: 根据DOM元素来获取对应...

  • 全局监控 click事件的四种方式

    本文主要给大家分享如何在全局上去监听 click 点击事件,并做些通用处理或是拦截。使用场景可能就是具体的全局防快...

  • JavaScript监听键盘并点击

    学生期末考了,试卷也开始多了,经过上次的试卷修改,这次学乖了,想办法简便一下工作量 上次批改试卷的评分板还没修改,...

  • ajax五部曲

    思路: 1:Javascript监听浏览器网页事件(点击,提交,更改等)2:由javascript创建Ajax引擎...

  • useLongPress

    简介 1 .监听目标的长按事件2 .不足,长按和点击事件是分开计算的

  • FRP 实例简介(RxJS / RxSwift / Reacti

    FRP是异步数据流编程 这不是什么新鲜的东西了。在前端编程中(用Javascript),监听某个按钮的点击事件,并...

  • Event Bus 在Vue中的使用

    使用on全局监听 使用$emit触发事件。

  • zk调用实例

    pom文件引入zookeeper包 连接zk并监听事件 如何创建znode并监听事件 改变znode数据并监听事件...

  • JavaScript的事件机制

    在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(...

  • [Flutter]监听Android返回键事件

    需求监听Android返回键按钮点击事件 实现通过 WillPopScope 可以实现对返回键点击事件的监听,通过...

网友评论

      本文标题:JavaScript监听全局点击事件并计算XPath

      本文链接:https://www.haomeiwen.com/subject/fqethftx.html