对于某些元素，.click()在mocha-phantomjs中不起作用

Question

我正在使用Mocha test framework和Chai assertions library编写一些测试，我一直在chrome浏览器中测试它们，它们工作得很好，但后来我在无头浏览器mocha-phantomjs和我在某些元素上发送的.click()事件中尝试了它们，而其他元素却在工作。

测试成功登录到网站，这是使用以下命令完成的：

$("#login").click()

"#login“是一个表单提交按钮，使用这种方式可以很好地使用它。

接下来，我想单击一个菜单项，它是一个锚元素。

$("#menuItemToClick").click();

这就是它在mocha-phantomjs中停止工作的地方，尽管它在chrome中工作得很好。

显然，.click()函数已经定义并且可以工作，但不适用于该元素。

我已经用尽了我的google-foo。以下是我见过的其他人提到并尝试过的一些其他事情：

使用javascript dispatchEvent

var evObj = new CustomEvent('click');
evObj.initEvent('click', true, false);
document.getElementById('menuItemToClick').dispatchEvent(evObj);

这确实会触发click事件，并将浏览器带到正确的url，但它也会导致整个页面重新加载，包括chrome和mocha-phantomjs，这会从头开始重新启动测试，使它们进入无限循环……有没有办法在不导致页面重新加载的情况下使用它？

使用phantomjs的page.sendEvent()

var elementPosition = $("#menuItemToClick").offset();
page.sendEvent('click', elementPosition.left + 1, elementPosition.top + 1);

如果您将元素的正确坐标传递给它，这应该会发送一个本机单击事件。我试图让它工作，但我似乎无法从正在运行的mocha测试中访问该页面。有没有办法从mocha-phantomjs测试中访问phantomjs页面变量？

任何帮助都是非常感谢的！

Answer 1

我回去玩了一段时间，终于在没有重置页面的情况下让dispatchEvent工作了，它在chrome和mocha-phantomjs中都能工作！我认为页面重置/重新加载与事件有关，而不是鼠标事件。

我在测试的顶端放了一个方便的函数：

var clickElement = function (el){
    var ev = document.createEvent("MouseEvent");
    ev.initMouseEvent(
      "click",
      true /* bubble */, true /* cancelable */,
      window, null,
      0, 0, 0, 0, /* coordinates */
      false, false, false, false, /* modifier keys */
      0 /*left*/, null
    );
    el.dispatchEvent(ev);
};

现在可以单击我的锚点元素：

clickElement($("#menuItemToClick")[0]);