JavaScript array show by index don't work

Question

I have an array and I want to display it item by item to check an amount. The moment I give console.log to the array it shows me the elements and when I try to display it as an index it gives me undefined.

let localFinishPrice = []

    cy.get(':nth-child(1) > :nth-child(2) > .bold').invoke("text").then((text)=>{
        let localPrice = parseFloat(text.substring(1))
        localFinishPrice.push(localPrice)
    })


    cy.get('#totals_table > tbody > :nth-child(2) > :nth-child(2)').invoke("text").then((text)=>{
        let localPrice = parseFloat(text.substring(1))
        localFinishPrice.push(localPrice)

    })

    cy.get(':nth-child(3) > :nth-child(2) > .bold').invoke("text").then((text) => {
        let localPrice = parseFloat(text.substring(1))
        localFinishPrice.push(localPrice)

    })

    if(localFinishPrice[0] + localFinishPrice[1] == localFinishPrice[2])
        cy.log("Finish price is ok")
    else
        cy.log("Finish price isn't ok")

Console log from array

Console log from array by index

Welcome to Stack Overflow! Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Please post code, error messages, markup, and other textual information **as text**, not as a *picture* of text. Why: http://meta.stackoverflow.com/q/285551/157247 — T.J. Crowder, Jul 22 '21 at 08:29
**Duplicate of [the usual `console.log` deferred evaluation question](http://stackoverflow.com/questions/38660832/element-children-has-elements-but-returns-empty-htmlcollection).** (All: I'd previously voted as "needs details" so can't dupehammer.) Cezar, the array is empty as of when you're calling `console.log`. **Later**, entries are added to it, which is why you see them when you expand the array in the console later. See the linked question's answers for details. We've all been tricked by this at one time or another. :-) — T.J. Crowder, Jul 22 '21 at 08:31

score 1 · Accepted Answer · answered Jul 22 '21 at 08:58

The problem is that all the cy.get() commands are queued, and the if statment runs too soon, before the queue starts running.

You have to use .then() to correctly sequence the ops

let localFinishPrice = []

cy.get(':nth-child(1) > :nth-child(2) > .bold')                   // queued 1st
  .invoke("text")
  .then(text => {
    let localPrice = parseFloat(text.substring(1))
    localFinishPrice.push(localPrice)
  })

cy.get('#totals_table > tbody > :nth-child(2) > :nth-child(2)')   // queued 2nd
  .invoke("text")
  .then(text => {
    let localPrice = parseFloat(text.substring(1))
    localFinishPrice.push(localPrice)
  })

cy.get(':nth-child(3) > :nth-child(2) > .bold')                   // queued 3rd
  .invoke("text")  
  .then(text => {
    let localPrice = parseFloat(text.substring(1))
    localFinishPrice.push(localPrice)
  })
  .then(() => {                                                   // queued last

    if(localFinishPrice[0] + localFinishPrice[1] == localFinishPrice[2])
      cy.log("Finish price is ok")
    else
      cy.log("Finish price isn't ok")

  })

JavaScript array show by index don't work

1 Answers1