如何在WebdriverIO+Mocha中为进度条测试设置容差断言？

问题场景 #

测试进度条功能：点击Start按钮后等待进度达到75%，点击Stop，允许最终进度值有±5%的容差（即70%-80%之间均视为通过）。现有代码已实现基础流程，但缺少符合容差要求的断言逻辑。

解决方案 #

核心修改点：

1. 将进度条的aria-valuenow字符串值转换为数字，避免字符串比较的逻辑错误
2. 计算允许的进度范围（70%-80%）
3. 使用WebdriverIO内置断言验证最终进度是否在容差范围内

修改后的完整代码：

describe('Progress bar challenge', () => {

    before(() => {
        ProgressPage.open();
    });

    it('Should click [start], wait for bar to reach 75%, click [stop], and verify progress within ±5% tolerance', async () => {
        // 定义目标值与容差
        const targetProgress = 75;
        const tolerance = 5;
        const minAllowed = targetProgress - tolerance;
        const maxAllowed = targetProgress + tolerance;

        // 启动进度条
        await ProgressPage.startBtn.click(); 
        
        // 等待进度条达到目标值（修复原字符串比较的问题）
        await ProgressPage.progressBar.waitUntil(async function () {
            const currentProgress = parseInt(await this.getAttribute('aria-valuenow'), 10);
            return currentProgress >= targetProgress;
        }, {
            timeout: 50000,
            timeoutMsg: `Progress bar failed to reach ${targetProgress}% within 50s`
        });

        // 停止进度条
        await ProgressPage.stopBtn.click();
        
        // 获取最终进度值并转换为数字
        const finalProgress = parseInt(await ProgressPage.progressBar.getAttribute('aria-valuenow'), 10);
        
        // 断言最终进度在容差范围内（两种写法可选）
        // 写法1：拆分断言
        expect(finalProgress).toBeGreaterThanOrEqual(minAllowed);
        expect(finalProgress).toBeLessThanOrEqual(maxAllowed);

        // 写法2：WebdriverIO v7+ 支持的简洁写法
        // expect(finalProgress).toBeWithin(minAllowed, maxAllowed);

        console.log(`Final progress: ${finalProgress}% (within allowed range ${minAllowed}-${maxAllowed}%)`);
    });
    
});

关键细节说明 #

• 字符串转数字：aria-valuenow返回的是字符串类型，直接比较会出现逻辑错误（如'8' > '75'会被判定为true），必须用parseInt()转换为整数后再比较。
• 容差范围计算：通过目标值±容差直接算出允许的上下限，逻辑清晰且易于维护。
• 断言选择：WebdriverIO内置的expect断言库完全适配异步场景，无需额外引入第三方库；若项目已使用Chai，也可替换为expect(finalProgress).to.be.within(minAllowed, maxAllowed)。
• 超时提示：给waitUntil添加timeoutMsg参数，方便调试超时问题时快速定位原因。

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