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>

我想找到相应的跨度元素。我想使用 css 选择器检查 span 元素的顺序。所以当我使用selenium IDE时，我会像下面这样验证它(使用第n个子概念)。

验证文本| css=.title:第n(0) |首页
验证文本 | css=.title:nth(1) | css=.title:nth(1) |帖子
验证文本 | css=.title:nth(2) | css=.title:nth(2) |事件
验证文本 | css=.title:nth(3) | css=.title:nth(3) |我的事件
验证文本 | css=.title:nth(4) | 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

您可以从 ul 生成 css-selector，例如 home 的 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