cypress - 执行操作直到元素显示在屏幕上

Question

我知道Cypress 在条件测试方面并不擅长，但来自 selenium webdriver 的背景，我非常习惯在测试中使用这种逻辑。

我正在测试一个KaiOS 应用程序，它不使用滚动，而是使用类似于 Kindle 设备的页面翻转，以便用户更轻松地阅读。

目前，由于 KaiOS 基于 Firefox OS，因此在计算机上以与设备类似的方式使用该应用程序的唯一方法是使用 Firefox。问题是，在 cypress 上运行测试时（即使使用 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是checkFunction预期的waitUntil，它返回一个布尔值waitUntil并重试直到返回true。

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

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

这cy.flipPage().then(() => false对于确保 checheckFunctin决心很有用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像您这样的任务，请查看此处。

希望能帮助到你