无头浏览器测试

配置您的测试箱

将此添加到您的测试箱的根目录，例如 `$MY_CRATE/tests/web.rs`

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

wasm_bindgen_test_configure!(run_in_browser);
}

或者，如果您需要在 Web Worker 中运行测试，也可以使用以下代码片段中的 `wasm_bindgen_test_configure` 宏进行配置。

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

// Run in dedicated worker.
wasm_bindgen_test_configure!(run_in_dedicated_worker);
// Or run in shared worker.
wasm_bindgen_test_configure!(run_in_shared_worker);
// Or run in service worker.
wasm_bindgen_test_configure!(run_in_service_worker);
}

请注意，虽然特定测试箱必须针对无头浏览器或 Node.js，但您可以通过使用多个测试箱为您的项目创建针对 Node.js 和浏览器的测试套件。例如

$MY_CRATE/
`-- tests
    |-- node.rs              # The tests in this suite use the default Node.js.
    |-- dedicated_worker.rs  # The tests in this suite are configured for dedicated workers.
    |-- shared_worker.rs     # The tests in this suite are configured for shared workers.
    |-- service_worker.rs    # The tests in this suite are configured for service workers.
    `-- web.rs               # The tests in this suite are configured for browsers.

配置使用哪个浏览器

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

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

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

在无头浏览器中运行测试

一旦测试配置为在无头浏览器中运行，只需使用适当的浏览器标志和 `--headless` 运行 `wasm-pack test`

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

配置无头浏览器功能

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

{
  "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` 指南