cypress Input with text-transform uppercase not picking correct value

Question

I have an html input with style text-transform: uppercase, so whenever a user types a value into it, it turns to uppercase. But when I use cypress to locate this elemen't's value using

.should('have.value', FIELD),

I still get the original value entered in lowercase not the value displayed in the input field, which is in uppercase.

is there a way cypress can handle this kind of a situation?

FYI I am using "cypress": "7.4.0"

Answer 1

CSS text transform is applied in the browser render, but does not affect the javascript, as far as I know.

The best you can do in JS is query the CSS property of the element

cy.get('span')
  .should($el => {
    expect(window.getComputedStyle($el[0])['text-transform']).to.eq('uppercase')
  })