Comparing text element with "%" sign like a number and seeing if a number is greaterThan 0 does not work

Question

describe('dropdown select', () => {
  it('open dropdown and check if 24hr rate is positive', () => {
    Cypress.on('uncaught:exception', (err, runnable) => {return false}) //it was throwing expections for me for unknown reason so I had to ignore it
    cy.visit('link')
    cy.get('[data-cy=accept-btn]').click() 
    cy.get('#currency-select').should('be.visible').click() 
    cy.get('[class=" css-zkvt1b-menu"]').should('be.visible').contains('EUR').click()
    cy.get('[class="Yq Zq"]').each((el) => {
        const text = el.text();
        expect(text).to.be.greaterThan(0);
    })

  });
})

I am getting error checking of the number is greaterThan 0. Adding a picture of the error below: NOTE: the numbers are different in screenshots because they were taken few minutes apart.

Chrome code:

The string "-4.88%" apparently is not a number, and indeed, calling, say, `Number("-4.88%")` produces `NaN`. I suggest using `parseFloat("-4.88%")`, which yields `-4.88`. — Heretic Monkey, Oct 11 '21 at 12:16
Does this answer your question? [How to convert a string to an integer in JavaScript?](https://stackoverflow.com/questions/1133770/how-to-convert-a-string-to-an-integer-in-javascript) — Heretic Monkey, Oct 11 '21 at 12:25

Alapan Das · Accepted Answer · 2021-10-11T12:44:00.743

You have to extract the number and remove the extra strings and then convert it into a number and then apply assertions.

cy.visit('https://spectrocoin.com/en/bitcoin-price-rates.html')
Cypress.on('uncaught:exception', (err, runnable) => {
  return false
})
cy.get('[data-cy=accept-btn]').click()
cy.get('#currency-select').should('be.visible').click()
cy.get('[class=" css-zkvt1b-menu"]')
  .should('be.visible')
  .contains('EUR')
  .click()
cy.get('[data-cy="rates"] tr').each((el) => {
  cy.wrap(el).within(() => {
    cy.get('td')
      .eq(2)
      .invoke('text')
      .then((text) => {
        const last24HourVal = +text.slice(13, -1)
        expect(last24HourVal).to.be.greaterThan(0)
      })
  })
})

The above test will fail for values which are less than 0. To check whether the number can be positive or negative you have to use a conditional statement and check for the value to be greater or less than 0 and then apply assertion. Something like:

cy.visit('https://spectrocoin.com/en/bitcoin-price-rates.html')
Cypress.on('uncaught:exception', (err, runnable) => {
  return false
})
cy.get('[data-cy=accept-btn]').click()
cy.get('#currency-select').should('be.visible').click()
cy.get('[class=" css-zkvt1b-menu"]')
  .should('be.visible')
  .contains('EUR')
  .click()
cy.get('[data-cy="rates"] tr').each((el) => {
  cy.wrap(el).within(() => {
    cy.get('td')
      .eq(2)
      .invoke('text')
      .then((text) => {
        const last24HourVal = +text.slice(13, -1)
        if (last24HourVal > 0) {
          expect(last24HourVal).to.be.greaterThan(0)
        } else {
          expect(last24HourVal).to.be.lessThan(0)
        }
      })
  })
})

Comparing text element with "%" sign like a number and seeing if a number is greaterThan 0 does not work

1 Answers1