Parse numbers

Imagine you need to confirm a number shown on the page. The DOM element always has text, thus to compare it as a number, we first need to convert it.

parseInt

<div>
  Total attendees
  <div id="people">30</div>
</div>

Total attendees

30

// get the element and grab its text using ".text()" jQuery method
cy.get('#people')
  .invoke('text')
  // tip: use an assertion to print the extracted text
  .should('be.a', 'string')
  // convert text to integer
  .then(parseInt)
  // tip: make sure the conversion is successful
  .should('be.a', 'number')
  // compare the converted number to the expected value
  .and('equal', 30)

Trim the text first

Sometimes the number is mixed with other text. You need to trim the text to get to the number part before parsing the integer.

<div id="group">
  Several (56) people were present.
</div>

Several (56) people were present.

// get the text of the element
cy.get('#group')
  .invoke('text')
  // find the part of the text with the number
  // for example, we can find the "(" and the ")" characters
  .then((s) => {
    const start = s.indexOf('(')
    const end = s.indexOf(')', start)
    return s.slice(start + 1, end)
  })
  // tip: use an assertion to print the extracted text
  .should('be.a', 'string')
  .then(parseInt)
  // tip: make sure the conversion is successful
  .should('be.a', 'number')
  .and('equal', 56)

parseFloat

If the element has a floating point value, parseInt would not parse it correctly. Instead use the parseFloat or Number functions to convert it.

<div id="price">Please pay <b>($ 75.15)</b> to the cashier</div>

Please pay ($ 75.15) to the cashier

// get the text of the element
// in this case, I try to select the smallest element
// with the text to make the parsing simpler
cy.get('#price b')
  .invoke('text')
  // find the part of the text with the number
  // for example, we can find the "($" and the ")" characters
  .then((s) => {
    const start = s.indexOf('($')
    const end = s.indexOf(')', start)
    return s.slice(start + 2, end)
  })
  // tip: use an assertion to print the extracted text
  .should('be.a', 'string')
  // convert the "75.15" to a float number
  .then(parseFloat)
  // tip: make sure the conversion is successful
  .should('be.a', 'number')
  // and compare it against the expected range
  .and('be.within', 70, 80)

For trimming the element text, I sometimes use a regular expression. For example, to find the above number inside the ($ ... ) text, we could use the following approach.

// get the text of the element
cy.get('#price')
  .invoke('text')
  // use String.match(a regular expression) method
  // to find the price text inside a longer text
  // (?<price>...) is a named capture group
  .invoke('match', /\(\$\s(?<price>\d+\.\d+)\)/)
  // make sure the parsing was successful
  .should('be.an', 'array')
  // from the result, grab the "groups.price" field
  // note: the cy.its command automatically retries
  // and would fail if the "price" capture group is not found
  .its('groups.price')
  .should('be.a', 'string')
  .then(parseFloat)
  // compare the converted number to the estimate
  // which is $74 +/- $2
  .should('be.closeTo', 74, 2)