cypress - do操作，直到元素在屏幕上显示。

Question

我知道柏树在条件测试上不是很大，但来自selenium背景，我非常习惯于在我的测试中使用这种逻辑。

我正在测试一个KaiOS应用程序，它不是滚动，而是使用类似于kindle设备的页面翻转来使用户更容易阅读。

目前，由于KaiOS是基于firefox的，所以在计算机上使用该应用程序的唯一方法就是使用火狐。问题是，在柏树上运行测试时(即使在firefox上)，页面翻转并不像预期的那样工作，所以当我们翻转页面时，页面不会像在设备或firefox上那样转到相同的页面。

因此，由于我无法确定如何找到我正在寻找的元素，所以我需要一直翻转页面，查找它，然后与它交互。

我试过了一堆不同的事情都没有成功。

我所需要的相当简单：

1. 转到页面
2. 检查是否存在元素，如果不存在，则翻转页。一直翻页直到找到元素
3. 一旦它找到元素，就与它交互。

Answer 1

我已经在你提出的问题中回答过了，但我也会在这里编写解决方案，以帮助其他用户。

好吧，一步一步，你需要

• 转到页面

一个简单的

cy.visit('<your url>')

• 检查是否存在元素

最简单的方法是利用公开的Cypress.$ jQuery实例并自行检查元素是否存在。

cy.visit('<your url>')
cy.waitUntil(() => !!Cypress.$('#elementToBeChecked').length)

() => !!Cypress.$('#elementToBeChecked').length是waitUntil所期望的checkFunction，它返回布尔值，waitUntil重试它直到返回true。

• 检查是否存在元素，如果不存在，则翻转页。

cy.visit('<your url>')
cy.waitUntil(() => {
  if (!Cypress.$('#elementToBeChecked').length) {
    return cy.flipPage().then(() => false)
  } else {
    return true
  }
})

cy.flipPage().then(() => false对于确保che checkFunctin解析为false是有用的。waitUntil将调用checkFunction，直到它返回true为止。

• 一直翻页直到找到元素

完成

• 一旦它找到元素，就与它交互。

cy.visit('<your url>')
cy.waitUntil(() => {
  if (!Cypress.$('#elementToBeChecked').length) {
    return cy.flipPage().then(() => false)
  } else {
    return true
  }
})
cy.get('#elementToBeChecked').click()

如果您想要更详细地解释为什么像您这样的任务需要waitUntil，请查看这里。

希望它能帮上忙

Answer 2

尝试使用https://github.com/NoriSte/cypress-wait-until在页面上有条件地执行操作