Cypress读取表格全部行并提取多div标签指定值的实现问题

实现代码 #

写法1：先定位目标单元格再遍历对应行 #

cy.get('[data-cy="projectList"]')
  // 限定在表格范围内查找项目名称单元格，用find而非get避免全局匹配
  .find('[data-cy="project.name"]')
  // 获取每个单元格对应的表格行
  .parent('tr')
  // 遍历所有行
  .each((currentRow, index) => {
    // 把原生DOM对象包装为Cypress可操作对象
    cy.wrap(currentRow).within(() => {
      // 提取第一个div内的项目名称
      cy.get('div').eq(0).invoke('text').then(projectName => {
        // trim清除文本前后的空白字符
        const formattedName = projectName.trim()
        cy.log(`第${index + 1}行项目名称：${formattedName}`)
      })

      // 如需提取第二个div的时间区间，取消下方注释即可
      // cy.get('div').eq(1).invoke('text').then(dateRange => {
      //   const formattedDate = dateRange.trim()
      //   cy.log(`第${index + 1}行项目时间：${formattedDate}`)
      // })
    })
  })

写法2：先遍历所有行再定位目标单元格 #

适合需要同时处理同一行其他列数据的场景：

cy.get('[data-cy="projectList"]')
  // 查找表格内所有行
  .find('tr')
  .each((currentRow, index) => {
    cy.wrap(currentRow).within(() => {
      // 仅在当前行内查找项目名称单元格
      cy.get('[data-cy="project.name"]').find('div').eq(0).invoke('text').then(projectName => {
        cy.log(`第${index + 1}行项目名称：${projectName.trim()}`)
      })
    })
  })

收集所有提取值供后续使用示例 #

// 定义空数组存储提取结果
const projectNameList = []
cy.get('[data-cy="projectList"]')
  .find('[data-cy="project.name"]')
  .parent('tr')
  .each((currentRow) => {
    cy.wrap(currentRow).within(() => {
      cy.get('div').eq(0).invoke('text').then(projectName => {
        projectNameList.push(projectName.trim())
      })
    })
  }).then(() => {
    // 遍历完成后可在该回调内使用提取到的全部数据
    cy.log('所有项目名称列表：', projectNameList)
    // 也可以直接做断言，比如判断项目总数是否符合预期
    // expect(projectNameList.length).to.eq(10)
  })

注意要点 #

• 嵌套查找不要连续使用cy.get()：cy.get()默认从全局DOM树查找元素，不会继承前序的查找范围，嵌套查找请使用find()方法限定范围
• 遍历回调中的元素需要包装：.each()方法拿到的是原生DOM对象，必须用cy.wrap()包装后才能调用Cypress的元素操作方法
• 提取文本建议加trim()：HTML节点内往往存在多余的换行、空格、占位符空白，用trim()可以清除无用的空白字符，避免后续断言或逻辑判断出错

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