如何在Cypress.io测试中在表格<td>中显示数据？

Question

在 Cypress.io 的测试中，在应用筛选器后检查表格中显示的“数据”时，它会抛出“CypressError：Timed out retrying：Cannot read property 'eq' of undefined”的错误。 请问有人可以建议如何修复以下测试中的问题吗？ 表HTML图像如下所示。

describe('Filter Test', function() {
    it.only('Check if the records are filtered successfully', function() {
        cy.visit('http://www.seleniumeasy.com/test/table-search-filter-demo.html')          
        cy.get('button').contains('Filter').click()
        cy.get('input[placeholder="Username"]').type('jacobs')  
        cy.get('table').should(($tr) => {
        const $tds = $tr.find('td') // find all the tds
        expect($tds.cells.eq(0)).to.contain('jacobs')   
        })

    })      

})

- soccerway

---

你可以使用 console.log($tds) 来查看它是否包含 cells 对象吗？ - DarknessZX

@DarknessZX：是的，我可以看到表对象内部。 - soccerway

@DarknessZX：添加了控制台图像以供参考。 - soccerway

Answer 1

有多种方法可以实现这个目的，但在这种情况下，contains() 函数是最简单的方法：

cy.get('table').contains('td', 'jacobs');

此代码将获取 table 元素，并断言其中包含一个带有文本 jacobs 的 td 标签。

---

值得注意的是，contains() 也可以作为选择器使用，并且像典型的 Cypress 链式操作一样，您可以继续在其上进行链式操作，如下所示：

cy.get('table').contains('td', 'jacobs').should('be.visible');

cy.get('table').contains('td', 'jacobs').then(elem => {
    // Do something with this specific element...
});

// etc...

- Joshua Wade

---

今晚会尝试并回复。 - soccerway

@Joshua Wade - 你好，Joshua，有没有办法动态过滤掉 td 中的非零值？ - Prany

嗨@Prany，试试这个：cy.get（'.my-table'）.get（'td'）.each（elem => {}）;-Cypress将循环遍历每个td元素，并使用传递到elem的原始Javascript元素运行提供的lambda函数。现在，在花括号中，您可以只需执行此操作（或类似操作，请注意，此未经测试）：if（parseFloat（elem.textContent）！== 0）{/*元素不包含零*/} else {/*元素包含零*/} - Joshua Wade