javascript 当同一个元素包含不同的文本时,有什么方法可以验证元素包含文本而不导致测试失败?

yh2wf1be  于 2023-03-11  发布在  Java
关注(0)|答案(3)|浏览(127)

我有一个scnearios,其中一个表上的元素从一个文本,例如'staging..'更改为一个日期,例如今天的日期'10/03/2023'。它不会自动更改,所以你必须点击应用按钮,看看它是否更改,它需要大约30 / 40秒的时间来更改。我想每8秒通过单击“应用"按钮检查一次,该列是否从”分期“更改为今天的日期。
所以我实现了如下代码-

在每8秒点击一次Apply按钮方面,代码工作正常。但是,由于Assert-cy.get('td').eq(1).contains(Staging...)更改,代码失败。
有没有什么方法可以避免Assert并检查此条件,使其不会失败?
非常感谢!

xoshrz7s

xoshrz7s1#

您可以结合使用递归和生成的JQuery元素来实现这一点。

Cypress.Commands.add('isElementUpdated', (selector, retry = 0) => {
  // We'll always check if it contains 'Staging...'
  cy.get(selector).first().within(() => {
    // Yield the element that may or may not contain 'Staging...'
    cy.get('td').eq(1).then(($el) => {
      // Check if element contains 'Staging...'
      // If retry is at the maximum, we won't run this and instead will just validate the date
      if ($el.text().includes('Staging...' && retry < 10) {
        cy.wait(8000);
        cy.get('ApplyButton').click({ force: true });
        cy.isElementUpdated(selector, retry + 1);
      }
    }
  });
  cy.get(selector)
    .should('be.visible')
    .first()
    .within(() => {
      cy.get('td').eq(1).should('contain', todaysDate);
    });
});
jqjz2hbq

jqjz2hbq2#

我将使用cypress-recurse来处理Cypress中的递归。
API有点棘手,总结如下

  • 第一个参数只是一个选择器,它不能有像.contains()这样的隐式Assert,否则递归将在第一次迭代时失败
  • 第二个参数是需要为真的Assert
  • else代码可以进入可选的post回调
recurse(
  () => cy.get(selector).first().find('td').eq(1),   // this part is just selecting,
                                                      // no assertion here

  ($td) => $td.text() !== 'Staging...',               // assertion here, 
                                                      // recurses if fails

  // after recursion run the post function
  {
    postLastValue: true,                              // $td after staging is passed
                                                      // into post: as value

    post: ({ value, success }) => {                   
      cy.wrap(value).should('contain', todayDate)     // confirm text after change
    }
  }
})

如果反转逻辑,可以移除post

cy.get(selector).first().find('td').first().should('contain', 'Staging...')

recurse(
  () => cy.get(selector).first().find('td').eq(1),  
  ($td) => $td.text() === todayDate,                 // repeat until true
)

可复制示例

在本地服务器上运行此HTML

<table>
  <tbody>
    <tr>
      <td>First column</td>
      <td>Staging...</td>
    </tr>
  </tbody>
</table>
<script>
  setTimeout(() => {
    const td = document.querySelector('td')
    td.innerText = '...Finished'
  },2000)
</script>

这是(类似的)测试

cy.get('tr').first().find('td').eq(1)
  .should('contain', 'Staging...')

recurse(
  () => cy.get('tr').first().find('td').eq(1),  
  ($td) => $td.text() === '...Finished',               
)

这是日志

u0sqgete

u0sqgete3#

如果你不想测试在cy.contains()上失败,你可以集成条件测试:

cy.get(selector).first().then(
    ($selector) => {
    if ($selector.text() === "Something 1") {
    // Do everything you want here
}
else if {$selector.text() === "Something 2"} {
    // Do everything you want here
}
else {
    // Do everything you want here
}
}

相关问题