How do I verify text-transform worked

[jonmhayden]

Hi,

I've googled this, but haven't had any luck.

Take this CSS:
h1 { text-transform: uppercase; }

So if I had a header that was "test", it would display this:

TEST

How do I verify the text-transform worked? Here is what I did in Cypress:

cy.get('h1').contains("test") // << passes
cy.get('h1').contains("TEST") // << fails

I would expect the results would be opposite since I want to verify what is actually being displayed to the user. As a QA tester, I would want to make sure a developer didn't accidentally put in a typo to text-transform css. Is this possible or do I have to use some sort of image-based test tool?

Thanks for the help,
Jon

[jjhelguero]

You can check the element text contains text-transform by using contains with the option matchCase: falseto find the element and assert it hastext-transform: uppercase` css.

cy.contains('h1', 'text', { matchCase: false }).should(
  'have.css',
  'text-transform',
  'uppercase'
)

[jonmhayden]

Awesome. Thanks for that.