Simulating user input for TDD JavaScript

Question

I'm finding it increasingly difficult to simulate actual user events using jQuery or native element trigger functions. For example, if you have a text input and you don't want the user to be able to add a character, you can call e.preventDefault() with the jQuery-normalised event object on the keydown event. However, there is no way to programatically verify this test scenario.

The following test passes even without the call to preventDefault because the jQuery keydown trigger isn't a "real" event.

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

Without the correct code, this test should fail because the input should have a value of 'testd' (68 is the character code for 'd').

Does anyone know any methods or libraries to simulate real browser UI events?

score 4 · Accepted Answer · answered Jul 21 '11 at 04:19

4

Simulate real event is quite complicated. You must first determine which type of event you need and create it with document.createEvent. Then call different init*Event to initialize the event object. Finally, use element.dispatchEvent to dispatch the event to the target object.

answered Jul 21 '11 at 04:19

Ghostoy

2,689
19
18

I've tried this but they keyCode and charCode kept coming up as 0, even though I specified them in initKeyboardEvent. Any ideas why? It would be awesome if there was a library that could do this for the A-spec browsers... may write one myself if I can get over this hurdle. – Matty F Jul 21 '11 at 05:19
@MattyF This seems to be a [bug](https://bugs.webkit.org/show_bug.cgi?id=16735) of Chrome from upstream code of WebKit, that event initialized by `initKeyboardEvent` always has `keyCode` and `charCode` set to 0. I guess you should refer to FF instead of WebKit based browsers. – Ghostoy Jul 21 '11 at 05:51

score 2 · Answer 2 · answered Jul 21 '11 at 02:26

2

You probably want to try using Selenium: http://seleniumhq.org/

Here's a decent overview: http://blog.frontendforce.com/2010/05/unit-testing-in-javascript-selenium/

answered Jul 21 '11 at 02:26

brendan

29,308
20
68
109

I had a look at this yesterday - is there a way to use Selenium via JavaScript, so that I can integrate it with my automated tests (JsTestDriver + Jasmine)? – Matty F Jul 21 '11 at 02:27
I don't think you can use them 'together'. Many people would consider your JsTestDriver tests "unit tests" vs. Selenium being "integration tests". – brendan Jul 21 '11 at 02:36
Not exactly what you're looking for but maybe of use: http://stackoverflow.com/questions/5091935/can-i-write-selenium-tests-in-javascript – brendan Jul 21 '11 at 02:36

score 0 · Answer 3 · answered Feb 12 '14 at 14:34

0

Here's a repo that seems to be kept quite well up to date: https://github.com/mmonteleone/jquery.autotype

answered Feb 12 '14 at 14:34

Nick Budden

621
9
20

score 0 · Answer 4 · answered Jul 22 '11 at 13:52

0

I believe YUI had some code to do that. Download their code and take a look. I believe it is called simulate.js or something similar. Alternatively you can look at how selenium does it.

answered Jul 22 '11 at 13:52

airportyh

21,948
13
58
72

Simulating user input for TDD JavaScript

4 Answers4

Linked