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'?
CodePudding user response:
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'
);
CodePudding user response:
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')
})