I am trying to validate the set of titles for a component. Below is my Cypress code snippet:
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')
})
}
})
})
But I get an error message: 'Cannot read properties of undefined (reading 'invoke')'.
It works fine if I try it with only if block.
Each time that you are doing $el.get(), you should be wrapping the $el before doing the .get(), because when $el is yielded from your initial cy.get(), it is a JQuery<HTMLElement>, and thus out of the Cypress chain.
Additionally, once you wrap $el, you can use .find() to search within the wrapped element.
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')
})
...
You can shorten it a bit with jQuery operators.
$el.find(...) works since $el is a jQuery object.
Also change .invoke('text') to .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')
}
})