如何使用Cypress获取表格所有行及每行的grid-content内容？

以下是几种在Cypress中获取表格每行对应grid-content记录的实用方案：

1. 遍历所有行逐一获取内容 #

通过each()方法遍历每一行，再定位该行内的grid-content元素提取内容：

cy.get('.grid-content-container .grid-row').each(($row) => {
  // 提取当前行的grid-content文本内容
  const rowContent = $row.find('.grid-content').text().trim();
  // 可根据需求添加断言或后续处理
  cy.wrap(rowContent).should('not.be.empty');
});

2. 批量获取所有grid-content的文本集合 #

直接定位所有grid-content元素，将其转为文本数组统一处理：

cy.get('.grid-content-container .grid-row .grid-content')
  .then(($contents) => {
    // 借助Lodash将jQuery元素集合转为文本数组
    const contentList = Cypress._.map($contents, ($el) => $el.textContent.trim());
    // 示例：断言内容数量与表格行数一致
    cy.get('.grid-content-container .grid-row').its('length').then(rowCount => {
      expect(contentList.length).to.eq(rowCount);
    });
  });

3. 获取指定行的grid-content内容 #

如果只需要某一行（比如第3行）的内容，用eq()指定索引（索引从0开始）：

cy.get('.grid-content-container .grid-row').eq(2)
  .find('.grid-content')
  .should('be.visible')
  .invoke('text')
  .then(content => {
    // 对该行内容进行后续操作，比如打印或断言
    console.log('第3行内容：', content);
  });

小贴士 #

• Cypress会自动等待元素加载，但若表格是异步渲染的，可配合.should('be.visible')确保元素就绪
• 如果grid-content内有嵌套元素，.text()会提取所有子元素的文本；若需特定子元素内容，可细化选择器（比如.grid-content .target-child）

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