模拟用户输入用于TDD JavaScript

Question

我发现使用jQuery或本地元素触发函数越来越难以模拟实际的用户事件。例如，如果您有一个文本输入框，您不希望用户能够添加字符，您可以在keydown事件上调用具有jQuery标准化事件对象的e.preventDefault()。然而，没有办法通过编程验证这个测试场景。

以下测试即使没有调用preventDefault也会通过，因为jQuery keydown触发器不是一个“真正”的事件。

input.val('test').trigger(jQuery.Event({
    which: 68
});
expect(input).toHaveValue('test');

如果没有正确的代码，这个测试应该会失败，因为输入框应该有一个值为“testd”的值（68是“d”的字符编码）。

有人知道模拟真实浏览器UI事件的方法或库吗？

- Matty F

Answer 1

模拟真实事件相当复杂。您首先需要确定所需的事件类型，并使用 document.createEvent 创建它。然后调用不同的 init*Event 方法来初始化事件对象。最后，使用 element.dispatchEvent 将事件分派至目标对象。

- Ghostoy

---

我尝试过这个，但keyCode和charCode一直为0，即使我在initKeyboardEvent中指定了它们。有什么想法吗？如果有一个库可以为A规范浏览器做到这一点，那就太棒了...如果我能克服这个障碍，我可能会自己写一个。 - Matty F

@MattyF 这似乎是Chrome的一个bug，源自于WebKit的上游代码，由initKeyboardEvent初始化的事件总是将keyCode和charCode设置为0。我猜你应该参考Firefox而不是基于WebKit的浏览器。 - Ghostoy

Answer 2

你可能想尝试使用Selenium：http://seleniumhq.org/ 这里有一个不错的概述：http://blog.frontendforce.com/2010/05/unit-testing-in-javascript-selenium/

- brendan

---

我昨天看了一下 - 是否有一种可以通过JavaScript使用Selenium的方法，以便我可以将其与我的自动化测试（JsTestDriver + Jasmine）集成？ - Matty F

我认为你不能将它们“一起”使用。许多人认为你的 JsTestDriver 测试是“单元测试”，而 Selenium 是“集成测试”。 - brendan

不一定是您想要的，但可能会有用：https://dev59.com/x1TTa4cB1Zd3GeqPt5k1 - brendan

Answer 3

我相信YUI有一些代码可以做到这一点。下载他们的代码并查看一下。我相信它被称为simulate.js或类似的东西。或者你可以看看selenium是如何做的。

- airportyh

Answer 4

这里有一个看起来一直被很好地更新的仓库：https://github.com/mmonteleone/jquery.autotype

- Nick Budden