如何使用Cypress检测页面logo元素的可见性

错误原因 #

你的测试代码不生效的核心问题是cy.get()的类选择器语法使用错误：

• CSS/Cypress选择器规则中，指定通过类名定位元素时，需要在类名前加.前缀
• 同时匹配同一元素的多个类名时，需要将多个类选择器直接拼接，中间不能加空格——空格代表匹配当前元素的后代节点，完全不符合你的需求。

正确实现方案 #

方案1：按多类名匹配（临时可用） #

修正后的选择器写法如下：

cy.get(".MuiTypography-root.jss10.MuiTypography-h6").should('be.visible')

方案2：按文本匹配（更稳定） #

jss开头的类是Material UI框架动态生成的类，不同构建环境、版本下类名可能发生变化，更推荐通过标签+文本内容定位：

cy.contains('h6', 'IBC DASH').should('be.visible')

方案3：固定类名匹配（兼顾稳定性和通用性） #

只选择Material UI固定的公共类名，避开动态生成的jss*类：

cy.get("h6.MuiTypography-root.MuiTypography-h6").should('be.visible')

最佳实践建议 #

后续编写测试用例定位元素时，优先给目标元素添加自定义data-testid属性，比如<h6 data-testid="page-logo" ...>IBC DASH</h6>，测试代码写为cy.get('[data-testid="page-logo"]').should('be.visible')，完全不受框架样式类名变化、文本内容调整的影响，稳定性最高。

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