如何在基于 Chromium 的功能测试中使用导航器媒体设备？（测试咖啡厅）

Question

TL;DR如何运行使用navigator.mediaDevicesTestCafe 和 Chromium 及其方法的功能测试？

我正在尝试使用 TestCafe 编写功能测试来测试一些 WebRTC 代码。我正在使用反应。我有一个枚举设备的自定义钩子：

function useUpdateDeviceList() {
  const dispatch = useDispatch();

  useEffect(() => {
    async function updateDeviceList() {
      const { audioInputs, videoInputs } = await getInputDeviceInfos();

      dispatch(setAudioInputs(audioInputs));
      dispatch(setVideoInputs(videoInputs));
    }

    updateDeviceList();

    console.log('navigator', navigator);

    navigator.mediaDevices.ondevicechange = updateDeviceList;

    return () => {
      navigator.mediaDevices.ondevicechange = null;
    };
  }, [dispatch]);
}

哪里getInputDeviceInfos调用navigator.mediaDevices.enumerateDevices。

当我在浏览器中运行此代码时，它可以完美运行。当它在 TestCafe 的功能测试中运行时，它抛出。

TypeError: Cannot set property 'ondevicechange' of undefined

彻底的谷歌搜索只给出了添加标志--use-fake-ui-for-media-stream和--use-fake-device-for-media-stream启动命令的答案（前者避免了授予摄像头/麦克风权限的需要，并且梯形图getUserMedia()根据文档提供测试模式而不是实时摄像头输入），其中我做了：

TypeError: Cannot set property 'ondevicechange' of undefined

仍然发生同样的错误。在console.log上文示出了钩一个navigator物体而不mediaDevices。

Navigator {vendorSub: "", productSub: "20030107", vendor: "Google Inc.", maxTouchPoints: 0, sendBeacon: ƒ, …}
appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36"
connection: NetworkInformation {onchange: null, effectiveType: "4g", rtt: 100, downlink: 1.55, saveData: false}
cookieEnabled: true
doNotTrack: null
geolocation: Geolocation {}
hardwareConcurrency: 16
language: "en-GB"
languages: (3) ["en-GB", "en-US", "en"]
maxTouchPoints: 0
mediaCapabilities: MediaCapabilities {}
mediaSession: MediaSession {metadata: null, playbackState: "none"}
mimeTypes: MimeTypeArray {0: MimeType, 1: MimeType, application/x-nacl: MimeType, application/x-pnacl: MimeType, length: 2}
onLine: true
permissions: Permissions {}
platform: "MacIntel"
plugins: PluginArray {0: Plugin, Native Client: Plugin, length: 1}
product: "Gecko"
productSub: "20030107"
sendBeacon: ƒ ()
userActivation: UserActivation {hasBeenActive: false, isActive: false}
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36"
vendor: "Google Inc."
vendorSub: ""
webkitPersistentStorage: DeprecatedStorageQuota {}
webkitTemporaryStorage: DeprecatedStorageQuota {}
__proto__: Navigator

我该怎么做才能通过这些测试？

PS：如果重要，这里是应该通过的简单测试：

"functional-tests:chrome-desktop":"testcafe 'chrome --use-fake-ui-for-media-stream --use-fake-device-for-media-stream' src/**/*.functional-test.js --app 'yarn dev' --app-init-delay 2000",

Answer 1

Chrome 不允许getUserMedia从不安全的来源调用API。因此，您可以使用以下任一方式：

1. 通过添加以下选项将“localhost”指定为主机名：-- hostname

testcafe --hostname localhost ...

2. 加入这个选项使用SSL证书：--ssl

testcafe --ssl pfx=/path/to/cert.pfx ...

更多信息请参考以下示例：模拟摄像头/麦克风访问。