如何在表格中选择元素的特定同级节点？Cypress问题求助

问题描述 #

我已定位到表格的中间单元格，能够使用next()方法获取下一个单元格的文本，但当尝试使用parent()方法时，得到的是包含三个单元格的整行文本。以下是我编写的Cypress代码，恳请协助解决。

cy.get('[name="courses"] > tbody >tr >td:nth-child(2)').each((e1, index) => {
  const course = e1.text()
  
  if (course.includes('Python')) {
    cy.get('[name="courses"] > tbody >tr >td:nth-child(2)').eq(index).parent()
        .then((price) => {
      const courseprice = price.text()
      // expect(courseprice).to.be.equal('25')
      cy.log(courseprice)
    })
  }
})

界面截图：

解决方案 #

你用parent()拿到整行是正常行为，因为单元格<td>的父元素就是表格行<tr>。如果想精准获取Python对应的价格单元格，推荐以下两种优化方式：

方式一：直接用next()获取相邻价格单元格

既然你已经验证next()可以获取下一个单元格，直接在当前找到的Python单元格上调用即可，无需重复定位元素：

cy.get('[name="courses"] > tbody > tr > td:nth-child(2)').each((e1) => {
  const course = e1.text().trim()
  
  if (course.includes('Python')) {
    cy.wrap(e1).next() // 获取当前单元格的下一个兄弟单元格（价格列）
      .then((priceCell) => {
        const courseprice = priceCell.text().trim()
        expect(courseprice).to.be.equal('25')
        cy.log(courseprice)
      })
  }
})

方式二：通过父行定位指定列

如果需要基于整行做更多操作，可以先获取父行，再定位到价格列：

cy.get('[name="courses"] > tbody > tr > td:nth-child(2)').each((e1) => {
  const course = e1.text().trim()
  
  if (course.includes('Python')) {
    cy.wrap(e1).parent() // 获取当前单元格所在的行
      .find('td:nth-child(3)') // 定位到该行的第三列（价格列）
      .then((priceCell) => {
        const courseprice = priceCell.text().trim()
        expect(courseprice).to.be.equal('25')
        cy.log(courseprice)
      })
  }
})

关键优化点 #

• 避免冗余定位：循环内不要重复调用cy.get()，用cy.wrap(e1)直接包裹当前遍历到的元素，提升性能和代码简洁度。
• 文本去空格：添加.trim()处理单元格文本，避免前后空格导致断言失败。

内容的提问来源于stack exchange，提问作者Mr.Prasad J