在 Cypress 中使用 if else 和 hasClass 语句进行验证

Question

我正在尝试验证组件的标题集。下面是我的赛普拉斯代码片段：

it('Validate the titles of all the tiles', () => {
    cy.get('.bms-scoreboard__game-tile')
      .each(($el) => {
        if($el.hasClass('bms-scoreboard__game-tile--cancelled')) {
            $el.get('.bms-scoreboard__game-tile-status--cancelled')
               .invoke('text')
               .then((text) => {
                  expect(text).equals('Cancelled')
               })
        } else if($el.hasClass('bms-scoreboard__game-tile--pre-game')) {
            $el.get('.bms-scoreboard__game-time--en')
               .invoke('text')
               .then((text) => {
                    const gameTime = text.split(" ").pop()
                    expect(['AM', 'PM']).to.include(gameTime)
               })
        } else if($el.hasClass('bms-scoreboard__game-tile--final')) {
            $el.get('.bms-scoreboard__game-time--en')
               .invoke('text')
               .then((text) => {
                   const finalTitle = text.trim()
                   expect(finalTitle).to.be.oneOf(['Final','Final (OT)'])
               })
        } else if($el.hasClass('bms-scoreboard__game-tile--ongoing')) {
            $el.get('.bms-scoreboard__game-time--en')
               .invoke('text')
               .then((text) => {
                   const ongoingTitle = text.trim()
                   expect(ongoingTitle).equals('Ongoing')
               })
        }
    })
})

但我收到一条错误消息：“无法读取未定义的属性（读取 'invoke'）”。

如果我尝试使用 only if 块，它工作正常。

Answer 1

每次你做 $el.get()，你应该在做 .get() 之前包装 $el，因为当 $el 是从你的初始 cy.get()，它是一个JQuery<HTMLElement>，因此在Cypress链之外。

此外，一旦包裹 $el，您可以使用 .find() 在包裹的元素内搜索。

cy.get('.bms-scoreboard__game-tile')
      .each(($el) => {
        if($el.hasClass('bms-scoreboard__game-tile--cancelled')) {
             cy.wrap($el)
               .find('.bms-scoreboard__game-tile-status--cancelled')
               .invoke('text')
               .then((text) => {
                  expect(text).equals('Cancelled')
               })
...

Answer 2

您可以使用 jQuery 运算符将其缩短一点。

$el.find(...) 有效，因为 $el 是一个 jQuery 对象。

同时将 .invoke('text') 更改为 .text()。

cy.get('.bms-scoreboard__game-tile')
  .each(($el) => {

    if ($el.hasClass('bms-scoreboard__game-tile--cancelled')) {

      // can work with jQuery operators here
      const text = $el.find('.bms-scoreboard__game-tile-status--cancelled').text()
      expect(text).equals('Cancelled')
    }

    if ($el.hasClass('bms-scoreboard__game-tile--pre-game')) {
      const text = $el.find('.bms-scoreboard__game-time--en').text()
      const gameTime = text.split(" ").pop()
      expect(['AM', 'PM']).to.include(gameTime)
    }

    if ($el.hasClass('bms-scoreboard__game-tile--final')) {
      const text = $el.find('.bms-scoreboard__game-time--en').text()
      const finalTitle = text.trim()
      expect(finalTitle).to.be.oneOf(['Final','Final (OT)'])
    }

    if ($el.hasClass('bms-scoreboard__game-tile--ongoing')) {
      const text = $el.find('.bms-scoreboard__game-time--en').text()
      const ongoingTitle = text.trim()
      expect(ongoingTitle).equals('Ongoing')
    }
  })

在 Cypress 中使用 if else 和 hasClass 语句进行验证

Validations using if else and hasClass statements in Cypress

javascript

vue.js

cypress