在無頭瀏覽器中測試

透過環境變數設定

預設情況下，測試會在 Node.js 上執行。要以瀏覽器為目標，您可以使用 WASM_BINDGEN_USE_BROWSER 環境變數

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

以下設定可用

WASM_BINDGEN_USE_DEDICATED_WORKER: 用於專用 workers
WASM_BINDGEN_USE_SHARED_WORKER: 用於共享 workers
WASM_BINDGEN_USE_SERVICE_WORKER: 用於 service workers
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。

如果傳遞了多個瀏覽器旗標，則會在每個瀏覽器下執行測試。

在無頭瀏覽器中執行測試

一旦設定好在無頭瀏覽器中執行測試，只需使用適當的瀏覽器旗標和 --headless 執行 wasm-pack test 即可

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