如何在Cypress中获取表格每行的第三个<td>元素？

首先纠正你一个错误：cy.get("#row")[0]这种写法不符合Cypress的使用规范，Cypress命令返回的是链式对象（Chainer），不是原生DOM元素数组，直接用数组索引取值后没法再调用cy.get()。下面是几种可行的实现方式：

• 直接用CSS选择器定位
  利用CSS的:nth-child()伪类，直接选中每行的第三个<td>元素，这是最简洁的写法：

  // 获取所有行的第三个<td>
  cy.get('#row td:nth-child(3)')
    .each(($td) => {
      // 遍历每个匹配的<td>，获取内容
      const content = $td.text()
      console.log(content)
    })
  

  注：:nth-child(3)是从1开始计数，正好对应每行的第三个元素。

• 遍历每行后定位第三个
  如果需要对每行单独处理，可以先获取所有行，再遍历每行并找到对应的：

  cy.get('#row').each(($row) => {
    // 对当前行，找到第三个<td>（eq(2)是因为索引从0开始）
    cy.wrap($row).find('td').eq(2)
      .invoke('text')
      .then((text) => {
        // 处理获取到的内容
        console.log(text)
      })
  })
  

  这里用cy.wrap($row)把原生DOM行元素包装成Cypress链式对象，才能继续调用Cypress的命令。

• 获取单行的第三个
  如果只需要某一行的第三个，可以用.eq()指定行的索引：

  // 获取第一行的第三个<td>（索引0对应第一行）
  cy.get('#row').eq(0).find('td').eq(2)
    .invoke('text')
    .then((text) => {
      console.log(text)
    })
  

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