# 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)