跳至主要内容

设置示例

此示例应用程序仅关注向现有项目添加 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 配置​

我们需要两样东西才能成功构建应用程序。首先，我们需要一个图标文件。对于接下来的部分，您可以使用任何 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` 属性。我们设置了一个 bundle 标识符，以便构建的应用程序具有唯一的 ID，并将 `icon.png` 设置为唯一的图标。我们没有使用任何 Tauri API 或功能，因此我们通过将 `“all”: false` 设置在 `allowlist` 中禁用它们。窗口值只是设置要创建的单个窗口以及一些合理的默认值。

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

运行示例应用程序​

为了确保我们做得正确，让我们构建此应用程序！我们将将其作为 `--release` 应用程序运行，因为我们还将使用 release 配置文件运行我们的 WebDriver 测试。运行 `cargo run --release`，经过一些编译后，我们应该看到以下应用程序弹出。

注意：如果您正在修改应用程序并想使用 Devtools，则无需 `--release` 运行它，“检查元素”应该在右键菜单中可用。

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