跳到内容
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>

向 Cargo 项目添加 Tauri

接下来，我们将添加必要的项，将我们的 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

注意：如果您正在修改应用程序并想要使用 Devtools，请在不使用 --release 的情况下运行它，并且“检查元素”应该在右键单击菜单中可用。

现在我们应该准备好开始使用一些 WebDriver 框架测试此应用程序了。本指南将按顺序介绍 WebdriverIO 和 Selenium。

© 2025 Tauri 贡献者。CC-BY / MIT