使用模拟媒体流和设备进行Web测试：模拟网络摄像头视频/音频

您在Web测试自动化过程中遇到过以下挑战吗？

自动化身份验证，如护照或驾驶执照。
在没有物理设备可用的情况下，测试需要访问网络摄像头的Web应用会很困难。

如果是这样，本文将帮助您克服这些困难。

在为您的 WebRTC 应用程序编写自动化测试时，可以为浏览器启用一些有用的配置，使开发和测试变得更容易。

Chrome

在 Chrome 上运行自动测试时，启动时以下参数很有用：

--allow-file-access-from-files– 允许 API 访问 file:// URL
--disable-translate– 禁用翻译弹出窗口
--use-fake-ui-for-media-stream– 提供虚假媒体流。在 CI 服务器上运行时很有用。避免需要授予摄像头/麦克风权限。
--use-file-for-fake-audio-capture=<filename>– 提供捕获音频时使用的文件。
--use-file-for-fake-video-capture=<filename>– 提供捕获视频时使用的文件。
--headless– 以无头模式运行。在 CI 服务器上运行时很有用。

在 playwright 测试类中添加以下代码：

test.use({
  launchOptions: {
    headless: true,
      args: [
          '--no-sandbox',
          '--allow-file-access-from-files',
          '--use-fake-ui-for-media-stream',
          '--use-fake-device-for-media-stream',
          '--use-file-for-fake-video-capture=./data/fakeIds/valid-passport.y4m',
      ],
  }
});

可在此处下载 Y4M 文件样本： http://media.xiph.org/video/derf/
(只支持 420，不支持 422）。

注意：

您只能使用 .y4m 文件或 .mjpeg 文件为 Chrome 浏览器测试通过假视频
要创建 Y4M 文件，请使用 FFmpeg 工具。
遗憾的是，不能同时使用多个流。

让我们用 playwright 试试吧

从此处下载示例代码：https：//github.com/dilshan5/sample-web-playwright/blob/main/qa-test-app-e2e/specs/example-fake-camera-withPermission.spec.ts

测试运行时，您可以看到模拟摄像头输出已显示在预期真实网络摄像头输出的区域。您可以更改流文件以加载您喜欢的视频。

Firefox

在 Firefox 上运行自动测试时，我们需要提供一组将用于启动实例的首选密钥。以下是用于 WebRTC 示例自动测试的配置：

"prefs": {
    "browser.cache.disk.enable": false,
    "browser.cache.disk.capacity": 0,
    "browser.cache.disk.smart_size.enabled": false,
    "browser.cache.disk.smart_size.first_run": false,
    "browser.sessionstore.resume_from_crash": false,
    "browser.startup.page": 0,
    "media.navigator.streams.fake": true,
    "media.navigator.permission.disabled": true,
    "device.storage.enabled": false,
    "media.gstreamer.enabled": false,
    "browser.startup.homepage": "about:blank",
    "browser.startup.firstrunSkipsHomepage": false,
    "extensions.update.enabled": false,
    "app.update.enabled": false,
    "network.http.use-cache": false,
    "browser.shell.checkDefaultBrowser": false
}

结论

如果没有物理设备或需要模拟媒体流，那么测试需要访问网络摄像头的 Web 应用程序可能会很困难。为了模仿网络摄像头访问并使用模拟媒体流和设备测试 Web 应用程序，现代浏览器都有自己的标志可供设置。

参考资料：

https://webrtc.org/getting-started/testing
https://testrtc.com/y4m-video-chrome/

作者：Dilshan Fernando