赛普拉斯等待表加载答案

【问题标题】：Cypress wait for table to load赛普拉斯等待表加载
【发布时间】：2020-11-26 14:31:28
【问题描述】：

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

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

所以 cypress 一直等到存在具有给定值的行，但是我更改的值并不总是相同的，所以有没有办法做与上面完全相同的事情，但在表加载后选择第二行？（默认情况下，表格中没有项目）

我试过用这个：

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

但似乎 cypress 在检查第二个未通过测试的 tr 后加载表。

【问题讨论】：

标签： vue.js cypress e2e-testing

【解决方案1】：

见Cypress - how to wait for second of two elements to appear，可以加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()

【讨论】：

【解决方案2】：

赛普拉斯要求参数值在quotation marks 中，如果您确切知道您会找到的文本，我建议以下方法对我有用：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：