WebdriverIO 中 Mock 调用次数重复计数问题解析

问题现象

在使用 WebdriverIO 进行浏览器 API 请求模拟测试时，开发者发现一个异常现象：当使用 browser.mock() 方法拦截 API 请求并验证调用次数时，实际记录的调用次数比预期多出一倍。例如，代码中只发起了一次 fetch 请求，但 apiMock.calls.length 却返回了 2。

问题复现

这个问题的复现非常简单，只需创建一个基本的测试用例：

describe('浏览器模拟测试', () => {
    it('应支持API请求模拟', async () => {
        const apiMock = await browser.mock('**/api/bar')
        apiMock.respond({ foo: 'bar' });
        await fetch('/api/bar'); // 只发起一次请求
        await expect(apiMock.calls.length).toBe(1); // 实际返回2，测试失败
    })
})

问题根源

经过代码审查，发现问题出在 WebdriverIO 的拦截机制实现上。在 interception/index.ts 文件中，存在一个逻辑错误：相同的请求被两次推入调用记录数组 this.#calls 中。

具体来说，拦截器在处理请求时，会分别在两个不同的代码路径中将请求对象添加到调用记录中，导致每次实际请求都会产生两条记录。

技术背景

WebdriverIO 的请求拦截功能基于浏览器原生的网络请求拦截能力，通过监听和修改网络请求来实现测试中的模拟行为。正常情况下：

1. 开发者通过 browser.mock() 创建拦截器
2. 拦截器注册对特定URL模式的监听
3. 当匹配的请求发生时，拦截器捕获请求并执行预设行为
4. 同时记录请求详情供后续验证

解决方案

该问题已在 WebdriverIO 的最新代码中修复，解决方法是移除其中一处多余的调用记录添加操作。核心修改是确保每个请求只被记录一次。

对于开发者而言，解决方案包括：

1. 升级到修复后的 WebdriverIO 版本
2. 如果暂时无法升级，可以通过将预期值乘以二来临时绕过问题（不推荐）
3. 或者手动检查调用记录中的请求是否确实重复

最佳实践

在使用 WebdriverIO 的模拟功能时，建议：

1. 明确区分请求拦截和响应模拟的不同阶段
2. 在验证调用次数时，同时检查调用详情以确保没有重复请求
3. 定期更新测试框架以获取最新修复
4. 对于关键测试场景，考虑添加额外的请求内容验证而不仅仅是计数

总结

这个 Bug 虽然看似简单，但它揭示了测试框架中请求拦截机制的一个关键实现细节。理解这类问题的根源有助于开发者更好地使用测试工具，并在遇到类似问题时能够快速定位和解决。WebdriverIO 团队已经迅速响应并修复了这个问题，体现了开源社区对测试工具质量的重视。