Cypress: How to save a variable and use it later for comparison

Question

I have a div that has a value of 15,000 that can be retrieved by

cy.get('.population').invoke('text').then((numbers) =>{
      let people = parseInt(numbers.replaceAll(',',''))
      cy.wrap(people).as('population')
 })

However, I now need to get two other values in another div and then compare them to be sure they equal each other. This works, however, right after a successful assertion is throws this error cy.then() failed because you are mixing up async and sync code. In your callback function you invoked 1 or more cy commands but then returned a synchronous value. The value you synchronously returned was: {__flags: Object{5}}

Here is the entire code together.

cy.elem('population').invoke('text').then((num) =>{
        let totalResidents = parseInt(num.replaceAll(',',''))
        cy.wrap(totalResidents).as('population')
})
cy.get('@population').then((population) => { 
     cy.get(`div[col- 
     id=${columns.totalResidents}]`).find('span').find('div').then(($divs) => {
           const nums = [...$divs].map(div => div.innerText)
           const zcta1Pop = parseInt(nums[1].replaceAll(',',''))
           const zcta2Pop = parseInt(nums[2].replaceAll(',',''))
           const totalPop = zcta1Pop + zcta2Pop
     return cy.expect(population).to.eq(totalPop) //successful assertion 15000 = 15000 but then fails right after
})

The second pair of divs can be represented by

 <span>
    <div style="margin-left: 10px;">
      <div>7,000</div>
    </div>
 </span>
 <span>
    <div style="margin-left: 10px;">
      <div>8,000</div>
    </div>
 </span>

The weird this is that the assertion at the end is correct assert expected 15000 to equal 15000 but then throws the error. Does anyone know whats going on here?

Fody · Answer 1 · 2022-04-12T22:38:31.933

Unless you have a custom command, cy.expect()... is wrong syntax. It should just be expect()... - but you cannot return it.

You don't need to return anything from your last .then() because you've already done the assertion.

An alias is unnecessary if you use the value immediately after.

cy.elem('population').invoke('text')
  .then((num) =>{
    let totalResidents = parseInt(num.replaceAll(',',''))
    return cy.wrap(totalResidents)
  })
  .then(totalResidents1 => { 
    cy.get(`div[col-id="${columns.totalResidents}"]`)
      .find('span').find('div')
      .then(($divs) => {
        const nums = [...$divs].map(div => div.innerText)
        const zcta1Pop = parseInt(nums[1].replaceAll(',',''))
        const zcta2Pop = parseInt(nums[2].replaceAll(',',''))
        const totalResidents2 = zcta1Pop + zcta2Pop
        expect(totalResidents1).to.eq(totalResidents2)
      })
  })

Or with aliases

cy.elem('population').invoke('text')
  .then(num => parseInt(num.replaceAll(',','')))
  .as('totalResidents1')

cy.get(`div[col-id="${columns.totalResidents}"]`)
  .find('span').find('div')
  .then($divs => {
    const nums = [...$divs].map(div => div.innerText)
    const zcta1Pop = parseInt(nums[1].replaceAll(',',''))
    const zcta2Pop = parseInt(nums[2].replaceAll(',',''))
    const totalResidents2 = zcta1Pop + zcta2Pop
    return cy.wrap(totalResidents2)
  })
  .as('totalResidents2')

cy.get('@totalResidents1')then(totalResidents1 => {
  cy.get('@totalResidents2').then(totalResidents2 => {
    expect(totalResidents1).to.eq(totalResidents2)
  })
})

Cypress: How to save a variable and use it later for comparison

1 Answers1