跳转到内容
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 清单文件 (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()
}

我们的货运项目现在已经知道如何拉入和构建我们的 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 配置

要成功构建应用程序,我们需要两样东西。首先,我们需要一个图标文件。您可以为此部分使用任何 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,在编译一段时间后,我们应该看到以下应用程序弹出。

Hello Tauri Webdriver

注意:如果您正在修改应用程序并想使用 Devtools,那么无需 --release 运行它,在右键菜单中应可获得“检查元素”选项。

我们现在应该准备好使用一些 WebDriver 框架开始测试这个应用程序。本指南将按顺序介绍 WebdriverIOSelenium


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