跳至主要内容

设置示例

此示例应用程序仅专注于向现有项目添加 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
      }
    ]
  }
}

我将介绍其中的部分内容。您可以看到我们之前指定的作为 `distDir` 属性的 `dist/` 目录。我们设置了一个包标识符，以便构建的应用程序具有唯一的 ID，并将 `icon.png` 设置为唯一的图标。我们没有使用任何 Tauri API 或功能，因此我们在 `allowlist` 中通过将 `"all": false` 设置为禁用它们。窗口值只设置一个窗口，并使用一些合理的默认值创建该窗口。

此时，我们有一个基本的 Hello World 应用程序，它在运行时应显示一个简单的问候语。

运行示例应用程序​

为了确保我们正确地完成了它，让我们构建此应用程序！我们将以 `--release` 应用程序的形式运行它，因为我们还将使用发布配置文件运行我们的 WebDriver 测试。运行 `cargo run --release`，在编译一段时间后，我们应该会看到弹出以下应用程序。

注意：如果您正在修改应用程序并希望使用 Devtools，那么在没有 `--release` 的情况下运行它，并且“检查元素”应该在右键单击菜单中可用。

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