how to trim extra spaces from an selected locator value and convert it to integer so assertion of greater than is performed over it in cypress?

Question

i have the grid which has html as follow

<div class="grid-container">
  <div class="ui three column grid">
          <div class="row">
              <div class="fourteen wide column">
                  <h3>Successfull</h3>
              </div>
        </div>
    <div class="row">
      <div class="column"></div>
      <div class="column"><h5>Before</h5></div>
      <div class="column"><h5>After</h5></div>
    </div>
    <div class="row">
        <div class="column">Status</div>
        <div class="column"><h5>3</h5></div>
        <div class="column"><h5>50</h5></div>
    </div>
    <div class="row">
      <div class="column">Result</div>
      <div class="column"><h5>loose</h5></div>
      <div class="column"><h5>win</h5></div>
    </div> </div> </div>

and look like this

i am trying to get data for status before and after and wanted to make the

assertion

as

3 is greater than zero
and 
69 is greater than 65

I don't want to use the net-child() in finding the locator as i am trying to perform it on cypress syntax only

my effort

but getting this error

cy.get(.three).contains('Status').parent().should('have.text',0);



 get  .three
    -contains status
    -parent
    -next
    -assert expected '<div.column>' to have text '0' but the text was ' 3 '

i.e. it is returning wide space before and after 3

when i tried to convert it into an integer to cater my requirement

cy.get(".three").contains('Status').parent().invoke('val').then(parseFloat).should('be.gte',0);

 get  .three
    -contains status
    -parent
    -next
    -assert expected NaN to be at least 0

also is there any better way of traversing through the required locator?

Does this answer your question [how to extract numeric value out of text](https://stackoverflow.com/questions/72812034/how-to-extract-numeric-value-out-of-text-along-with-converting-it-into-number-i) — SuchAnIgnorantThingToDo-UKR, Jul 21 '22 at 01:37

score 1 · Answer 1 · answered Jul 21 '22 at 13:52

If your text is always returning something like ' 3 ', then you can easily use .trim() to remove whitespace before converting the string to a number.

cy.get('.three').contains('Status').parent().then(($el) => {
  const stringVal = $el.text().trim(); // turns ' 3 ' into '3'
  const numVal = +stringVal; // turns '3' into 3
  // the above two lines could be combined into a single line
  expect(numVal).to.be.greaterThan(0);
});

score 0 · Answer 2 · answered Jul 21 '22 at 13:55

You can do something like this:

cy.get('.three')
  .contains('Status')
  .parent()
  .within(() => {

    //To validate as text
    cy.get('.column').eq(1).should('have.text', '3')

    //To validate as a number
    cy.get('.column')
      .eq(1)
      .invoke('text')
      .then((text) => +text.trim())
      .should('be.gte', 0)
  })

how to trim extra spaces from an selected locator value and convert it to integer so assertion of greater than is performed over it in cypress?

2 Answers2