Cypress-Do操作，直到元素显示在屏幕上 [英] cypress - do action until element shows on screen

问题描述

我知道Cypress is not big on conditional testing，但是来自Selenium Webdriver背景，我非常习惯在我的测试中使用这种逻辑。

我正在测试KaiOS app，它使用类似于Kindle设备的翻页来代替滚动，从而使用户更容易阅读。

目前，由于KaiOS是基于Firefox操作系统的，因此在电脑上以类似于设备的方式使用该应用程序的唯一方式就是使用Firefox。问题是，在Cypress(即使使用Firefox)上运行测试时翻页不能按预期工作，因此当我们翻页时，它不会转到与设备或Firefox上相同的页面。

因此，由于我无法确定如何找到要查找的元素，我需要不断翻页并查找它，然后与其交互。

我已尝试a bunch of different things without success。

我需要的相当简单：

1. 转到页面
2. 检查元素是否存在，如果不存在，则翻页。继续翻页，直到找到元素
3. 找到元素后，与其交互

推荐答案

我已经在issues you raised中回复了，但我也会在这里写解决方案，以帮助其他用户。

好的，一步一步地，您需要

• 转到页面

一个简单的

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对于确保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来执行像您这样的任务，请查看here。

希望对😊有所帮助

这篇关于Cypress-Do操作，直到元素显示在屏幕上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！