Check style
<div
id="contains-example"
style="font-weight: 600; text-decoration: underline"
>
<span>Some text</span>
</div>
We can check what the element declares using the "have.css" assertion
cy.get('#contains-example')
.should('include.text', 'Some text')
.and('have.css', 'text-decoration')
// the text-decoration style string includes color and line type
// we are only interested in the presence of the "underline" keyword
.should('include', 'underline')
If we need to check the <span>
element inside to confirm it has an underlined text, we need at the computed style, see the recipe Computed style.
cy.get('#contains-example')
.then(($el) => {
return window.getComputedStyle($el[0])
})
.invoke('getPropertyValue', 'font-weight')
.should('equal', '600')
Watch the video Check CSS Text Decoration Property.