TL;DR如何在TestCafe和Chromium中运行使用navigator.mediaDevices
及其方法的功能测试?
我正在尝试用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]);
}
其中CCD_ 2调用CCD_。
当我在浏览器中运行这段代码时,它可以完美地工作。当它在TestCafe的功能测试中运行时,它会抛出。
TypeError: Cannot set property 'ondevicechange' of undefined
彻底的谷歌搜索只给出了将标志--use-fake-ui-for-media-stream
和--use-fake-device-for-media-stream
添加到启动命令中的答案(前者避免了授予相机/麦克风权限的需要,梯形图将测试模式提供给getUserMedia()
,而不是根据文档的实时相机输入(,我做到了:
"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
显示了一个没有mediaDevices
的navigator
对象。
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。因此,您可以使用以下任一方式:
- 通过添加以下选项指定"localhost"作为主机名:--hostname
testcafe --hostname localhost ...
- 通过添加以下选项使用SSL证书:--SSL
testcafe --ssl pfx=/path/to/cert.pfx ...
有关更多信息,请参阅以下示例:模拟摄像头/麦克风访问。