Estoy tratando de validar el conjunto de títulos para un componente. A continuación se muestra mi fragmento de código de Cypress:
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') }) } }) })Pero recibo un mensaje de error: 'No se pueden leer las propiedades de undefined (leyendo 'invocar')'.
Funciona bien si lo pruebo con solo si bloque.
Cada vez que esté haciendo $el.get() , debe envolver $el antes de hacer .get() , porque cuando se obtiene $el de su cy.get() inicial, es un JQuery<HTMLElement> , y por lo tanto fuera de la cadena Cypress.
Además, una vez que envuelve $el , puede usar .find() para buscar dentro del elemento envuelto.
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') }) ...Puede acortarlo un poco con operadores jQuery.
$el.find(...) funciona ya que $el es un objeto jQuery.
También cambie .invoke('text') a .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') } })