Selenium Webdriver - How to select element in CSS Menu

Question

I do not know how to click a menu item on a CSS dropdown menu. The structure of the menu looks like this:

    <ul id="nav" class="clearfix" role="navigation">
    <li>
    <li class="navMenu navActive">
              <a href="/test.user/beratung/wie-ich-sie-unterstuetze/">Allfinanzberatung</a>
         <ul class="subMenu" role="navigation">
             <li class=" subMenuPoint">
                <div class="left">
                       <a class="right" href="/test.user/beratung/wie-ich-sie-unterstuetze/">Wie ich Sie unterstütze</a>    <- I want to Select this Menu Point
                </div>
              </li>
         </ul>
    <li class=" subMenuPoint">
    <li class=" subMenuPoint">
    <li class="last subMenuPoint">
    </ul>

I've tried it with the following code but it doesn't work: (Eclipse Junit)

WebElement elems=driver.findElement(By.linkText("Wie ich Sie unterstütze"));//Menu Item
WebElement elems1=driver.findElement(By.xpath("//li[@nav']/a"));//Menu
Actions builder = new Actions(driver); 
Actions hoverOverRegistrar = builder.moveToElement(elems1);
hoverOverRegistrar.perform();
elems.click();//at last Menu Item Click

---

First of all, thank you all,

but unfortunately it still does not work properly. here is again the code for the menu.

<ul id="nav" class="clearfix" role="navigation">
  <li class="navMenu">
    <a href="/test.user/beratung/wie-ich-sie-unterstuetze/">beratung</a>
    <ul class="subMenu" role="navigation">
      <li class=" subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/beratung/wie-ich-sie-unterstuetze/">Wie ich Sie unterstütze</a>
        </div>
      </li>
      <li class=" subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/beratung/wie-ich-sie-berate/">Wie ich Sie berate</a>
        </div>
      </li>
      <li class=" subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/beratung/produktwelt/">Produktwelt</a>
        </div>
      </li>
      <li class=" subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/beratung/auszeichnungen/">Auszeichnungen</a>
        </div>
      </li>
      <li class=" subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/beratung/premium-partner/">Premium-Partner</a>
        </div>
      </li>
      <li class="last subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/beratung/ihr-allfinanzcheck/">Ihr Allfinanzcheck</a>
        </div>
      </li>
    </ul>
  </li>
  <li>
    <img alt="" src="/test.user/javax.faces.resource/pic_bg_main_menu_separator.png.xhtml?ln=images/frontend/menus" />
  </li>
  <li class="navMenu">
    <a href="/test.user/karriere/ihre-perspektiven/">Karriere</a>
    <ul class="subMenu" role="navigation">
      <li class=" subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/karriere/ihre-perspektiven/">Ihre Perspektiven</a>
        </div>
      </li>
      <li class=" subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/karriere/ihr-neuer-beruf/">Ihr neuer Beruf</a>
        </div>
      </li>
      <li class=" subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/karriere/ihr-karrierefahrplan/">Ihr Karrierefahrplan</a>
        </div>
      </li>
      <li class=" subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/karriere/ihr-karrierecheck/">Ihr Karrierecheck</a>
        </div>
      </li>
      <li class=" subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/karriere/was-andere-sagen/">Was andere sagen</a>
        </div>
      </li>
      <li class=" subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/karriere/auszeichnungen/">Auszeichnungen</a>
        </div>
      </li>
      <li class=" subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/karriere/freie-stellen/">Freie Stellen</a>
        </div>
      </li>
      <li class="last subMenuPoint">
        <div class="left">
          <a class="right" href="/test.user/karriere/im-falschen-film/">Führen Sie selbst Regie</a>
        </div>
      </li>
    </ul>
  </li>
</ul>

This code selects me the fourth element so "karriere" thats good driver.findElement(By.cssSelector("#nav > li:nth-child(4) a")).click();

But unfortunately I could not select the second element of it -> Karriere -> Ihr neuer Beruf

I try this but it dosnt work

driver.findElement(By.cssSelector("#nav > li:nth-child(4) li:nth-child(2) a")).click();

What is the error?

Answer 1

Css selector doesnot support cross platform browsers, you have to use xpath.

if you want to select "Wie ich Sie unterstütze"

then use

element= driver.findelement(By.xpath("//ul[@class='clearfix']/li/ul/li[1]/div/a"));
element.click();

if you want to select "Wie ich Sie berate"

element= driver.findelement(By.xpath("//ul[@class='clearfix']/li/ul/li[1]/div/a"));
element.click();

Answer 2

Try

driver.findElement(By.cssSelector(".navMenu a")).click();

This finds the elements with class navMenu, then selects the first child that is an html <a> element (aka your link) and clicks it.