FindElement - div 类中的嵌套跨度类答案

【问题标题】：FindElement - nested span class in div classFindElement - div 类中的嵌套跨度类
【发布时间】：2018-09-28 07:51:24
【问题描述】：

我需要识别“X”（取消）按钮。 HTML 看起来像这样：

<div class="ingredients-container-header">
<div class="ingredients-container-header-name">Ingredients:</div>
<div class="ingredients-container-header-close">
<span class="material-icons cancel-icon " style="color: rgba(0, 0, 0, 0.87); position: relative; font-size: 24px; display: inline-block; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;">cancel</span></div></div>

试过直接按 span 做，但不起作用（问题可能是，它不是唯一的（许多取消按钮具有相同的 span）

driver.FindElement(By.XPath("//span[@class ='material-icons cancel-icon')]"));

需要做的事情是通过类：“ingredients-container-header-close”，然后以某种方式“下降”到跨度。有人能告诉我怎么做吗？（1个父元素和少数子元素，选择那个子元素）

【问题讨论】：

标签： c# selenium selenium-webdriver

【解决方案1】：

您的表达必须是//div[@class='ingredients-container-header-close']/span[@class='material-icons cancel-icon ']。类名中有多余的空格。

【讨论】：

这样不行，有/没有额外空间都试过了
@lxi11 我更正了我的 xpath，但其他人得到了更正确的答案
是的，这个 Xpath 也是有效的。 +1
也可以正常工作！你们真是太棒了！谢谢！ :)

【解决方案2】：

你可以使用这个Xpath：

//div[text()='Ingredients:']/following-sibling::div/span[contains(@class,'cancel-icon')]

cssSelector 将是：

div[class^='ingredients-container']+div>span

试试这些！

【讨论】：

你试过这个 cssSelector 或 Xpath 吗？
@cruisespandey - 谢谢，xpath 工作正常：首先我们要寻找标题 div（寻找里面的文本）然后我们使用 /"following-siblings::div/ span[contains(@class, ....) - 我不明白，兄弟姐妹是同一级别的元素？还有“::”是什么意思？谢谢。
following-siblings 表示在当前节点之后的兄弟姐妹
是的，同级元素是同一级别的元素，但这里我们在 Xpath 中有前同级和后同级。
请参阅此链接以了解 Xpath 和关于 :: 的清晰度：w3schools.com/xml/xpath_axes.asp