Cypress中CSS选择器返回父元素及if语句判断元素存在问题咨询

你现有写法存在两个核心问题：

• jQuery的find()方法仅支持CSS选择器，你传入Xpath字符串必然会抛出语法错误
• 你写的CSS选择器把Cypress的父级查询逻辑直接拼进了选择器字符串，CSS本身不支持向上查询父元素，该写法不符合语法规则

方案1：使用原生DOM Xpath查询实现存在性判断 #

你可以在then()回调中直接调用浏览器原生的document.evaluate()执行Xpath查询，不需要依赖jQuery或Cypress内置查询命令，不会因为元素不存在直接抛出错误中断用例，完美适配你需要的if判断跳过逻辑：

cy.xpath(list)
    .eq(index)
    .then(($el1) => {
      cy.get('body').then((body) => {
        const fullXpath = currentBase + currentTitle[index] + currentExtension
        // 原生Xpath查询
        const xpathRes = document.evaluate(
          fullXpath, 
          document, 
          null, 
          XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, 
          null
        )
        if (xpathRes.snapshotLength > 0) {
          // 元素存在，执行后续逻辑
        }
      })
    })

如果你的最终需求是定位文本为Element One下方的div，直接使用如下Xpath即可，不需要拼接复杂的选择器，也不需要依赖动态类名：
//*[text()="Element One"]/following-sibling::div[1]
该表达式会直接匹配文本内容为Element One的元素后第一个同级div元素，如果你要找的是该元素的子级div，修改为//*[text()="Element One"]/div即可。

方案2：修正CSS层级查询写法 #

如果你要基于已定位的img元素向上查找父级，不要把父级查询逻辑写在CSS选择器字符串里，用Cypress提供的parent()方法链式调用即可：

cy.get('#structures img[src*="/static/media/image"]')
  .parent()
  .parent()
  .parent()
  .find('div:nth-child(2)')

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