Cypress中cy.get()与cy.contains()为何返回结果不同？

问题描述 #

我在运行以下两个Cypress命令时遇到问题：

1. cy.get('prj-ui-menu').contains('Evidences')
2. cy.contains('prj-ui-menu','Evidences')

第一个命令运行正常，但第二个命令因无法获取prj-ui-menu元素而失败。我理解两者返回的元素可能不同，但不明白为何一个可行一个失败，查阅Cypress文档未找到相关线索。

23/02更新：补充相关HTML代码

<prj-ui-menu>
    <button class="prj-tab" role="tab">
        <div class="prj-tab-mobile">
            <div class="prj-content-mobile">
                <div class="prj-text-label">
                    Evidences
                </div>
            </div>
        </div>
        <div class="prj-tab-desktop">
            <div class="prj-content-desktop">
                <span class="prj-text-label">
                Evidences</span>
            </div>
        </div>
        <div class="prj-indicator">...</div>
        ▼<span class="mdc-ta">
            ::before
            ::after
        </span>
    </button>
</prj-ui-menu>

核心差异解析 #

这两个命令的执行逻辑完全不同，直接导致了结果差异：

• cy.get('prj-ui-menu').contains('Evidences')
  先通过cy.get()定位到<prj-ui-menu>元素，再在这个元素的所有后代节点中查找包含文本Evidences的元素。你的HTML结构里，Evidences文本确实存在于<prj-ui-menu>的子节点中，因此这个命令能成功匹配到目标文本所在的元素。

• cy.contains('prj-ui-menu','Evidences')
  这个命令的逻辑是：查找**自身直接包含文本Evidences**的<prj-ui-menu>元素。但你的<prj-ui-menu>本身没有直接文本内容，所有Evidences文本都嵌套在它的子元素内部。Cypress的cy.contains(selector, text)只会检查选择器匹配的元素自身的文本，不会递归遍历后代，因此找不到符合条件的元素，命令失败。

修正方案 #

如果想通过cy.contains定位到<prj-ui-menu>，可以采用以下两种方式：

1. 先定位到包含文本的子元素，再向上遍历到父级<prj-ui-menu>：

   cy.contains('Evidences').parents('prj-ui-menu')
   

2. 基于你第一个成功的命令逻辑，若目标是操作<prj-ui-menu>元素，可链式调用.closest()向上查找：

   cy.get('prj-ui-menu').contains('Evidences').closest('prj-ui-menu')
   

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