Selenium Web Driver returns Selector not visible

Question

I have a HTML page that looks like this. I have to click on a menu dropdown and click on its 6th item.

<li class="open">
    <a href="#" class="dropdown-toggle ">
        <i><img src="/cs/images/icon_01.jpg" alt=""></i>
        <span class="menu-text"> User Account Management </span>

        <b class="arrow fa fa-angle-down"></b>
    </a>
    <b class="arrow"></b>

    <!-- Account Analysis start -->
    <ul class="submenu nav-show active" id="useraccount" style="display: block;">
        <li class="">
            <a href="/cs/servlets/UserServlet?action=newAccountAnalysis&amp;isLogged=true">
                <i class="menu-icon fa fa-caret-right"></i>
                <span class="menu-text">Account Analysis</span>
            </a>
            <b class="arrow"></b>
        </li>
        <!-- Account Analysis end -->
        <!-- Delete User Account start -->
        <li class="">
            <a href="/cs/servlets/UserServlet?action=selectUserAccountToDelete&amp;isLogged=true">
                <i class="menu-icon fa fa-caret-right"></i>
                <span class="menu-text">Delete User Account</span>
            </a>

            <b class="arrow"></b>
        </li>
        <!-- Delete User Account end-->   
        <!-- Unlock/Re-activate User Account     start -->     
        <li class="">
            <a href="/cs/servlets/UserServlet?action=selectUserAccountToUnlock&amp;isLogged=true">
                <i class="menu-icon fa fa-caret-right"></i>
                <span class="menu-text">Unlock/Re-activate User Account</span>
            </a>

            <b class="arrow"></b>
        </li>
        <!-- Unlock/Re-activate User Account end -->
        <!-- De-activate User Account     start -->     
        <li class="">
            <a href="/cs/servlets/UserServlet?action=selectUserAccountToDeactivate&amp;isLogged=true">
                <i class="menu-icon fa fa-caret-right"></i>
                <span class="menu-text">De-activate User Account</span>
            </a>

            <b class="arrow"></b>
        </li>
        <!-- De-activate User Account end -->
        <!-- Update User Profile   start -->     
        <li class="">
            <a href="/cs/jsp/user/rsdUpdateUser.jsp">
                <i class="menu-icon fa fa-caret-right"></i>
                <span class="menu-text">Update User Account</span>
            </a>

            <b class="arrow"></b>
        </li>
        <!-- Update User Profile end -->
        <!-- Search RSD User start -->    
        <li class="">
            <a href="/cs/servlets/UserServlet?action=searchRsdUser&amp;isLogged=true">
                <i class="menu-icon fa fa-caret-right"></i>
                <span class="menu-text">Search RSD User</span>
            </a>

            <b class="arrow"></b>
        </li>
        <!-- Search RSD User end -->
    </ul>
</li>

I need to select the item "search RSD user" and for this I decided to use find element by xpath and I wrote the following xpath.

driver.findElement(By.xpath("//*[@id=\"useraccount\"]/li[6]/a")).click();

However I get the following

error.org.openqa.selenium.ElementNotVisibleException: element not visible

I verified if my path is correct by testing the xpath from chrome's developer tools and path works fine however it does not work on webdriver.

Answer 1

You can use explicit wait to make sure the element is visible before clicking on it

WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[@id=\"useraccount\"]/li[6]/a")));
element.click();