Suggestions for getting Selenium to play nice with Bootstrap modal fade?

Question

I'm working to live life the BDD way. I'm using Cucumber (with Selenium) and happen to be using Twitter Bootstrap modals in my application.

While running Cucumber tests, I was getting a "Selenium::WebDriver::Error::MoveTargetOutOfBoundsError" error. After much searching, debugging and general despair, I have concluded that it has to do with the use of the "fade" parameter in my Bootstrap modals. If I use "fade", the error is thrown:

<div class="modal hide fade" id="info-share-edit-modal" style="display: none;">
  .
  .
  .
</div>

If I remove "fade", then Selenium is full of happiness and my tests clear:

<div class="modal hide" id="info-share-edit-modal" style="display: none;">
  .
  .
  .
</div>

So, I am now removing "fade" from my various modals. But, this makes me sad because I like the fade effect.

Has anyone else experienced problems using Selenium with fade in Bootstrap modals? If so, is there some clever way of getting the two to work nicely together?

By the way (not sure if it matters), I'm Rails 3.2.3, Firefox 13.0.1, and Ubuntu 12.04LTS.

Answer 1

I did a quick test with inserting a WebDriverWait that takes a look at the opacity of the modal. It seems to work, but time will tell as (at least for me) it's an intermittent problem. Here's my implementation in Java.

//Ensure the modal is done animating
new WebDriverWait(driver, 5).until(
    new ExpectedCondition<Boolean>() {
        @Override
        public Boolean apply(WebDriver webDriver) {         
            return webDriver.findElement(By.id("videoModal")).getCssValue("opacity").equals("1");
        }
    }
);

Answer 2

I solved it this way (using c#). It is fast and hasn't failed once.

public static void WaitForModal(this RemoteWebDriver driver)
{
    using (driver.NoImplicitWait())
    {
        var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(30));
        wait.Until(d => d.FindElements(By.ClassName("modal-backdrop").Count == 0);
    }
}

NoImplicitWait is used to temporarily disable the driver implicit wait.

public static NoImplicitWait NoImplicitWait(this IWebDriver driver)
{
    return new NoImplicitWait(driver);
}

public sealed class NoImplicitWait : IDisposable
{
    private readonly IWebDriver _driver;

    public NoImplicitWait(IWebDriver driver)
    {
        _driver = driver;
        _driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(0));
    }

    public void Dispose()
    {
        _driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(30));
    }
}