WebdriverIO v9中带通配符的browser.mock()失效求助

问题背景 #

升级WebdriverIO到v9后，原有的外部图片Mock代码失效：

const imageMock = await browser.mock('/my/company/resources/**', { method: 'get' })
await imageMock.respond(`${browser.options.baseUrl}/img/default_image.svg`, {  
     statusCode: 200   
})

原因是v9不再支持glob通配符（如**），*会被当作字面量解析，但官方文档仍保留通配符示例，存在误导性。尝试精确匹配URL虽有效但不够灵活，传入URLPattern实例时*会被转义为\*；使用network.beforeRequestSent结合provideResponse的方案也未生效。

有效解决方案 #

方案1：使用正则表达式替代通配符

WebdriverIO v9的browser.mock支持直接传入正则表达式作为URL匹配规则，完全可以替代原有的glob通配符效果：

// 用正则匹配/my/company/resources/下的所有子路径
const imageMock = await browser.mock(/^\/my\/company\/resources\/.*$/, { method: 'get' })
await imageMock.respond(`${browser.options.baseUrl}/img/default_image.svg`, {  
     statusCode: 200   
})

正则表达式可按需调整，比如匹配特定后缀的图片：/^\/my\/company\/resources\/.*\.(svg|png|jpg)$/

方案2：修复CDP network.provideResponse的用法

之前的代码未生效是因为参数传递错误，CDP的network.provideResponse需要传入requestId而非完整的request对象，同时body部分无需重复转码：

browser.on('network.beforeRequestSent', async (event) => {
  if (event.request.url.includes('/some/url/to/image/')) {
    // 1x1透明PNG的base64编码
    const placeholderBase64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==';

    await browser.send({
      method: 'network.provideResponse',
      params: {
        requestId: event.requestId, // 关键：传入requestId而非request对象
        statusCode: 200,
        headers: [{ name: 'Content-Type', value: 'image/png' }],
        body: placeholderBase64 // 直接使用base64字符串
      }
    })
  }
})

额外说明 #

目前WebdriverIO官方文档中仍存在**通配符的示例，与实际v9的行为不符，建议向官方提交issue修正文档内容。

内容的提问来源于stack exchange，提问作者Piotr Słowik