跳至主要內容

設定範例

此範例應用程式僅專注於將 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 清單 (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 或功能，因此我們在 allowlist 中透過設定 "all": false 來停用它們。視窗值只設定一個視窗，並使用一些合理的預設值來建立。

在這個階段，我們有一個基本的 Hello World 應用程式，在執行時應該會顯示簡單的問候語。

執行範例應用程式​

為了確保我們做對了，讓我們建置這個應用程式！我們將以 --release 應用程式的身分執行它，因為我們也會使用發行設定檔執行 WebDriver 測試。執行 cargo run --release，在編譯一段時間後，我們應該會看到下列應用程式彈出。

注意：如果您正在修改應用程式，並想要使用 Devtools，請在沒有 --release 的情況下執行它，然後「檢查元素」應該會出現在右鍵選單中。

我們現在應該可以開始使用一些 WebDriver 架構來測試這個應用程式。本指南將按順序介紹 WebdriverIO 和 Selenium。