如何在基于Chromium的功能测试中使用导航器媒体设备？ TestCafe

编程问答 2022-06-05

问题描述

TL; DR 如何运行将navigator.mediaDevices及其方法与testcafe和Chromium一起使用的功能测试？

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

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

全面的Google搜索仅给出了将标记--use-fake-ui-for-media-stream和--use-fake-device-for-media-stream添加到开始命令的答案（前者避免了授予摄像头/麦克风许可的需要，而梯形图则提供了测试模式到getUserMedia()，而不是根据docs的实时摄像机输入），

"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",

仍然发生相同的错误。上方挂钩中的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：：如果重要，这是应该通过的简单测试：

import { Selector } from 'testcafe';

const {
  FUNCTIONAL_TESTS_MEETINGS_APP_PROTOCOL: protocol = 'http',FUNCTIONAL_TESTS_MEETINGS_APP_HOST: host = 'localhost',FUNCTIONAL_TESTS_MEETINGS_APP_PORT: port = 3000,FUNCTIONAL_TESTS_MEETINGS_APP_MEETING_ID: meetingId = '327fa7b0-0605-4595-b066-819f201ce593',} = process.env;

fixture`Meetings page`.page(`${protocol}://${host}:${port}/${meetingId}`);

test.only('page should load and display the correct title',async t => {
  await t.debug();
  const actual = Selector('title').innerText;
  const expected = `Meetings - ${meetingId}`;

  await t.expect(actual).eql(expected);
});

解决方法

Chrome浏览器不允许从不安全的来源调用getUserMedia API。因此，您可以使用以下两种方式之一：

  1. 通过添加以下选项来指定“ localhost”作为主机名：--hostname 
testcafe --hostname localhost ...
  1. 通过添加以下选项来使用SSL证书：--ssl 
testcafe --ssl pfx=/path/to/cert.pfx ...

有关更多信息，请参见以下示例：Mock Camera/Microphone Access。

chromiumchromiumfunctional-testingmediadevicestestcafewebrtcwebrtcwebrtc