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个子概念）。

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

也达到跨度是相同的：

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

Answer 2

你真的需要css吗？如果没有，你也可以去xpath，imho“读”更好/更清楚：

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

Answer 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

Answer 4

我们可以这样写-

要获取所有跨度文本，如-

首页
帖子
事件
我的活动
评估
然后
driver.findElements(By.cssSelector("ul>li>a span:nth-child(3)"));
和
要获取单独的跨度文本，则需要以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

Selenium WebDriver - 使用cssSelector和第n个子

4 个答案: