How to assert a CSS attribute contains some text in Cypress test?

Question

In my Cypress test I'm trying to assert that an element's text is underlined.

I tried to use the below assertion:

homePage.getHeadingWidgetContent().should('have.css', 'text-decoration', 'underline');

But the actual text-decoration is 'underline solid rgba(0, 0, 0, 0.87)');

This below assertion passes:

homePage.getHeadingWidgetContent().should('have.css', 'text-decoration', 'underline solid rgba(0, 0, 0, 0.87)');

Is there a way I can assert that text-decoration includes 'underline'?

user_4908847 · Answer

text-decoration is shorthand for a group of properties. You should use one of its constituent properties, specifically text-decoration-line.

homePage.getHeadingWidgetContent().should(
  'have.css', 'text-decoration-line', 'underline'
);