Selenium WebDriver - 使用cssSelector和nnth子元素查找元素

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元素的順序。所以當我使用硒IDE時，我會像下面一樣驗證它（使用第n個子概念）。

verifyText | css = .title：nth（0）|主頁
verifyText | css = .title：nth（1）|文章
verifyText | css = .title：nth（2）|事件
verifyText | css = .title：nth（3）|我的活動
verifyText | 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選擇器一樣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跨度是相同的：

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