通过唯一子项查找父元素，但单击另一个子项

Question

正在尝试找到正确的 xpath 选择器。元素只有 href 个唯一。是否可以通过 href="#">iphone X 文本和父 class class="card h-100" 找到元素。但是单击 <button class="btn btn-info">，它是父项 class 的另一个子项。

  <div class="card h-100">
    <div class="card-body">
      <h4 class="card-title">
        <a href="#">iphone X</a>
      </h4>
    </div>
    <div class="card-footer">
     <button class="btn btn-info"></button>
    </div>
  </div>

Answer 1

使用 querySelectorAll()

尝试下面的代码

(function() {

  var a = document.querySelectorAll('a[href="#"]');
  var result = [];
  a.forEach(function(el) {
    if (el.innerHTML == 'iphone X' && el.parentElement.parentElement.parentElement.className.includes('card h-100')) {
      result.push(el);
    }
  });

  console.log(result);
})();

<div class="card h-100">
  <div class="card-body">
    <h4 class="card-title">
      <a href="#">iphone X</a>
    </h4>
  </div>
  <div class="card-footer">
    <button class="btn btn-info"></button>
  </div>
</div>

<div class="card h-100">
  <div class="card-body">
    <h4 class="card-title">
      <a href="#">iphone XS</a>
    </h4>
  </div>
  <div class="card-footer">
    <button class="btn btn-info"></button>
  </div>
</div>

<div class="card h-200">
  <div class="card-body">
    <h4 class="card-title">
      <a href="#">iphone X</a>
    </h4>
  </div>
  <div class="card-footer">
    <button class="btn btn-info"></button>
  </div>
</div>

Answer 2

这是您要查找的 XPath 及其解释

//div[@class='card h-100'][.//a[.='iphone X']]//button
^ find a DIV
     ^ with this class
                          ^ that has a child A
                                ^ with text = 'iphone X'
                                              ^ once you find that DIV, find the child BUTTON

Answer 3

如果我没理解错的话，您想要单击下一个子 class 中对应于 'a' 且具有文本 'iphone X' 的按钮。为此，您可以使用以下 xpath：

//a[text()='iphone X']//ancestor::div//button[@class='btn btn-info']

希望对您有所帮助:)

Answer 4

要查找与文本 iphone X 关联的元素 <button class="btn btn-info">，其父节点为 class="card h-100"，您可以使用以下命令:

xpath:

//div[@class='card h-100']//a[text()='iphone X']//following::button[@class='btn btn-info']

通过唯一子项查找父元素，但单击另一个子项

Find parent element by unique child, but click on another child

javascript

css

selenium

xpath

protractor