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

0
votes

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'?

2
csscypress

2 Answers

1
votes

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'
);
1
votes

You can also do something like this. Extract the CSS value and then check for the partial text.

homePage
  .getHeadingWidgetContent()
  .invoke('css', 'text-decoration')
  .then((val) => {
    cy.wrap(val).should('include.text', 'underline')
  })