13

我正在使用Mocha 测试框架和Chai 断言库编写一些测试我一直在 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 页面变量？

任何帮助是极大的赞赏！

4

1 回答 1

19

我回去玩了一会儿，最后让 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]);
于 2013-05-29T00:48:27.247 回答