Testing higherlevel javascript events - Stack Overflow

admin管理员组

文章数量:1356716

I am looking for a testing library for javascript that will work for spec-testing user interaction such as drag and drop, hovers, double/single clicks and drawing on a canvas. I have looked at a couple libraries including jspec and jasmine but both seem to be more based on unit testing.

If I overlooked the fact that either of the above libraries support such testing I would love an example.

Edit

---

So I did a lot of looking last night and really didn't e across anything. I would like if possible to emulate user interaction on a higher level than something like jasmine which is capybara style in the sense that it just fakes interaction with the dom.

I would like a library that actually emulates a mouse down -> mouse move -> mouse up event chain.

Does such a magical creation exist?

Post bounty edit

---

So, I have continued to experiment with JS testing libraries and am really not happy with how they function around using the html5 canvas. It seems that with the canvas you cannot test events in jasmine because jasmine will not initialize the canvas.

I don't like that you must use "html" fixtures rather than actually testing application code. That seems backwards if you are trying to integrate js into your app. For spec testing it makes sense but BDD testing of a web framework would mandate it actually use application views for testing.

Again does such a monster exist or is my head in the clouds?

I am looking for a testing library for javascript that will work for spec-testing user interaction such as drag and drop, hovers, double/single clicks and drawing on a canvas. I have looked at a couple libraries including jspec and jasmine but both seem to be more based on unit testing.

If I overlooked the fact that either of the above libraries support such testing I would love an example.

Edit

---

So I did a lot of looking last night and really didn't e across anything. I would like if possible to emulate user interaction on a higher level than something like jasmine which is capybara style in the sense that it just fakes interaction with the dom.

I would like a library that actually emulates a mouse down -> mouse move -> mouse up event chain.

Does such a magical creation exist?

Post bounty edit

---

So, I have continued to experiment with JS testing libraries and am really not happy with how they function around using the html5 canvas. It seems that with the canvas you cannot test events in jasmine because jasmine will not initialize the canvas.

I don't like that you must use "html" fixtures rather than actually testing application code. That seems backwards if you are trying to integrate js into your app. For spec testing it makes sense but BDD testing of a web framework would mandate it actually use application views for testing.

Again does such a monster exist or is my head in the clouds?

• javascript
• integration-testing

Share Improve this question Follow edited Jul 29, 2011 at 18:53 austinbv asked Jul 26, 2011 at 2:37 austinbvaustinbv 9,49166 gold badges5252 silver badges8383 bronze badges 9

• 5 Have you tried Selenium or Watr? – Brian Hoover Commented Jul 26, 2011 at 2:39
• I have used Selenium but I do not know of a selenium library for js that is good I just have used to web drivers to drive other testing frameworks forward. Watr I just tried to google and got nothing so a link would be nice. Ty – austinbv Commented Jul 26, 2011 at 2:44
• Sorry, I spelled it wrong. watir. – Brian Hoover Commented Jul 26, 2011 at 2:47
• both of those still suffer the same fall that I cannot test things like drawing a line on a canvas... – austinbv Commented Jul 26, 2011 at 2:52
• I don't know of any js libraries designed for emulating user interaction through a nice API. You have to do this manually through the DOM events or jQuery. – Raynos Commented Jul 26, 2011 at 12:27

 |  Show 4 more ments

5 Answers 5

Sorted by: Reset to default 2

Have you tried PhantomJS or ZombieJS? I've heard good things about Phantom in particular.

=============

Another suggestion: Selenium plug-ins/macros. www.seleniumwiki./selenium-rc/selenium-mousedownat-mousemoveat-and-mouseupat-example/ or glauche.de/2009/09/09/drag-drop-with-selenium/ .

I've seen the only good solution to this problem: DOH Robot. It runs java applet, which allows to emit actual javascript events and emulate real user behavior (including drag-and-drop testing).

DOH doesn't depend on dojo, so you can use it in any project. Unfortunately it is not widely used, although it is really cool testing framework.

Emulating user behaviour in JavaScript would require you to create custom Event Objects, dispatching them on an Element, and modifying their properties the most important of which are however read-only in standards pliant browsers.

• https://developer.mozilla/en/DOM/Event
• https://developer.mozilla/en/DOM/Event/UIEvent/MouseEvent
• https://developer.mozilla/en/DOM/element.dispatchEvent

In IE 5+ they seem to be modifiable but that obviously excludes cross-browser testing.

• http://msdn.microsoft./en-us/library/ms535863(v=vs.85).aspx

So, I don't think what you have in mind is possible.

---

Edit: Thinking about it (and looking into the documentation for the Selenium Firefox extension), obviously you would be able to write a JavaScript program which according to a given schedule would programmatically create custom Event Objects that simulate user behaviour.

However, I'm not sure whether this is what Selenium does or -- more importantly -- whether this is a reliable way to do it. Aso it essentially means "faking interaction with the DOM" which you have ruled out.

Btw, let me get this correctly: so you essentially want a JavaScript library for testing the JavaScript part of your application; but, you also want it to work on the browser level (not on the level of the DOM engine), i.e. to simulate a genuine user interaction as if it was captured by the browser?

I just successfuly tested code that needed Mouse Events using jasmine and jQuery.

http://api.jquery./category/events/event-object/

Just create and trigger events like this:

  // Create a new jQuery.Event object with specified event properties.
  var e = jQuery.Event("keydown", { keyCode: 64 });

  // trigger an artificial keydown event with keyCode 64
  jQuery("body").trigger( e );

Then use Jasmine to check properties. Just as a note, if you need to check animation, you can mock time like this:

//http://groups.google./group/jasmine-js/browse_thread/thread/dbdc5ad1c1514322

beforeEach(function() { 
  jasmine.Clock.useMock(); 
}); 
//... call the code that calls setTimeout 
jasmine.Clock.tick(500); // advance 500 msec 

Go and see jQuery and Dojo. Or you can go to jsfiddle site and take a look. They have a set of libraries and you can test online without downloading libraries.

本文标签： Testing higherlevel javascript eventsStack Overflow