Selenium Web Driver is a terrific tool for automating User Acceptance Testing (UAT) of your front end web layer.  I don't have a ton of experience with this form of testing, but I've quickly learned to appreciate its usefulness.  Our team recently attempted to make a reliable set of UAT tests for a legacy application. We had a number of 3rd party social media dependencies and a less than ideal page architecture. The end goal was to have a simple test suite that was reliable enough to be automated with as few inconsistent fails as possible.  As with most things, this was easier said than done; especially when done after the fact (kudos to BDD/ATDD, I'll be employing this technique for greenfield projects).

One aspect in particular that took some thinking was how to use WebDriver to wait for a jQuery animation to complete.  There are several ways to skin this cat, but I chose to make use of a jQuery extension to the CSS specification known as :animated.  Using a WebDriverWait, I was able to detect when an animation was complete by executing some JavaScript.  Now, I know this isn't good practice with Web Driver, in fact the Web Driver FAQ answers the "How do I execute JavaScript directly?" as follows.

"We believe that most of the time there is a requirement to execute Javascript there is a failing in the tool being used: it hasn't emitted the correct events, has not interacted with a page correctly, or has failed to react when an XmlHttpRequest returns. We would rather fix Web Driver to work consistently and correctly than rely on testers working out which Javascript method to call." - Selenium Web Driver FAQ

However, it goes on to recognize that not having the capability to execute arbitrary JavaScript can be a limitation and proceeds to explain the usage of the IJavaScriptExecutor implementation of Web Driver. IMO, I had a case to use this functionality because at the time I had no other way to determine when an animation was fully complete (short of re-factoring the page itself).

Below is a snippet of a new WebDriverWait helper class that I've been using in my test suite. It includes a method called UntilAnimationIsDone. I use this after I trigger a page event that causes a series of animations so that I know the page is in the expected "ready" state and that I can continue.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public class Wait
{
    private const bool Debug = true;
    private const int ImplicitWaitInSeconds = 30;
 
    private readonly IWebDriver _driver;
 
    public Wait(IWebDriver webDriver)
    {
        _driver = webDriver;
    }
 
    public void Until(Func<IWebDriver, bool> waitCondition, int timeoutInSeconds = Constants.ImplicitWaitInSeconds)
    {
        var wait = new WebDriverWait(_driver, TimeSpan.FromSeconds(timeoutInSeconds));
        wait.Until(waitCondition);
    }
 
    public void UntilAnimationIsDone(string elementId, int timeoutInSeconds = ImplicitWaitInSeconds)
    {
        Until(driver =>
        {
            var javaScriptExecutor = (IJavaScriptExecutor)driver;
            var isAnimated = javaScriptExecutor
                .ExecuteScript(string.Format("return $('#{0}').is(':animated')", elementId))
                .ToString().ToLower();
 
            if (Debug)
                Console.WriteLine(string.Format("Element: '{0}' Is Animated: {1}", elementId, isAnimated));
 
            // return true when finished animating
            return !bool.Parse(isAnimated);
        }, timeoutInSeconds);
    }
}