Cypress按标题选取React MUI Card组件校验内容的测试失败问题

你的测试代码无法正常运行，核心问题有两个：

• 选择器逻辑不符合MUI的DOM渲染规则：你使用的[title="Shrimp and Chorizo Paella"]是原生DOM属性选择器，但MUI的CardHeader组件并不会把传入的title属性挂载为DOM节点的原生title属性，而是会把标题文本渲染为类名为MuiCardHeader-title的内部Typography子元素，这个选择器从一开始就无法命中目标卡片的标题节点，大概率会匹配到页面上其他带原生title属性的无关元素。
• 元素查找逻辑脆弱且范围不可控：退一步说，就算你碰巧选中了正确的标题节点，直接调用siblings()获取同级元素的写法完全依赖MUI当前版本的内部DOM结构，一旦组件版本升级调整了嵌套层级就会直接失效；同时这种写法没有把查找范围限定在当前卡片内部，存在匹配到其他卡片文本内容的风险。

推荐使用「先定位目标Card根容器，再在容器内校验内容」的思路，稳定性最高，不会受MUI内部DOM结构微调影响，也不会出现跨卡片匹配的问题。

写法1：通过标题文本直接匹配Card容器（最简洁） #

利用Cypress的contains可以指定父级选择器的特性，直接锁定带目标标题的Card根节点，再查找内部内容：

// 匹配包含目标食谱标题的MUI Card根组件
cy.contains('.MuiCard-root', 'Shrimp and Chorizo Paella')
  // 在当前卡片范围内查找CardContent区域
  .find('.MuiCardContent-root')
  // 校验目标食谱文本存在且可见
  .contains('This impressive paella is a perfect party dish')
  .should('be.visible')

写法2：精准匹配CardHeader标题后向上追溯（适合页面有重复文本的场景） #

如果页面其他位置可能出现和标题重复的文本，可以先精准命中CardHeader的标题节点，再向上查找最近的Card父容器：

// 精准匹配CardHeader内的标题元素
cy.get('.MuiCardHeader-title').contains('Shrimp and Chorizo Paella')
  // 向上追溯到所属的Card根节点
  .closest('.MuiCard-root')
  // 查找CardContent内的正文Typography组件
  .find('.MuiCardContent-root .MuiTypography-body2')
  // 校验文本内容
  .should('include.text', 'Add 1 cup of frozen peas along with the mussels')

补充说明：以上写法用到的MuiCard-root、MuiCardHeader-title、MuiCardContent-root都是MUI组件自带的稳定全局类名，跨版本兼容性远好于猜测DOM层级的写法，不需要额外给组件加测试专用属性就能稳定定位。

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