Protractor - 通过子元素过滤时获取父元素的兄弟元素答案

【问题标题】：Protractor - get the sibling element of the parent element when filtered via child elementProtractor - 通过子元素过滤时获取父元素的兄弟元素
【发布时间】：2016-03-31 22:19:45
【问题描述】：

我正在进行量角器测试，其中有多个相同元素类型的标题，但仅在显示的文本上有所不同。要验证这些标题是否显示，可以使用 xpath 过滤器，例如

element(by.xpath('//div/div/div[@id="headingOne"]/div/h4/a[contains(text(),"Sample")]')

现在还有另一个验证，在过滤后的标题中，应该显示一个复选框，并且该复选框元素位于标题父级的兄弟元素中。代码如下：

<div class="panel-heading" role="tab" id="headingOne">
 <div class="inline">
  <h4 class="panel-title">
    <a>Sample</a>
  </h4>
 </div>
 <div class="inline-right">
  <input type="checkbox" class="">
 </div>
</div>

现在我在验证下一个元素是否存在时遇到问题，即复选框。我一直在 xpath 中使用 following-sibling 但没有用，因为它正在获取 <a> 元素的兄弟。

element(by.xpath('//div/div/div[@id="headingOne"]/div[contains(text(), "Sample")]/following-sibling::div'))

请注意，还有其他元素/标题具有相同的元素路径，这就是我想通过 div 内的“示例”文本过滤它的原因。

谢谢！

【问题讨论】：

标签： angularjs xpath jasmine protractor end-to-end

【解决方案1】：

如果您将引用直接子文本节点的text()替换为应该返回上下文节点的整个文本内容的.，则您尝试的XPath可以工作：

//div/div/div[@id="headingOne"]/div[contains(., "Sample")]/following-sibling::div

您可能还想在上述 XPath 之后添加 /input[@type="checkbox"] 以确保复选框存在于以下同级 div 中。

【讨论】：