Selenium ElementNotVisibleException for Bootstrap Popover

Question

I am writing some tests for my Java/Spring/Boostrap based website using Selenium 2.37.1 and Chrome Driver 2.7 (with Chrome 31.0.1650.63 on Ubuntu 13.10).

The test clicks on the Login text, and then attempts to enter the provided username and password into the form before clicking the submit button. I have broken apart the finding of the elements and calling sendKeys to determine where Selenium is following over (it's on username.sendKeys)

public void login(final String user) {
    webDriver.findElement(By.id("login")).click();
    final WebElement loginForm = webDriver.findElement(By.id("loginForm"));
    final WebElement username = loginForm.findElement(By.id("username"));
    username.sendKeys(user);
    final WebElement password = loginForm.findElement(By.id("password"));
    password.sendKeys(dslConstants.PASSWORD);
    loginForm.submit();
}

Username is found successfully, but when I run username.isDisplayed() when it is actually being displayed.

I am assuming this has something to do with Selenium not being able to handle Bootstrap popovers correctly, and wondering if anyone has any fixes for this?

Thanks in advance.

EDIT: loginForm.isDisplayed() also returns false when it is visible when debugging. I also tried adding a wait condition, which doesn't solve the situation either.

final WebDriverWait wait = new WebDriverWait(webDriver, TIME_OUT_IN_SECONDS);
wait.until(ExpectedConditions.visibilityOf(webDriver.findElement(By.id("username"))));

Edit2: Here is the HTML/JSTL aspects of the page.

<div class="navbar">
        <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <sec:authorize ifAnyGranted="ROLE_ANONYMOUS">
                <div class="hide" id="login-popover">
                    <form role="form" id="loginForm" method="post" action="j_spring_security_check">
                        <div class="control-group">
                            <label class="control-label" for="username">Username</label>
                            <div class="controls">
                                <input type="text" id="username" class="form-control" name="j_username" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="password">Password</label>
                            <div class="controls">
                                <input type="password" id="password" class="form-control" name="j_password" />
                            </div>
                        </div>
                        &nbsp;
                        <div class="control-group">
                            <div class="controls">
                                <button class="btn btn-primary" type="submit">Login</button>
                            </div>
                        </div>
                    </form>
                </div>
                <li><a href="#" id="login">Login</a></li>
                <li><a href="/accounts/register">Register</a></li>
            </sec:authorize>
        </ul>
    </div>

EDIT 3: This also occurs when using FireFox 25

Answer 1

I have managed to solve this problem. Whilst debugging and inspecting the webpage (using Chrome) I noticed that there are in fact two login forms.

I could get around this by declaring the login form html in another file (or within the Javascript that's executed on clicking the Login link). Either way, by performing webDriver.findElement(By.class("popover-content")) and then searching for the form within this solves my problem.

public void login(final String user) {
    webDriver.findElement(By.id("login")).click();
    final WebElement loginForm = webDriver.findElement(By.class("popover-content)).findElement(By.id("loginForm"));
    loginForm.findElement(By.id("username")).sendKeys(user);
    loginForm.findElement(By.id("password"))password.sendKeys(dslConstants.PASSWORD);
    loginForm.submit();
}

I suppose the lesson from this is that I review how libraries I use in my web application actually work!

Answer 2

Try moving to the popover element to make it visible before interacting with it. something like:

    WebElement element = webDriver.findElement(By.id("login-popover"));
    Actions actions = new Actions(driver);
    actions.moveToElement(element).build().perform();

and then do your wait sequence. If you have to click on the element to make it appear, then you could do it before build().