Cypress遍历相同ID元素时，如何获取单个元素文本而非全部文本？

DevOps 小满

2026-7-28

问题：遍历元素获取单个文本而非拼接结果

我需要遍历一组div，获取每个div内对应的文本，但当前代码返回所有文本的拼接结果。以下是我的代码：

HTML代码

<ul>
<div id='some_id'><span id='day'>Mon</span></div>
<div id='some_id'><span id='day'>Tue</span></div>
<div id='some_id'><span id='day'>Wed</span></div>
<div id='some_id'><span id='day'>Thu</span></div>
</ul>

尝试的Cypress代码

第一次尝试获取文本，返回拼接结果：

cy.get('#day')
  .invoke('text')
  .then(($label) => {
      const day = $label;
  });

返回结果：

day = MonTueWedThu

第二次尝试遍历div，但未生效：

cy.get('#some_id').each( ($row) => {
  cy.wrap($row)
       .find('#day')
       .invoke('text')
       .then(($label) => {
           const day = $label;
        });
});

解决方案

1. 修正HTML的ID重复问题

HTML规范中ID必须是唯一的，重复ID会导致DOM选择器行为异常，这是核心问题。先把ID替换为class：

<ul>
<div class='some_class'><span class='day'>Mon</span></div>
<div class='some_class'><span class='day'>Tue</span></div>
<div class='some_class'><span class='day'>Wed</span></div>
<div class='some_class'><span class='day'>Thu</span></div>
</ul>

2. 正确的Cypress遍历代码

使用class选择器，遍历每个div并获取对应span的文本：

// 方式1：逐个处理每个文本
cy.get('.some_class').each(($row) => {
  cy.wrap($row)
    .find('.day')
    .invoke('text')
    .then(dayText => {
      // 这里可以对单个文本做处理，比如打印或断言
      console.log(dayText); // 会依次输出Mon、Tue、Wed、Thu
    });
});

// 方式2：收集所有文本到数组
cy.get('.day')
  .then($spans => {
    const days = Array.from($spans).map(span => span.textContent);
    console.log(days); // 输出 ["Mon", "Tue", "Wed", "Thu"]
  });