使用 WebdriverJS 时如何访问错误？

Question

我们正在使用出色的 WebdriverJS（使用 Selenium）对我们的网络应用程序执行验收测试。一切正常，当我们使用 Firefox 和 Safari 时，我们的测试成功执行。

但是，当我们使用 PhantomJS 时，我们的测试会因无用的错误而失败。就好像... Javascript 甚至没有在客户端页面中运行！如果 PhantomJS 的 javascript 环境出现错误，就会导致这种情况。不幸的是，在将 PhantomJS 与 WebdriverJS 一起使用时，我似乎找不到访问 Javascript 错误的方法。

如果我们直接使用 PhantomJS，我们可以简单地做（来自PhantomJS site）：

page.onError = function(msg, trace) {
  console.log(msg);
  trace.forEach(function(item) {
    console.log('  ', item.file, ':', item.line);
  });
}

不幸的是，在 WebdriverJS 中使用 PhantomJS 时，我不知道如何访问这个神秘的 page 对象。有什么想法吗？

Answer 1

您实际上可以在 INFO 级别访问 PhantomJS 标准输出日志中的 JS 错误。

$ phantomjs --webdriver 4444 --webdriver-loglevel=INFO

您甚至可以通过将日志级别设置为DEBUG 来推动事情的发展，并查看 PhantomJS 实际执行您通过 Webdriver / Ghostdriver 发送的命令。

Answer 2

我想出了一个可行的解决方案！本质上，它涉及使用 onerror 事件处理程序来拦截（和存储）Javascript 错误。然后，一旦 DOM 准备好，我们通过隐藏的 DOM 元素报告错误。这允许 Selenium 查找特定元素（例如“.javascript-errors”），这自然是它非常擅长的。感谢无数其他博客文章和 SO 问题让我走到了这一步。

代码：

//For detecting and reporting Javascript errors via Selenium.  Note that this should be in its own file to allow this code to reliably detect syntax errors in other files.
var errors = [];

//Handle all errors
window.onerror = function(message, url, line) {
    errors.push({"message":message, "url":url, "line":line});
}

//Report errors visually via HTML once the DOM is ready
window.onload = function() {
    if(errors.length==0)
        return;

  var div = document.createElement("div");
  div.className = 'javascript-errors';
  div.innerHTML = '';
    var style = "position:absolute; left:-10000px; top:auto; width:1px; height:1px;"; //CSS to hide the errors; we can't use display:none, or Selenium won't be able to read the error messages.  Adapted from http://webaim.org/techniques/css/invisiblecontent/

    for(var i=0; i<errors.length; i++)
      div.innerHTML += '<div class="javascript-error" style="' + style +'"><span class="message">' + errors[i].message.replace('<', '&lt;').replace('>', '&gt;') + '</span><br/><span class="url">' + errors[i].url + '</span><br/><span class="line">' + errors[i].line + '</span></div>';

    document.body.appendChild(div);
}