使用WDIO+Mocha多浏览器测试时Jest断言匹配器报错求助

问题背景 #

在使用WDIO（WebdriverIO）搭配Mocha做多浏览器并行测试时，运行断言expect(p.header).toBeVisible()出现如下错误，但单浏览器测试时完全正常：

Unexpected return from a matcher function. Matcher functions should return an object in the following format: {message?: string | function, pass: boolean}
返回内容：'[{"message": [Function message], "pass": false}, {"message": [Function message], "pass": false}]'

测试代码示例：

describe ('Landing Page test suite',()=> { 
  before(()=>{ 
    browser.url('/') 
  }) 
  it ('1. Page should be loaded properly',()=>{ 
    p.header.waitForDisplayed() 
    expect(p.header).toBeVisible() 
  }) 
})

原因分析 #

这是多浏览器并行模式下的典型问题：
当开启多浏览器测试时，WDIO的browser对象和元素定位器（比如p.header）会变成多个浏览器实例的集合。此时调用Chai原生的toBeVisible()匹配器，它会对每个浏览器实例分别执行断言，最终返回一个结果数组，但Chai的匹配器规范要求返回单个对象，因此抛出错误。

解决方案 #

推荐以下两种有效解决办法：

方法1：使用browser.call()包裹断言逻辑

browser.call()会确保回调函数在每个浏览器实例中单独执行，这样断言就会针对单个实例返回结果，不会产生数组冲突：

describe ('Landing Page test suite',()=> { 
  before(()=>{ 
    browser.url('/') 
  }) 
  it ('1. Page should be loaded properly',()=>{ 
    browser.call(() => {
      p.header.waitForDisplayed()
      expect(p.header).toBeVisible()
    })
  }) 
})

方法2：改用WDIO内置的专属断言（推荐）

WDIO为Chai扩展了专门适配多浏览器场景的匹配器，比如toBeDisplayed()，它原生支持多实例并行，会自动处理每个浏览器的结果：

describe ('Landing Page test suite',()=> { 
  before(()=>{ 
    browser.url('/') 
  }) 
  it ('1. Page should be loaded properly',()=>{ 
    p.header.waitForDisplayed()
    expect(p.header).toBeDisplayed() // 替换为WDIO专属断言
  }) 
})

方法3：强制串行测试（不推荐）

如果暂时不需要并行，可以在wdio.conf.js中限制实例数为1，强制串行执行：

exports.config = {
  // ...其他配置
  maxInstances: 1, // 只允许同时运行1个浏览器实例
}

验证步骤 #

1. 执行npm i安装所有依赖
2. 按照上述方法修改测试代码
3. 运行npm run test，多浏览器测试即可正常通过

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