7

I'm hoping that someone out there has done this. I have some custom jQuery modifications that utilize the jQuery event system in order to launch certain events for processing. I'd like to be able to do automated testing in response to these.

Has anyone worked on a better tie in from WatiN to jQuery? I've seen a few posts on a passthrough for jQuery selectors, as well as a post here about waiting for given text to change... Would be cool if someone added jQuery selection, and event support... even the document.getElementsBySelector might be nice.

4
  • What exactly do you want to do ? my web tests used a jQuery code that is injected on each page, this code allow extensions of the Watin browser with two methods, one for css selector and another for waitForAjaxComplete (which used some binding on .AjaxStart and .AjaxStart on jQuery side). I am sure I can help you. So do you have an example of what you want to do on the WatiN side ? Commented Jan 21, 2011 at 10:25
  • in jQuery, I have extended the jquery validation framework, and have a couple of events I want to listen to server-side.... when a form's "validation.success" event fires, I want to do a waitfor server-side that listens for that event, and when it does file, inspect the results... same for "validation.failure" etc... this would allow me to test validation results from the browser perspective. Another example would be to make certain adaptive results come back as JSON, not HTML.
    – Tracker1
    Commented Jan 21, 2011 at 22:50
  • The above is one example... In essense, I'd like to have a few ties while the browser is open, waiting for events, with Assert... statements that can be tested against. Listening for jQuery based events.
    – Tracker1
    Commented Jan 21, 2011 at 22:51
  • 1
    What you would like is really cool, you really want a complete insight in the JavaScript. I don't thin WatiN allows anything like this right now, and you have to write all the javascript code to do anything. I think, we should write a 'WatiJ" framework that is injected on every page, and allow to go really deep in the JS and test anything we want. Commented Jan 22, 2011 at 12:01

3 Answers 3

7

I don't know if it is what you expect, but I had some time to investigate and I came with a solution to the question : With WatiN, I'd like to wait for a jQuery event.

The goal is to write in C#:

Browser.WaitForEvent("#link", "onclick");

I wrote a test page (available on http://www.sp4ce.net/debug.html) where it triggers a onclick event on the link when you click on the button.

Then I wrote the extension method .WaitForEvent

public static void WaitForEvent(this Browser browser, string selector, string eventname)
{
   using (EventMonitorWatcher monitor = new EventMonitorWatcher(browser, selector, eventname))
   {
      int timeWaited = 0;
      var maxTimeWait = Settings.WaitForCompleteTimeOut * 1000;
      do
      {
         Thread.Sleep(Settings.SleepTime);
         timeWaited += Settings.SleepTime;
      }
      while (!monitor.IsEventCalled() && timeWaited < maxTimeWait);
   }
}

This methods uses a EventMonitorWatcher that check is the event has been called.

public class EventMonitorWatcher : IDisposable
{
   private readonly Browser _browser;
   private readonly string _selector;
   private readonly string _eventname;

   public EventMonitorWatcher(Browser browser, string selector, string eventname)
   {
      _browser = browser;
      _selector = selector;
      _eventname = eventname;
      _browser.Eval(string.Format("startEventMonitor('{0}', '{1}')", _selector, _eventname));
   }

   public bool IsEventCalled()
   {
      string result = _browser.Eval(string.Format(
      "isEventCalled('{0}', '{1}')", _selector, _eventname));
      return result == "true";
   }

   public void Dispose()
   {
      _browser.Eval(string.Format("stopEventMonitor('{0}', '{1}')", _selector, _eventname));
   }
}

This monitor use three javascript (jquery powered) methods that starts a monitoring, stops a monitoring and checks if the event has been called.

startEventMonitor = function(selector, event) {
    $(selector).data('eventMonitorResult', false);
    var eventMonitorHandler = function() {
        $(selector).data('eventMonitorResult', true)
    };
    $(selector).data('eventMonitorHandler', eventMonitorHandler);
    $(selector).bind(event, eventMonitorHandler);
};

stopEventMonitor = function(selector, event) {
    $(selector).undbind(event, $(selector).data('eventMonitorHandler'));
    $(selector).data('eventMonitorResult', false);
};

isEventCalled = function(selector, event) {
    return $(selector).data('eventMonitorResult');
};

Here you are, you then need to inject this javascript as a string your page when you run the browser.

[Test]
public void Test()
{
    using(var browser = new IE("http://www.sp4ce.net/debug.html")
    {
        browser.Eval(JavaScript);
        browser.WaitForEvent("#link", "onclick");
    }
}

In this test, when you click on the "click" button, the test should end directly and your browser be closed;

1
  • This is really cool... ideally, I'd like to be able both listen to a given event and analyze the result, as a listener as the event is called. In my case it isn't a browser event, but a custom jQuery event. .. not sure if this is at all possible.
    – Tracker1
    Commented Jan 21, 2011 at 22:48
3

Why not inject some javascript which attaches to the event(s) you want to listen for. In the your javascript eventcode that gets called when the event(s) fire, you can add an element to the DOM with the results you are interested in. Create a Div for instance and set the innerHtml with the output you want to check. Give the Div an unique ID.

Basic flow:

  • browser.RunScript(javascript_here_to_attach_to_the_events_you_are_interested_in) Lets assume that when the event is fired your injected code creates a Div with the Id = "my_event_result".

  • Do the actions that trigger your validation code (like inputting good/wrong values) example: browser.TextField(textFieldIdWithValidation).Typetext("some value");

  • Wait for the Div to appear: browser.Div("my_event_result").WaitUntilExists();

  • Assert the value(s) in the div: bool result = browser.Div("my_event_result").Text == "The expected test";

HTH, Jeroen

0

I'm not expecting for this to be the right answer since I dont have the time to check out WatiN, just a couple of notes that will help you do your thing, 1st monkey patch jQuery:

since all jQuery events is triggered with the function trigger.

var _trigger = jQuery.prototype.trigger;
jQuery.prototype.trigger = function () {
      _trigger.apply( this, arguments );
      alert( Array.prototype.join.call( arguments, '-' ) );
}

This would make your page alert all the arguments given each time something is triggered (as a string with '-' as a separator), usually the first argument would be the event. WatiN should have some kind of function that will capture alerts, if not I suggest dropping it and going with watij or something, personally I recommend HTMLUNIT

Additionally if your interested in what triggered the event, inside the function above, this would point to that :)

Stuff you should check out:
http://api.jquery.com/event.result/
http://api.jquery.com/event.data/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.