0

我有一个 Web 应用程序，我想在自动化测试期间通过注册一个全局 javascript 侦听器来调试，该侦听器将在给定 dom 节点上每次单击时发出一个日志事件等。我不在乎解决方案是纯 javascript 还是使用其中一种框架。他们是一种轻量级的方法吗？

4

2 回答 2

1

不确切知道您要记录什么或在哪里，但也许这就是您需要的：

window.addEventListener('click',function(e)
{
    console.log(e);
    //or
    var xhr = new XMLHttpRequest();
    xhr.open('post', 'url/to/logscript', true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencode');//or application/json
    var data = {node: (e.target || e.srcElement).tagName,
                other: (e.target || e.srcElement).baseURI};
    xhr.onreadystatechange = callback;//<-- define your own, or leave as is
    xhr.send(data);//serialize or JSON.stringify
},false);

在日志中，您可以存储您需要的事件数据。
在 jQuery 中，你可以这样做：

$(window).on('click', function(e)
{
    e = e instanceof jQuery ? e[0] : e;//get the real event, I believe jQ wraps the event object...
    $.ajax({method: 'post',
            data: e,
            url: 'path/to/logscript',
            success: function(response)
            {
                //this is the callback function from the vanilla JS snippet
            }
    });
}

我最终使用了 jquery 函数的一个稍微修改的版本，它 JSON 化输出并审查它（使用另一个示例中的代码），因为它包含循环引用（由于 DOM 结构）。

$(window).on('click', function(e) { e = e instanceof jQuery ? e[0] : e;//获取真实事件，相信jQ包装了事件对象...

    $.ajax({method: 'post',
            data: JSON.stringify(e, censor(e)),
            url: 'debug',
            success: function(response) {
                //this is the callback function from the vanilla JS snippet
            }
    });
});

function censor(censor) {
  return (function() {
    var i = 0;

    return function(key, value) {
      if(i !== 0 && typeof(censor) === 'object' && typeof(value) == 'object' && censor == value)
        return '[Circular]';

      if(i >= 29) 
        return '[Unknown]';

      ++i; 

      return value;
    }
  })(censor);
}

后端的 rails 控制器如下所示：

class DebugController < ApplicationController
  def index
    puts params['data']
  end
end
于 2013-06-12T13:13:11.213 回答
0

当单击特定节点时，这将记录到控制台，使用事件委托（事件冒泡），因此只有一个（或全局）事件侦听器。

var node = document.getElementsByTagName("p")[0];

window.addEventListener("click", function (evt) {
    if (evt.target === node) {
        console.log("clicked");
    };
}, false);

在jsfiddle 上

只需在 jsfiddle 中单击您的问题并查看 console.log

于 2013-06-12T13:18:30.890 回答