Cypress 捕捉小吃店

Question

已添加通用代码以区分 UI 中的不同 Snackbar 类型。 Span 添加了使用 key(mandatory) 和带有通知字符串的 variant(mandatory) 创建的 data-test 属性，例如${key}-${variant}-notification 即 xyz-error-notification。这个跨度围绕着文本，可用于自动化。那么，它会类似于 。 已添加 Snackbar 的类别。

Error Snackbar  dataTest ? dataTest : ${key}-${variant}-error
Info Snackbar   dataTest ? dataTest : ${key}-${variant}-notification
Success Snackbar    dataTest ? dataTest : ${key}-${variant}-success
Warning Snackbar    dataTest ? dataTest : ${key}-${variant}-warning

我必须在 cypres 自动化中创建一个函数，如果 UI 中会出现错误小吃栏，那么我必须测试用例失败，如果出现成功的小吃栏，那么我必须继续测试用例，否则我必须捕获信息和警告小吃栏，如果从一个页面转换到另一页面时不会出现任何类型的小吃栏，那么我必须记录消息，不存在小吃栏。

非常感谢任何帮助？

来自 cmets：

所以这是流程：

• if (level === 'error') 测试用例失败
• if (level === 'success') 检查剩余条件并继续测试用例
• if (level === 'warning') 捕获警告消息并记录下来
• if (level === 'info') 捕获信息消息并记录它
• 如果什么都不存在，则将消息记录为“不存在”

请帮我提供这个的确切代码

Answer 1

试试这样，用 jQuery 测试 span

cy.get('body').then($body => {
  const $span = $body.find(`span[data-test^="${key}-${variant}-"]`)
  if ($span.length === 0) {
    cy.log('Nothing found')
    return
  }
  if ($span.attr('data-test').split('-')[3] === 'error') {
    throw 'error'
  }
  if ($span.attr('data-test').split('-')[3] === 'success') {
    return  
  }
  cy.log($span.attr('data-test'))
})

如果要捕获可能出现也可能不出现的临时元素，请使用递归函数

function eatSnack(level = 0) {

  // Figure out how many times you want to check before giving up
  if (level === 10) {
    cy.log('Nothing found')
    return
  }

  cy.get('body').then($body => {
    const $span = $body.find(`span[data-test^="${key}-${variant}-"]`)

    if ($span.attr('data-test').split('-')[3] === 'error') {
      throw 'error'
    }
    if ($span.attr('data-test').split('-')[3] === 'success') {
      return  
    }
    if ($span.attr('data-test').split('-')[3] === 'warning') {
      cy.log($span.attr('data-test'))
      return
    }
    if ($span.attr('data-test').split('-')[3] === 'info') {
      cy.log($span.attr('data-test'))
      return
    }

    cy.wait(10)        // adjust this to suit SnackBar
    eatSnack(++level)  // try again
  }
})

eatSnack()  // start looking

Answer 2

我不介意看到更多的上下文，但从你给出的内容来看

const key = 'abc'
const variant = '123'
cy.get(`span[data-test^="${key}-${variant}-"]`)   // queries starting portion of attr
  .then($span => {
    const level = $span.attr('data-test').split('-')[3]  // what type is it?
    if (level === 'error') throw "Woops an error" // fail the test
    if (level === 'success') return // do nothing
    
    // otherwise log something
    cy.log($span.attr('data-test'))

由于snackbars 通常是暂时的，因此您必须小心地将代码放置在触发操作之后。