How to perform Arithmetic Operations for the values fetched from the elements

[karthikcamarakanti-eaton]

I was trying to get the width of the card using computed style and I am getting a string of '281.23 px' as result. from the result I replaced px with empty string and made the value '281.23'. Now I want to convert it to number. so I used value.as(Number). But I have two values that fetched similarly and I want to perform a subraction and additon of those two values but how can I perform it can you suggest something here?

[jan-molak]

While #2420 will make it easier, you can already accomplish what you're after by writing a custom function producing a question that performs your desired computation:

import { Answerable, Question } from '@serenity-js/core'

const sum = (augend: Answerable<number>, addend: Answerable<number>) => 
  Question.about('sum', async actor => {
    const augendValue = await actor.answer(augend);
    const addendValue = await actor.answer(addend);
    
    return augendValue + addendValue;
  })
  
const difference = (minuend: Answerable<number>, subtrahend: Answerable<number>) => 
  Question.about('difference', async actor => {
    const minuendValue = await actor.answer(minuend);
    const subtrahendVAlue = await actor.answer(subtrahend);
    
    return minuendValue - subtrahendVAlue;
  })

Then, you can use such arithmetic functions in your scenario:

import { describe, it } from '@serenity-js/playwright-test';
import { isLessThan } from '@serenity-js/assertions';

describe('My feature', () => {

  it('performs a computation', async ({ actor }) => {
  
    await actor.attemptsTo(
      Ensure.that(
        difference(
          ComputedStyle.called('width').of(firstPageElement).as(Number.parseFloat),
          ComputedStyle.called('width').of(secondPageElement).as(Number.parseFloat),
        ),      
        isLessThan(50),
      )
    );
  });
});

Please also note that all the Serenity/JS expectations
accept Answerable parameters, so if you simply want to ensure that one numeric value is less or greater than the other, you could also write it like this:

import { describe, it } from '@serenity-js/playwright-test';
import { isLessThan } from '@serenity-js/assertions';

describe('My feature', () => {

  it('performs a comparison', async ({ actor }) => {
  
    await actor.attemptsTo(
      Ensure.that(
        ComputedStyle.called('width').of(firstPageElement).as(Number.parseFloat),
        isLessThan(
          ComputedStyle.called('width').of(secondPageElement).as(Number.parseFloat)
        ),
      )
    );
  });
});