Selenium WebDriver - 使用 cssSelector 和第 n 个子元素查找元素答案

【问题标题】：Selenium WebDriver - Finding Elements using cssSelector and nth childSelenium WebDriver - 使用 cssSelector 和第 n 个子元素查找元素
【发布时间】：2016-02-29 13:58:38
【问题描述】：

<ul>
<li class="active">
    <a href="#">
    <i class="fa fa-home"></i><br>
    <span class="title">Home</span>
    </a>
</li>

<li>
    <a href="#">
    <i class="fa fa-rss-square"></i><br>
    <span class="title">Posts</span>
    </a>
</li>

<li>
    <a href="#">
    <i class="fa fa-calendar"></i><br>
    <span class="title">Events</span>
    </a>
</li>

<li>
    <a href="#">
    <i class="fa fa-bar-chart-o"></i><br>
    <span class="title">My Activity</span>
    </a>
</li>

<li>
    <a href="#">
    <i class="fa fa-edit"></i><br>
    <span class="title">Assessments</span>
    </a>
</li>
</ul>

我想定位相应的 span 元素。我想使用 css 选择器检查 span 元素的顺序。所以当我使用 selenium IDE 时，我会像下面那样验证它（使用第 n 个子概念）。

但是当我在 Selenium WebDriver 中做同样的事情时，我无法按照我使用 Selenium IDE 所做的顺序来定位元素。

以下是我在 WebDriver 中使用的代码，它可以正常工作。

driver.findElement(By.cssSelector(".title:nth(0)")); // to locate the "Home" element

driver.findElement(By.cssSelector(".title:nth-of-type(0)")); // to locate the "Home" element

driver.findElement(By.cssSelector(".title:nth-child(0)")); // to locate the "Home" element

谁能帮帮我。

【问题讨论】：

标签： selenium selenium-webdriver css-selectors selenium-ide

【解决方案1】：

您可以从 ul 生成 css-selector，就像 ul > li:nth-child(1) 一样。见下文：

driver.findElement(By.cssSelector("ul > li:nth-child(1)")); >> home
driver.findElement(By.cssSelector("ul > li:nth-child(2)")); >> posts
driver.findElement(By.cssSelector("ul > li:nth-child(3)")); >> events

reachin span 也是一样的：

driver.findElement(By.cssSelector("ul > li:nth-child(1) > a > span")); >> home

【讨论】：

OP 要求 CSS 选择器。
@JeffC 是 CSS 选择器
对不起...我不知道我当时在想什么。

【解决方案2】：

您是否特别需要 css？如果没有，您也可以选择 xpath，恕我直言阅读更好/更清晰：

driver.findElement(By.xpath("(//span[@class='title'])[0]")); // home
driver.findElement(By.xpath("(//span[@class='title'])[1]")); // posts
...

【讨论】：

Css 选择器比 xpath 快。

【解决方案3】：

<body>
        <div class=parent>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>

如果你已经有了父元素，只需要找到第n个子元素

parent.find_element_by_css_selector('div:nth-child(2)')

会选择第二个 div

【讨论】：

【解决方案4】：

我们可以这样写-

获取所有跨度文本，如-

首页
帖子
活动
我的活动
评估
然后
driver.findElements(By.cssSelector("ul>li>a span:nth-child(3)"));
和
要获取单个span text，您需要在nth-child(index) 方法中传递索引位置。
driver.findElement(By.cssSelector("ul>li:nth-child(1)>a span")).getText();//Home driver.findElement(By.cssSelector("ul>li:nth-child(2)>a span")).getText();//Posts driver.findElement(By.cssSelector("ul>li:nth-child(3)>a span")).getText();//Events driver.findElement(By.cssSelector("ul>li:nth-child(4)>a span")).getText();//My Activity driver.findElement(By.cssSelector("ul>li:nth-child(5)>a span")).getText();//Assessments

更多详情请访问-CSS Selector in Details

【讨论】：