如何在Cypress中判断React封装的Web Component按钮是否禁用？

我们正将自定义React组件替换为公司设计系统中的组件，这些组件是Web Component，并已制作React封装层以适配React环境。组件渲染的DOM结构如下：

<custom-button title="" data-test-id="save" disabled mode="primary">
    #shadow-root
        <button data-mode="primary" size="small" type="button" title="" disabled>Save</button>
</custom-button>

在Cypress中，尝试两种方式判断按钮是否禁用：

cy.getByTestId('save').should('be.disabled'); //无效，但这是现有测试统一使用的写法
cy.getByTestId('save').find('button').should('be.disabled'); //有效

第一种写法无效，但不想使用第二种写法（需要区别处理设计系统按钮与普通按钮），想请教为何第一种写法无效？明明<custom-button>在DOM中已添加disabled属性。

Cypress的be.disabled断言是针对原生可交互HTML元素（如<button>、<input>等）设计的，它会检查元素的原生disabled属性，或是通过DOM API（比如element.disabled）判断元素的禁用状态。

而<custom-button>是自定义Web Component，它身上的disabled是自定义属性，并非原生HTML元素的标准disabled属性。Cypress无法识别这个自定义属性作为元素禁用的依据，因为Web Component本身不是原生可交互元素，它的禁用逻辑是通过内部shadow root里的原生<button>来实现的——真正被设置禁用状态的是内部的原生按钮，而非外层的自定义组件标签。

所以直接断言外层的<custom-button>会失效，必须深入到shadow root内部的原生按钮才能正确判断禁用状态。

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