跳到內容
Tauri
指南 參考 部落格 發布

設定

此範例應用程式僅專注於將 WebDriver 測試新增至現有專案。為了在接下來的兩個章節中有一個專案可以測試，我們將設定一個極簡的 Tauri 應用程式以用於我們的測試。我們將不使用 Tauri CLI、任何前端依賴項或建置步驟，也不會在之後捆綁應用程式。這是為了展示一個極簡的套件，以展示將 WebDriver 測試新增至現有應用程式。

如果您只想查看完成的範例專案，其中使用了本範例指南中將展示的內容，那麼您可以查看 https://github.com/chippers/hello_tauri。

初始化 Cargo 專案

我們想要建立一個新的二進制 Cargo 專案來存放此範例應用程式。我們可以從命令列使用 cargo new hello-tauri-webdriver --bin 輕鬆完成此操作，這將為我們搭建一個最小的二進制 Cargo 專案。此目錄將作為本指南其餘部分的工作目錄，因此請確保您執行的命令位於這個新的 hello-tauri-webdriver/ 目錄內。

建立最小前端

我們將建立一個最小的 HTML 檔案，以作為我們的範例應用程式的前端。我們稍後也將在我們的 WebDriver 測試中使用此前端中的一些內容。

首先，讓我們建立我們的 Tauri distDir，我們知道在建置應用程式的 Tauri 部分後，我們將需要它。mkdir dist 應該建立一個名為 dist/ 的新目錄，我們將在其中放置以下 index.html 檔案。

dist/index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello Tauri!</title>
    <style>
      body {
        /* Add a nice colorscheme */
        background-color: #222831;
        color: #ececec;


        /* Make the body the exact size of the window */
        margin: 0;
        height: 100vh;
        width: 100vw;


        /* Vertically and horizontally center children of the body tag */
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <h1>Hello, Tauri!</h1>
  </body>
</html>

將 Tauri 新增至 Cargo 專案

接下來，我們將新增必要的項目，將我們的 Cargo 專案變成 Tauri 專案。首先，是將依賴項新增至 Cargo Manifest (Cargo.toml)，以便 Cargo 知道在建置時拉取我們的依賴項。

Cargo.toml:

[package]
name = "hello-tauri-webdriver"
version = "0.1.0"
edition = "2021"
rust-version = "1.56"


# Needed to set up some things for Tauri at build time
[build-dependencies]
tauri-build = "1"


# The actual Tauri dependency, along with `custom-protocol` to serve the pages.
[dependencies]
tauri = { version = "1", features = ["custom-protocol"] }


# Make --release build a binary that is small (opt-level = "s") and fast (lto = true).
# This is completely optional, but shows that testing the application as close to the
# typical release settings is possible. Note: this will slow down compilation.
[profile.release]
incremental = false
codegen-units = 1
panic = "abort"
opt-level = "s"
lto = true

您可能已經注意到，我們新增了 [build-dependency]。若要使用建置依賴項，我們必須從建置腳本中使用它。我們現在將在 build.rs 建立一個。

build.rs:

fn main() {
    // Only watch the `dist/` directory for recompiling, preventing unnecessary
    // changes when we change files in other project subdirectories.
    println!("cargo:rerun-if-changed=dist");


    // Run the Tauri build-time helpers
    tauri_build::build()
}

我們的 Cargo 專案現在知道如何使用所有這些設定來拉取和建置我們的 Tauri 依賴項。讓我們透過在實際專案程式碼中設定 Tauri 來完成這個最小的範例，使其成為 Tauri 應用程式。我們將編輯 src/main.rs 檔案以新增此 Tauri 功能。

src/main.rs:

fn main() {
    tauri::Builder::default()
        .run(tauri::generate_context!())
        .expect("unable to run Tauri application");
}

非常簡單，對吧？

Tauri 組態

我們將需要 2 件事才能成功建置應用程式。首先，我們需要一個圖示檔案。您可以使用任何 PNG 作為下一個部分，並將其複製到 icon.png。通常，當您使用 Tauri CLI 建立專案時，這將作為搭建的一部分提供。若要取得預設的 Tauri 圖示，我們可以使用命令 curl -L "https://github.com/chippers/hello_tauri/raw/main/icon.png" --output icon.png 下載 Hello Tauri 範例儲存庫使用的圖示。

我們將需要一個 tauri.conf.json 來設定 Tauri 的一些重要組態值。同樣，這通常來自 tauri init 搭建命令，但我們將在此處建立我們自己的最小組態。

tauri.conf.json:

{
  "build": {
    "distDir": "dist"
  },
  "tauri": {
    "bundle": {
      "identifier": "studio.tauri.hello_tauri_webdriver",
      "icon": ["icon.png"]
    },
    "allowlist": {
      "all": false
    },
    "windows": [
      {
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ]
  }
}

我將說明其中一些。您可以看到我們稍早建立的 dist/ 目錄指定為 distDir 屬性。我們設定了一個捆綁包識別碼，以便建置的應用程式具有唯一的 ID，並將 icon.png 設定為唯一的圖示。我們沒有使用任何 Tauri API 或功能，因此我們透過將 "all": false 設定在 allowlist 中來停用它們。視窗值僅設定要建立的單個視窗以及一些合理的預設值。

此時，我們有一個基本的 Hello World 應用程式，執行時應顯示簡單的問候語。

執行範例應用程式

為了確保我們做得正確，讓我們建置這個應用程式！我們將以 --release 應用程式的形式執行它，因為我們也將使用發布設定檔執行我們的 WebDriver 測試。執行 cargo run --release，在一些編譯之後，我們應該會看到以下應用程式彈出。

Hello Tauri Webdriver

注意：如果您正在修改應用程式並想要使用開發者工具，請在不使用 --release 的情況下執行它，並且「檢查元素」應該在右鍵選單中可用。

我們現在應該準備好開始使用一些 WebDriver 框架測試此應用程式。本指南將依序介紹 WebdriverIO 和 Selenium。

© 2025 Tauri 貢獻者。CC-BY / MIT