Cypress点击按钮后如何验证class属性变更及相关报错解决

错误原因 #

你之前的报错是因为直接把完整class字符串作为CSS选择器传入cy.get()不符合CSS选择器语法：CSS选择器中多个类名需要每个类前加.，且不能有空格（空格会被识别为后代选择器，匹配子元素），所以你写的选择器会被解析为匹配gpx-16类元素下的<i1-regular>标签下的<gpu-selected>标签，自然找不到对应元素。

正确验证方案 #

方案1（推荐）：单独校验选中类存在

不需要关注其他类的取值和顺序，只要验证新增的gpu-selected类存在即可，写法最稳定：

cy.get('#numberOfFetusOne').click()
// 直接断言元素包含目标选中类
cy.get('#numberOfFetusOne').should('have.class', 'gpu-selected')

方案2：校验完整class属性值

如果你需要确认整个class属性的取值完全符合预期，可以用属性断言，注意要和实际渲染的class顺序、空格完全一致：

cy.get('#numberOfFetusOne').click()
cy.get('#numberOfFetusOne').should('have.attr', 'class', 'gpx-16 i1-regular gpu-selected')

注：Cypress的.should()断言自带重试机制，只要class在默认超时时间内完成更新就会自动校验通过，不需要额外加等待逻辑。

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