Cypress：定位嵌套span下的纯文本并实现匹配点击

问题 #

在如下HTML DOM结构中，需要获取文本“Hello World 1”“Hello World 2”“Hello World 3”。尝试获取所有class为class1的span元素并调用text()方法，但未得到目标文本。现需实现迭代这些文本，与传入函数的文本对比，找到对应的span元素并点击。

DOM结构 #

<div>
  <span class="class1">
     <span class="class2">
       "Text1"
     </span>
     "Hello World 1"
  </span>
  <span class="class1">
     <span class="class2">
       "Text2"
     </span>
     "Hello World 2"
  </span>
  <span class="class1">
     <span class="class2">
       "Text3"
     </span>
     "Hello World 3"
  </span>
</div>

解决方案 #

问题原因 #

直接调用text()会把class1元素下所有子节点的文本拼接在一起（比如返回"Text1" "Hello World 1"），无法单独提取目标的“Hello World”文本。需要针对性提取class1元素下的直接文本节点，排除子元素的文本内容。

方案1：原生JavaScript实现 #

遍历所有class1的span元素，提取每个元素的直接文本节点，清理多余空格和引号后与目标文本对比，匹配成功则触发点击。

function findAndClickTargetText(targetText) {
  const class1Spans = document.querySelectorAll('.class1');
  
  class1Spans.forEach(span => {
    // 筛选出当前span下的直接文本节点
    const directTextNodes = Array.from(span.childNodes).filter(node => node.nodeType === Node.TEXT_NODE);
    // 拼接文本并清理格式
    const cleanedText = directTextNodes.map(node => node.textContent.trim()).join('').replace(/"/g, '');
    
    if (cleanedText === targetText) {
      span.click();
      return; // 找到目标后停止遍历
    }
  });
}

// 调用示例：点击包含"Hello World 2"的span
findAndClickTargetText("Hello World 2");

方案2：jQuery实现 #

利用contents()方法获取所有子节点，筛选文本节点后处理内容，再对比匹配。

function findAndClickTargetText(targetText) {
  $('.class1').each(function() {
    const cleanedText = $(this).contents()
      .filter(function() {
        return this.nodeType === Node.TEXT_NODE;
      })
      .text()
      .trim()
      .replace(/"/g, '');
    
    if (cleanedText === targetText) {
      $(this).click();
      return false; // 终止循环
    }
  });
}

// 调用示例
findAndClickTargetText("Hello World 1");

内容的提问来源于stack exchange，提问作者Shashidhar Yamsani