Selenium WebDriver - 使用 cssSelector 和第 n 个子元素查找元素
Posted
技术标签:
【中文标题】Selenium WebDriver - 使用 cssSelector 和第 n 个子元素查找元素【英文标题】：Selenium WebDriver - Finding Elements using cssSelector and nth child 【发布时间】：2016-02-29 13:58:38 【问题描述】：<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 个子概念）。
验证文本 | css=.title:nth(0) |主页 验证文本 | css=.title:nth(1) |帖子 验证文本 | css=.title:nth(2) |活动 验证文本 | 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
谁能帮帮我。
【问题讨论】：
【参考方案1】：您可以从 ul 生成 css-selector，就像 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 span 也是一样的：
driver.findElement(By.cssSelector("ul > li:nth-child(1) > a > span")); >> home
【讨论】：
OP 要求 CSS 选择器。 @JeffC 是 CSS 选择器 对不起...我不知道我当时在想什么。【参考方案2】：您是否特别需要 css？如果没有，您也可以选择 xpath，恕我直言 阅读 更好/更清晰：
driver.findElement(By.xpath("(//span[@class='title'])[0]")); // home
driver.findElement(By.xpath("(//span[@class='title'])[1]")); // posts
...
【讨论】：
Css 选择器比 xpath 快。【参考方案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
【讨论】：
【参考方案4】：我们可以这样写-
获取所有跨度文本，如-
首页 帖子 活动 我的活动 评估然后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 个子元素查找元素的主要内容，如果未能解决你的问题，请参考以下文章
如何使用C＃中的Selenium Webdriver使用Chrome浏览器的Cookie？
我们如何使用Selenium Webdriver C＃从URL获取特定值？