Cypress 等待 table 加载

Question

我正在尝试测试并单击在输入组件中键入文本后出现的 table 行。 table 在延迟后加载（在从外部 API 获得响应后）。什么是使用等待直到加载特定元素的超时：

cy.get('[data-cy=searchBar]').type("Name")
cy.get('[data-cy=dataTable]').get('tbody').contains("td", "Result of name search",  {timeout: 15000}).click()

所以赛普拉斯一直等到有给定值的行，但我更改的值并不总是相同的，所以有没有办法做与上面完全相同的事情，但在 table 之后选择第二行负载？（默认情况下 table 中没有项目）

我试过用这个：

cy.get('[data-cy=searchBar]').type("Name")
cy.get('[data-cy=dataTable]').get('tbody').get("tr").eq(2, {timeout: 15000}).click()

但似乎赛普拉斯在检查了第二个未通过测试的 tr 后加载了 table。

Answer 1

Cypress 要求参数值在 quotation marks 中，如果您确切知道您会发现的文本，我建议采用以下对我有用的方法：

cy.get('[data-cy="searchBar"]').type("Name")
cy.contains('[data-cy="dataTable"] td', "Result of name search")
    .should('be.visible')
    .click()

Answer 2

确保 cypress 等待超时的一种方法是在 cy.get() 内添加 tr 的第 n 个位置，例如：

cy.get('[data-cy=dataTable] > tbody > tr:nth-child(3)', {timeout: 15000}).click()

Answer 3

见，可以加一个should()检查行长

cy.get('[data-cy=dataTable]')
  .find('tbody tr')              // ignore thead rows
  .should('have.length', 3)      // retries above cy.find() until true
  .eq(2)
  .click()

我不确定您是要单击行 (tr) 还是单元格 (td)。查看您的第一个示例（有效的示例），它是您要单击的单元格。

因此您可以添加单元格选择器

cy.get('[data-cy=dataTable]')
  .find('tbody tr')              // ignore thead rows
  .should('have.length', 3)      // retries above cy.find() until true
  .eq(2)                         // take 3rd row
  .find('td').eq(5)              // take 6th cell
  .click()

Cypress 等待 table 加载

Cypress wait for table to load

vue.js

e2e-testing

cypress