How to make WebAii test wait for jQuery animation to complete?

Question

How can I write a Visual Studio WebAii Test that waits for a jQuery animate operation to complete before continuing?

Currently I'm just pausing for 5 seconds using a loop, but this is prone to breaking easily if the animation time changes.

I've tried some wait methods in the WebAii API but none of them seem to wait for that kind of thing. I think the closest I've come is Actions.WaitForElement(..) however the element that's being animated is already in the DOM so this doesn't seem to work. The wait methods also seem obscure to me.

Answer 1

Can you edit the javascript in order to add a callback function to the jQuery animate() call? If so, this would allow you to put in a hook that you can more easily detect with the WebAii API. You could, for example, have the callback on the animation add an (invisible) element to the DOM and then use the WaitForElement method to detect that. Somewhat of a kludge but it would work!

Answer 2

You can test for attributes of the animated element. Even if the element is always there, there must be some change in the attributes when the animation finishes. Since I don't know what kind of change this could be, I'm giving a generic example below.

The code uses HtmlFindExpression combined with WaitForElement. It is supposed to wait until an element with the given id ("ctl00_ContentPlaceHolder1_btnAccept_CD") is detected.

Manager mng = new Manager(false);
mng.Start();
mng.LaunchNewBrowser(BrowserType.InternetExplorer);
string url = "http://yoururl";
mng.ActiveBrowser.NavigateTo(url);
mng.ActiveBrowser.WaitForElement(
    new HtmlFindExpression("id=ctl00_ContentPlaceHolder1_btnAccept_CD"), 10000);

I hope this helps.