Question

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

  <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

如果我理解正确，您想单击下一个子类中与具有文本“ iphone X”的“ a”相对应的按钮。为此，您可以使用以下xpath：

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

希望它会有所帮助：）

Answer 3

这是您正在寻找的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 4

要查找与文本 iphone X 相关联的元素<button class="btn btn-info">，该元素的父节点为class="card h-100"，可以使用以下Locator Strategy：

xpath：

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

按唯一的孩子查找父元素，但单击另一个孩子

4 个答案: