Cypress断言错误：误将span当作button校验disabled属性

问题背景 #

编写两个Cypress测试用例：

• 第一个校验“Send Reset Instructions”按钮存在，执行通过；
• 第二个校验清空邮箱后该按钮处于禁用状态，执行失败。

失败原因：cy.contains()返回了按钮内部的<span.mat-button-wrapper>元素，而disabled属性实际存在于外层的<button>标签上，导致断言无法找到目标属性。

测试代码：

it("It should now show the Send Reset Instructions link", () => {
    fsrloginpage.SendResetInstructions("Send me reset").should('exist');   
});

it("The Send Reset Instructions link should be disabled if the Email is empty", () => {
    fsrloginpage.UsernameEmailField().clear();
    fsrloginpage.SendResetInstructions("Send me reset").should('have.attr','disabled','true');   
});

元素定位方法：

SendResetInstructions(linklabel){
    return cy.get('button[class^="mat-focus-indicator mat-button mat-raised-button mat-button-base mat-primary"]').contains(linklabel);
}

被测HTML结构：

<button mat-button="" mat-raised-button="" color="primary" class="mat-focus-indicator mat-button mat-raised-button mat-button-base mat-primary mat-button-disabled" disabled="true">
<span class="mat-button-wrapper"> Send me reset password instructions </span>
<span matripple="" class="mat-ripple mat-button-ripple"></span>
<span class="mat-button-focus-overlay"></span>
</button>

因无法及时让开发添加按钮ID，以下是几种可行的解决方案：

解决方案 #

1. 直接使用cy.contains()指定目标元素标签 #

cy.contains()支持第二个参数，直接指定要定位的元素类型，这样会返回包含目标文本的<button>元素，而非内部的<span>：

SendResetInstructions(linklabel){
    // 第一个参数是button的选择器，第二个是要匹配的文本
    return cy.contains('button[class^="mat-focus-indicator mat-button mat-raised-button mat-button-base mat-primary"]', linklabel);
}

优势：最简洁直接，一步定位到目标button元素，无需额外DOM遍历。

2. 通过.parent()返回父级button元素 #

由于<span.mat-button-wrapper>是<button>的直接子元素，使用.parent()可以快速回到父级button：

SendResetInstructions(linklabel){
    return cy.get('button[class^="mat-focus-indicator mat-button mat-raised-button mat-button-base mat-primary"]')
        .contains(linklabel)
        .parent(); // 回到父级button元素
}

注意：仅适用于span是button直接子元素的固定结构。

3. 使用.closest('button')向上查找最近的button #

如果页面结构可能发生变化（比如span外层新增其他元素），.closest()会向上遍历DOM树，找到最近的<button>元素，鲁棒性更强：

SendResetInstructions(linklabel){
    return cy.get('button[class^="mat-focus-indicator mat-button mat-raised-button mat-button-base mat-primary"]')
        .contains(linklabel)
        .closest('button'); // 向上查找最近的button元素
}

4. 用.filter()过滤出目标button #

先获取所有符合class的button，再通过文本内容过滤出目标元素：

SendResetInstructions(linklabel){
    return cy.get('button[class^="mat-focus-indicator mat-button mat-raised-button mat-button-base mat-primary"]')
        .filter((index, element) => {
            return element.textContent.includes(linklabel);
        });
}

适用场景：需要更精确控制文本匹配逻辑时使用。

应用上述任意方案后，测试用例的断言即可正确针对<button>元素，获取到disabled属性，执行通过。

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