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.

I have encountered the same error, using the `reveal.js` from Foundation Zurb and thanks to your suggestion I got it to work by removing the `fade` animation. But I did not find a real solution. So interested to hear how others solved this. — nathanvda, Sep 12 '12 at 22:20

user1965252 · Answer 1 · 2013-01-10T02:04:12.627

8

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

edited Jan 10 '13 at 02:04

answered Jan 10 '13 at 01:54

user1965252

81
1
3

This [ticket](https://github.com/seleniumhq/selenium-google-code-issue-archive/issues/2766) for the Chrome driver suggest that you have it right. In so many words, it says that an element has to stop animating before you can click on it. – jpaugh Jun 17 '16 at 14:50

magnusarinell · Answer 2 · 2016-03-14T09:34:01.760

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

score 0 · Answer 3 · answered Dec 15 '12 at 04:27

0

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

answered Dec 15 '12 at 04:27

nicholaides

19,211
12
66
82

Happy Bird · Answer 4 · 2017-02-28T10:06:21.893

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".

score 0 · Answer 5 · answered Jul 25 '17 at 23:18

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

score 0 · Answer 6 · answered Mar 15 '19 at 20:34

What I generally do is assert against some content that should be visible on the modal (or not visible when it is fading out):

expect(page).to have_content('My Modal Header')
expect(page).to have_no_content('My Modal Header')

It's important to use .to have_no_content and not .not_to have_content, as have_no_content will wait for a period for the thing to be true.

In a pinch, you can also check for modal CSS selectors. Bootstrap adds an in class when the modal is visible:

expect(page).to have_selector('.modal.in')
expect(page).to have_no_selector('.modal.in')

score -1 · Answer 7 · edited Feb 22 '13 at 08:12

-1

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)

edited Feb 22 '13 at 08:12

John Dvorak

26,799
13
69
83

answered Feb 22 '13 at 07:53

ramin

157
15

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

7 Answers7

Linked