How to get text from two elements, convert them to a number and add them in cypress?

Question

I'm moving tests from protractor to cypress.

I have two elements like below. I want to get the number and add them and store them in a variable.

<span id="num-2">20</span>

In protractor I wrote it like below

var totalCount =
      parseInt(element(by.id('num-1')).getText()) +
      parseInt(element(by.id('num-2')).getText());

I can't figure out how to do it in Cypress.

Answer 1

You can achieve aliases/variables and get. The trick is that get, invoke, or similar are effectively async and you can't really effectively await cypress operations. Instead you can get the first number, parse it, get the second number, parse it, add the numbers and assert/expect:

const expectedTotal = 42;

// get element with id #num-1
cy.get('#num-1').then(($num1) => {
  // parse text to int/number
  const num1 = parseInt($num1.text());

  // get element id #num2
  cy.get('#num-2').then(($num2) => {
    // parse text to int/number
    const num2 = parseInt($num2.text());
    
    // expect/assert number total equal to some expected total
    expect(num1 + num2).toEqual(expectedTotal);
  });
});

Hopefully that helps!