Cypress断言问题：如何验证指定文本关联元素存在目标CSS类

问题根因 #

• cy.contains('some text')实际返回的是包裹目标文本的<h2>元素，而非你需要校验的、带有fa-pencil类的子<a>元素
• 校验元素是否包含指定类需要使用have.class断言，have.css用于校验元素的CSS样式属性值（例如字体颜色、元素宽高），不适用于类名校验场景

调整后的代码 #

你可以先定位到包含目标文本的父元素，再查找对应子元素做类名校验即可：

// 先匹配包含目标文本的h2元素，再查找其下的a标签校验类
cy.contains('h2', 'some text').find('a').should('have.class', 'fa-pencil')

如果该h2下存在多个a标签，也可以直接指定类名缩小查找范围：

cy.contains('h2', 'some text').find('.fa-pencil').should('exist')

内容的提问来源于stack exchange，提问作者James Lott