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

Question

我正在使用 Mocha test framework 编写一些测试和 Chai assertions library我一直在 Chrome 浏览器中测试它们，它们工作正常，但后来我在 headless 浏览器中尝试它们 mocha-phantomjs我在某些元素上发送的 .click() 事件似乎没有触发，而其他元素正在工作。

测试成功登录网站，使用:

$("#login").click()

“#login”是一个表单提交按钮，使用这种方式单击可以正常工作。

接下来我想单击一个作为 anchor 元素的菜单项。

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

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

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

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

使用 JavaScript 调度事件

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

这确实会触发点击事件并将浏览器带到正确的网址，但它也会导致整个页面在 chrome 和 mocha-phantomjs 中重新加载，这会从头开始重新启动测试，使它们陷入无限循环。 .有没有办法使用它而不导致页面重新加载？

使用phantomjs的page.sendEvent()

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

如果您向其传递元素的正确坐标，则应该发送 native 单击事件。我试图让它工作，但我似乎无法从正在运行的 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);
};

现在可以点击我的 anchor 元素:

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