在无头浏览器中进行测试

通过环境变量配置

默认情况下，测试在 Node.js 上运行。要以浏览器为目标，可以使用 WASM_BINDGEN_USE_BROWSER 环境变量

WASM_BINDGEN_USE_BROWSER=1 cargo test --target wasm32-unknown-unknown

以下配置可用

WASM_BINDGEN_USE_DEDICATED_WORKER: 用于专用 worker
WASM_BINDGEN_USE_SHARED_WORKER: 用于共享 worker
WASM_BINDGEN_USE_SERVICE_WORKER: 用于 service worker
WASM_BINDGEN_USE_DENO: 用于 Deno
WASM_BINDGEN_USE_NODE_EXPERIMENTAL: 用于 Node.js，但作为 ES 模块

强制配置

还可以使用 wasm_bindgen_test_configure! 宏强制测试在特定环境中运行

#![allow(unused)]
fn main() {
use wasm_bindgen_test::wasm_bindgen_test_configure;

// Run in a browser.
wasm_bindgen_test_configure!(run_in_browser);
// Or run in a dedicated worker.
wasm_bindgen_test_configure!(run_in_dedicated_worker);
// Or run in a shared worker.
wasm_bindgen_test_configure!(run_in_shared_worker);
// Or run in a service worker.
wasm_bindgen_test_configure!(run_in_service_worker);
// Or run in Node.js but as an ES module.
wasm_bindgen_test_configure!(run_in_node_experimental);
}

请注意，这将忽略任何已设置的环境变量。

配置使用哪个浏览器

要控制用于无头测试的浏览器，请使用 wasm-pack test 的相应标志

wasm-pack test --chrome — 在 Chrome 中运行测试。此机器必须安装 Chrome。
wasm-pack test --firefox — 在 Firefox 中运行测试。此机器必须安装 Firefox。
wasm-pack test --safari — 在 Safari 中运行测试。此机器必须安装 Safari。

如果传递了多个浏览器标志，则将在每个浏览器下运行测试。

在无头浏览器中运行测试

一旦配置好在无头浏览器中运行测试，只需运行 wasm-pack test 并带有适当的浏览器标志和 --headless

wasm-pack test --headless --chrome --firefox --safari

配置无头浏览器功能

将文件 webdriver.json 添加到 crate 的根目录。每个浏览器都有自己的功能部分。例如

{
  "moz:firefoxOptions": {
    "prefs": {
      "media.navigator.streams.fake": true,
      "media.navigator.permission.disabled": true
    },
    "args": []
  },
  "goog:chromeOptions": {
    "args": [
      "--use-fake-device-for-media-stream",
      "--use-fake-ui-for-media-stream"
    ]
  }
}

可以在这里找到支持的完整功能列表

对于 Chrome - 这里
对于 Firefox - 这里

请注意，对于这两个浏览器，headless 参数始终启用。

调试无头浏览器测试

省略 --headless 标志将禁用无头模式，并允许你在浏览器的开发人员工具中调试失败的测试。

附录：在没有 `wasm-pack` 的情况下在无头浏览器中进行测试

⚠️ 使用 wasm-bindgen-test 的推荐方法是使用 wasm-pack，因为它会处理安装测试运行程序、安装浏览器的 WebDriver 客户端，并告知 cargo 如何使用自定义测试运行程序。但是，如果你愿意，也可以自己管理这些任务。

配置使用哪个浏览器

如果设置了以下环境变量之一，则将使用相应的 WebDriver 和浏览器。如果未设置这些环境变量，则会在 $PATH 中搜索合适的 WebDriver 实现。

`GECKODRIVER=path/to/geckodriver`

使用 Firefox 进行无头浏览器测试，并使用 geckodriver 作为其 WebDriver。

firefox 二进制文件必须在你的 $PATH 中。

在此处获取 geckodriver

`CHROMEDRIVER=path/to/chromedriver`

使用 Chrome 进行无头浏览器测试，并使用 chromedriver 作为其 WebDriver。

chrome 二进制文件必须在你的 $PATH 中。

在此处获取 chromedriver

`SAFARIDRIVER=path/to/safaridriver`

使用 Safari 进行无头浏览器测试，并使用 safaridriver 作为其 WebDriver。

默认情况下，它在 Mac OS 上安装。它应该能够默认找到你的 Safari 安装。

在远程无头浏览器中运行测试

可以在远程 webdriver 上运行测试。为此，必须将上述环境变量设置为远程 webdriver 的 URL。例如

CHROMEDRIVER_REMOTE=http://remote.host/

在无头浏览器中运行测试

一旦配置好在无头浏览器中运行测试并设置了适当的环境变量，执行无头浏览器的测试与执行 Node.js 的测试相同

cargo test --target wasm32-unknown-unknown

调试无头浏览器测试

设置 NO_HEADLESS=1 环境变量，浏览器测试将不会以无头模式运行。相反，测试将启动一个本地服务器，你可以在你选择的 Web 浏览器中访问该服务器，并且不应使用无头测试。然后你可以使用浏览器的开发人员工具进行调试。

`wasm-bindgen` 指南