WebdriverIO 网络请求Mock功能异常解析与修复

问题背景

在WebdriverIO测试框架中，开发者经常需要模拟网络请求的响应来进行前端测试。近期有用户报告在使用Mock.respond方法时遇到了"Invalid input in body"的错误，即使传入最简单的JSON对象也会触发这个错误。

问题现象

开发者尝试使用以下代码设置mock响应：

const recommendationsMock = await browser.mock('https://some.site.com/some/endPoint');

recommendationsMock.respond({ test: 'some string' }, {
  statusCode: 200,
  headers: {
    'access-control-allow-origin': '*',
    'access-control-allow-methods': '*',
    'access-control-allow-headers': '*',
    'content-type': 'application/json; charset=utf-8'
  },
  fetchResponse: false
});

执行后会收到错误信息："BIDI RESULT {"error":"invalid argument","id":95,"message":"Invalid input in "body".","type":"error"}"。

技术分析

这个问题源于WebdriverIO底层与浏览器自动化协议(BiDi)的交互过程中，对请求体(body)的处理存在缺陷。具体表现为：

1. 当开发者传入普通JSON对象作为响应体时，框架未能正确将其转换为BiDi协议要求的格式
2. 即使尝试手动使用JSON.stringify转换，同样会失败
3. 错误直接来自BiDi协议层，表明是数据格式验证失败

解决方案

WebdriverIO团队在v9.12.7版本中修复了这个问题。修复的核心点是：

1. 正确处理JSON响应体的序列化
2. 确保转换后的数据符合BiDi协议规范
3. 修复后，框架会自动处理JSON对象的转换，开发者无需手动处理

最佳实践

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

1. 确保使用最新版本的WebdriverIO
2. 对于JSON响应，直接传入JavaScript对象即可
3. 设置正确的content-type头部
4. 对于复杂场景，可以先从简单用例开始验证

总结

这个问题的修复体现了WebdriverIO团队对开发者体验的重视。网络请求mock是现代前端测试中的重要功能，能够有效隔离前端与后端，提高测试的稳定性和执行速度。开发者现在可以继续使用直观的API来设置mock响应，而无需关心底层的协议细节。