如何使用Cypress检测指定div是否存在对应同级的div元素

核心问题点 #

• 类选择器语法错误：你代码中parentsR('styledCard')、textEqualsR('title', 'title1')的第一个参数都是类名，但没有加类选择器前缀.，Cypress会将其识别为对应名称的HTML标签，无法匹配到class属性的元素。
• 查找逻辑冗余：你要校验的是.title的同级元素，无需向上遍历到.styledCard层，多层级遍历更容易出现匹配偏差。
• 缺少明确校验断言：原代码仅做了元素查找，没有添加存在性、文本匹配的断言逻辑，校验逻辑不完整。

修复代码 #

保留你使用的自定义R后缀命令版本 #

cy.textEqualsR('.title', 'title1')
  // 直接查找同层级的.subtitle元素
  .siblings('.subtitle')
  // 校验元素存在且文本符合要求
  .should('have.text', 'subtitle1')

Cypress原生命令通用版本（无自定义命令依赖） #

// 定位内容为title1的.title元素
cy.get('div.title')
  .contains('title1')
  // 匹配同层级的.subtitle元素
  .siblings('div.subtitle')
  // 校验规则：元素存在，且文本为subtitle1
  .should('exist')
  .and('have.text', 'subtitle1')

备选兼容方案（针对结构可能变动的场景） #

如果页面后续可能调整.title的层级，可通过共同父级定位更稳定：

cy.get('div.title:contains("title1")')
  .parent('.headerLeft')
  .find('div.subtitle')
  .should('have.text', 'subtitle1')

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