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

Question

<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个子概念).

verifyText | css = .title:nth(0)| 首页
验证文本| css = .title:nth(1)| 帖子
验证文本| css = .title:nth(2)| 事件
verifyText | css = .title:nth(3)| 我的活动
验证文本| css = .title:nth(4)| 评估

但是当我在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

有谁可以帮助我.

Answer 1

您可以从生成CSS选择器ul一样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

达到范围也是一样的:

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

Answer 2

您是否需要CSS？如果没有，您也可以选择xpath，恕我直言“读”得更好/更清晰：

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