Selenium ElementNotVisibleException: Cannot click on element

Problem

I am using the Selenium WebDriver to click on a menu item which is not visible until you hover over a top level menu, and when I invoke the Click method on the IWebElement, an ElementNotVisibleException is thrown with the message of Cannot click on element.

The problem is that I have made the IWebElement visible by hovering over the top level menu. It is, in fact, absolutely visible, thus this exception should not be thrown. The Click method works just fine on other elements which are not hidden until the user hovers over the menu.

As an aside, here is the code I used to hover over the top menu:

var womensShoesMenu = this.webDriver.FindElement(By.CssSelector("a.topNavLink[href='/Womens-Shoe-Store']"));
var builder = new Actions(this.webDriver);
builder.MoveToElement(womensShoesMenu).Build().Perform();

I figured using the Wait code would fix the problem with the link not being visible, assuming the code is simply executing too quickly or something. The debugger shows that the web element is definitely visible, so, what is going? I can definitively say that it beats the hell out of me; for now, I’m chalking this up to a bug with Selenium WebDriver. Fortunately, however, I found a solution to the problem.

Solution

Instead of calling the Click method on the Selenium IWebElement object, I used JavaScript instead. This works like a champ, and so far, appears to be reliable.

var womensBoots = this.webDriver.FindElement(By.CssSelector("#topNavigation ul div.menuItem a[href='/Womens-Boots']"));
((IJavaScriptExecutor)this.webDriver).ExecuteScript("arguments[0].click();", womensBoots);

Updated Solution

I’m adding a second solution after posting this article. It turns out that the Click method of IWebElement works just fine in my scenario above; I simply wasn’t using the WebDriverWait class correctly. I really just needed to have the browser wait for 1 second after performing the hover on the top menu, and then all of the drivers I was testing (Firefox, Internet Explorer, and Chrome) worked great. Here is the updated code:

private static void DoWait(int milliseconds)
{
    var wait = new WebDriverWait(webDriver, TimeSpan.FromMilliseconds(milliseconds));
    var waitComplete = wait.Until<bool>(
        arg =>
            {
                System.Threading.Thread.Sleep(milliseconds);
                return true;
            });
}

var womensBoots = webDriver.FindElement(By.CssSelector("#topNavigation ul div.menuItem a[href='/Womens-Boots']"));
DoWait(1000);
womensBoots.Click();

////((IJavaScriptExecutor)webDriver).ExecuteScript("arguments[0].click();", womensBoots);

Discussion

I’m new to Selenium, only having started using it as a developer a few days ago, so it is very likely I’m simply doing this wrong and I honestly have no idea of the problem I’m encountering is a bug or not. I’ve read similar posts about this, so it seems to be a bug, but as I dig deeper into the system I’ll learn more. Since Selenium is open source, if I get the time, perhaps I’ll even go spelunking into the code to find out and maybe even attempt to fix it!

Credit
A huge thank you goes out to “James” for solving this problem on Stack Overflow.

I hope this helps someone!

Happy Coding,

~Tom Hundley
Elegant Software Solutions

One response to “Selenium ElementNotVisibleException: Cannot click on element

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s