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 选择器检查跨度元素的顺序。所以当我使用 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

您需要 css 吗？如果没有，你也可以选择 xpath，imho reads better/clearer:

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

Answer 2

您可以从 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 3

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

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

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

会select第二个div

Answer 4

我们可以这样写-

获取所有跨度文本-

首页
帖子
活动
我的Activity
评估
然后
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

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

Selenium WebDriver - Finding Elements using cssSelector and nth child

selenium

selenium-ide

css-selectors

selenium-webdriver