Cypress有条件地测试元素是否存在，并重试

Question

我阅读了关于Cypress条件测试的文档中的注意事项，但由于某些原因，我需要将其应用于特定的测试。

我有一个函数可以做到这一点，但由于该函数中缺少重试，有些选择器无法工作。

如何在条件测试中实现重试并避免不稳定的测试？

这有可能吗，还是一件事抵消了另一件事？

export function elementExists(selector: string): boolean {
  try {
    return Cypress.$(selector).length > 0;
  } catch (error) {
    return false;
}

Answer 1

；标准"；测试元素存在性的方法非常简单，但不会返回true/false。如果找不到元素，则测试失败。

cy.get(selector).should('exist')

在内部，.should()会重试元素，直到命令超时结束，然后测试失败。

如果使函数递归，则可以执行相同的操作，但返回true/false而不是失败。

function elementExists(selector, attempt = 0) {
  const interval = 100;  // 100ms between tries
  if (attempt * interval > Cypress.config('defaultCommandTimeout')) {
    cy.log(selector, 'not found')
    return cy.wrap(false, {log:false})      
  }
  return cy.get('body', {log:false}).then(($body) => {
    const element = $body.find(selector)
    if (element.length) {
      cy.log(selector, 'found')
      return cy.wrap(true, {log:false}) 
    } else {
      cy.wait(interval, {log:false})  
      return elementExists(selector, ++attempt)
    }
  })
}
elementExists(selector).then(exists => {
  if (exists) {
    ...
  }
})

Answer 2

现在使用cypr-if包更容易了。

但是重试是异步实现的，所以您必须返回一个Chainable。

export function elementExists(selector: string): Chainable<boolean> {
  return cy.get(selector)
    .if('exist')
    .then(true)
    .else()
    .then(false)
}
elementExists('span#123').then((result: boolean) => 
  if (result) {
    ...
  }
})

上面使用了完整的API，可读性很强，但这也应该适用于你的

export function elementExists(selector: string): Chainable<JQuery<HTMLElement>|undefined> {
  return cy.get(selector).if()
}
elementExists('span#123').then((result: JQuery<HTMLElement>|undefined) => 
  if(result.length) {
    ...
  }
})