javascript - 如何获取元素嵌套项

Question

friend 们!几天前，我开始使用 Cypress 进行自动化测试学习。我在获取元素时遇到问题。

例如，我提供了这个 HTML 布局:

第一个区 block

<div class="class_0">
  <div class="class_1"></div>
  <div class="class_2">
    <div class="label_0">
      <div class="label_1">Some text 1</div>
    </div>
  </div>
  <div class="class_3">
    <div class="tooltip_0"></div>
    <div class="tooltip_1">
      <form>
        <button>Button</button>
      </form>
    </div>
    <div class="tooltip_2"></div>
  </div>
</div>

第二 block

<div class="class_0">
  <div class="class_1"></div>
  <div class="class_2">
    <div class="label_0">
      <div class="label_1">Some text 2</div>
    </div>
  </div>
  <div class="class_3">
    <div class="tooltip_0"></div>
    <div class="tooltip_1">
      <form>
        <button>Button</button>
      </form>
    </div>
    <div class="tooltip_2"></div>
  </div>
</div>

我想点击按钮，但只能找到<div class="label_1">Some text 1</div> 。我使用这段代码:

 cy.get('.label_1').contains('Some text 1').parents().find('button').click()

或者这个:

cy.get('.label_1').contains('Some text 1').parent(). ... .parent().find('button').click()

但是我有自己的解决方案，但是计算这个是有问题的:<div class="class_0"> block 。

Answer 1

您可以迭代搜索具有按钮子级的父级。如果最终找到按钮，请单击它。

这是一个递归函数，用于定位具有按钮子级的父级。

function findCousin(node, childSelector) {
  while (node != null & node.length > 0 && node.find(childSelector).length < 1) {
    node = node.parent();
  }
  return node ? node.find(childSelector) : null;
}

编辑: 所以，看起来 Cypress 在幕后使用了 jQuery。我创建了一个简单的填充程序来模拟您现有的功能而不改变它。

// *** IGNORE: BEGIN SHIM ***
$.fn.findByContentText = function(text) {
  return this.contents().filter((i, c) => $(c).text().trim() == text.trim());
};
class CyElement {
  constructor(selector) { this.ref = $(selector); }
  contains(text) { return this.ref.findByContentText(text); }
  parent() { return new CyElement(this.ref.parent()); }
  find(selector) { return new CyElement($(this.ref.find())); }
  click() { this.ref.trigger('click'); }
}
const cy = {};
cy.get = (selector) => new CyElement(selector);
// *** IGNORE: END SHIM ***

let target, button;

target = cy.get('.label_1').contains('Some text 1');
button = findCousin(target, 'button');
if (button != null) {
  button.click();
}

target = cy.get('.label_1').contains('Some text 2');
button = findCousin(target, 'button');
if (button != null) {
  button.click();
}

function findCousin(node, childSelector) {
  while (node != null & node.length > 0 && node.find(childSelector).length < 1) {
    node = node.parent();
  }
  return node ? node.find(childSelector) : null;
}

function handleClickEvent(button) {
  console.log(`Clicked on ${button.textContent}`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class_0">
  <div class="class_1"></div>
  <div class="class_2">
    <div class="label_0">
      <div class="label_1">Some text 1</div>
    </div>
  </div>
  <div class="class_3">
    <div class="tooltip_0"></div>
    <div class="tooltip_1">
      <form>
        <button onclick="handleClickEvent(this); return false;">Button 1</button>
      </form>
    </div>
    <div class="tooltip_2"></div>
  </div>
</div>

<div class="class_0">
  <div class="class_1"></div>
  <div class="class_2">
    <div class="label_0">
      <div class="label_1">Some text 2</div>
    </div>
  </div>
  <div class="class_3">
    <div class="tooltip_0"></div>
    <div class="tooltip_1">
      <form>
        <button onclick="handleClickEvent(this); return false;">Button 2</button>
      </form>
    </div>
    <div class="tooltip_2"></div>
  </div>
</div>

这是纯 jQuery 版本

// *** IGNORE: BEGIN SHIM ***
(($) => {
  $.fn.findByContent = function(text) {
    return this.contents().filter((i, c) => $(c).text().trim() == text.trim());
  };
  $.fn.cousin = function(childSelector) {
    let node = this;
    while (node != null & node.length > 0 && node.find(childSelector).length < 1) {
      node = node.parent();
    }
    return node ? node.find(childSelector) : null;
  }
})(jQuery);

$('button').on('click', (e) => {
  console.log(`Clicked on ${$(e.target).text()}`);
  e.preventDefault();
})

let button1 = $('.label_1').findByContent('Some text 1').cousin('button');
if (button1 != null) {
  button1.click();
}

let button2 = $('.label_1').findByContent('Some text 2').cousin('button');
if (button2 != null) {
  button2.click();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class_0">
  <div class="class_1"></div>
  <div class="class_2">
    <div class="label_0">
      <div class="label_1">Some text 1</div>
    </div>
  </div>
  <div class="class_3">
    <div class="tooltip_0"></div>
    <div class="tooltip_1">
      <form>
        <button>Button 1</button>
      </form>
    </div>
    <div class="tooltip_2"></div>
  </div>
</div>

<div class="class_0">
  <div class="class_1"></div>
  <div class="class_2">
    <div class="label_0">
      <div class="label_1">Some text 2</div>
    </div>
  </div>
  <div class="class_3">
    <div class="tooltip_0"></div>
    <div class="tooltip_1">
      <form>
        <button>Button 2</button>
      </form>
    </div>
    <div class="tooltip_2"></div>
  </div>
</div>