title: Cant click a Bootstrap dropdown-menu via Java/Selenium
body: <p>I am newbie at Selenium and am trying to test a bootstrap menu with it. </p>
  
  <p>I am trying to click on a specific row in a dropdown-menu but get 'no such element'. </p>
  
  <pre><code>import org.junit.Test;
  import org.openqa.selenium.By;
  import org.openqa.selenium.WebDriver;
  import org.openqa.selenium.WebElement;
  import org.openqa.selenium.firefox.FirefoxDriver;
  import org.openqa.selenium.interactions.Actions;
  
  import java.util.concurrent.TimeUnit;
  
  
  public class Foo  {
  
  
      @Test
      public void tryToClick() throws Exception {
          final WebDriver driver =
                  new FirefoxDriver();
          driver.manage().timeouts().implicitlyWait(2, TimeUnit.SECONDS);
          driver.get("file:///tmp/foo.html");
  
          WebElement dropdownToggle = driver.findElement(By.xpath("id('dropdown-toggle-id')"));
  
          Actions cursor = new Actions(driver);
          cursor.moveToElement(dropdownToggle);
          cursor.click();
          cursor.perform();
  
          Thread.sleep(1000);
          WebElement weh = driver.findElement(By.id("id('id-b')"));
          // Now I get ...
          // org.openqa.selenium.NoSuchElementException: Unable to locate element: {"method":"id","selector":"id('id-b')"}
          // Caused by: org.openqa.selenium.NoSuchElementException: Unable to locate element: {"method":"id","selector":"id('id-b')"}
  
          Actions cursor2 = new Actions(driver);    
          cursor2.moveToElement(weh);
          cursor2.click();
  
      }
  
  }
  </code></pre>
  
  <p>A example page to show problem is here :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;title&gt;Bootstrap 3 Skeleton - jsFiddle demo&lt;/title&gt;
    &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="/css/normalize.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="/css/result-light.css"&gt;
        &lt;script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;style type='text/css'&gt;
      @import url('http://getbootstrap.com/dist/css/bootstrap.css');
    &lt;/style&gt;
  &lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
  $(window).load(function(){
  });//]]&gt;  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" id="dropdown-toggle-id" data-toggle="dropdown"&gt;
              My Menu&lt;b class="caret"&gt;&lt;/b&gt;
            &lt;/a&gt;
      &lt;ul class="dropdown-menu" id="dropdown-menu-id"&gt;
          &lt;li&gt;&lt;a href="#" id="id-a"&gt; &lt;span class="fa fa-lg fa-user"&gt;&lt;/span&gt;AA&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="id-b"&gt;&lt;span class="fa fa-lg fa-cog"&gt;&lt;/span&gt;BB&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>With JQuery I can do this which seems okay:
  <code>$("#dropdown-toggle-id").click()</code> and
  <code>$("#id-b").click()</code></p>