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 tes

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

c# code

I had the same problem and this code is working for me since 2+ months, no more crash.

 public static void WaitForModal(this IWebDriver driver)
    {
        wait.Until<IWebDriver>((d) =>
        {
            if (driver.FindElements(By.ClassName("modal-backdrop")).Count == 0)
            {
                return driver;
            }
            return null;
        });
    }

It waits until it finds no more IWebElement that have a class of "modal-backdrop".

Answer 3

In a selenium test case when application opens the bootstrap modal, add a pause command to ask selenium to pause for one second before interacting with content of your modal:

Command: pause /
Target: 1000 /
Value: (leave empty)

Answer 4

Improving on user1965252's answer, this worked for me. Just replace the-modal-id with your modal div id.

new WebDriverWait(driver, TIME_OUT_IN_SECONDS).until(and(
        new ExpectedCondition<Boolean>() {
           @Override
           public Boolean apply(WebDriver webDriver) {
               return webDriver.findElement(id("the-modal-id"))
                       .getCssValue("opacity").equals("0");
           }
        },
        numberOfElementsToBe(cssSelector("div.modal-backdrop"), 0)
));

Answer 5

Put in a flag so that in the test environment it doesn't fade, but it does in every other environment.

Answer 6

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));
    }
}