java Selenium Webdriver - 如何在 CSS 菜单中选择元素

Selenium Webdriver - How to select element in CSS Menu

提问by user2550796

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

我不知道如何单击 CSS 下拉菜单上的菜单项。菜单的结构如下所示：

    <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)

我已经用下面的代码试过了，但它不起作用：（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();

这段代码选择了我的第四个元素，所以“karriere”很好 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

但不幸的是我无法选择它的第二个元素 -> 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?

错误是什么？

回答by sotix

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.

这将找到具有类navMenu的元素，然后选择第一个子元素，即 html < a> 元素（也称为您的链接）并单击它。

回答by Naveen Kulkarni

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

CSS选择器不支持跨平台浏览器，你必须使用xpath。

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

如果您想选择“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"

如果你想选择“Wie ich Sie berate”

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