Selenium

本 WebDriver 测试示例将使用 Selenium 和一个流行的 Node.js 测试套件。您需要预先安装 Node.js 以及 npm 或 yarn，尽管最终示例项目使用了 pnpm。

创建测试目录

让我们在项目中为这些测试创建一个空间。此示例项目将使用嵌套目录，因为我们稍后还将介绍其他框架，但通常您只需要使用一个。使用 mkdir -p e2e-tests 创建目录。本指南的其余部分将假设您位于 e2e-tests 目录中。

初始化 Selenium 项目

我们将使用一个预先存在的 package.json 来引导此测试套件，因为我们已经选择了特定的依赖项，并希望展示一个简单可行的解决方案。本节底部有一个折叠的指南，说明如何从头开始设置它。

package.json:

{
  "name": "selenium",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "mocha"
  },
  "dependencies": {
    "chai": "^5.2.1",
    "mocha": "^11.7.1",
    "selenium-webdriver": "^4.34.0"
  }
}

我们有一个脚本，它将 Mocha 作为测试框架，并通过 test 命令暴露。我们还有各种将用于运行测试的依赖项。Mocha 作为测试框架，Chai 作为断言库，以及 selenium-webdriver，它是 Node.js Selenium 包。

点击此处查看如何从头开始设置项目

如果您想从头安装依赖项，只需运行以下命令。

npm
yarn

npm install mocha chai selenium-webdriver

yarn add mocha chai selenium-webdriver

我建议还在 package.json "scripts" 键中添加一个 "test": "mocha" 项，这样就可以简单地通过以下方式调用运行 Mocha：

npm
yarn

npm test

yarn test

测试

与WebdriverIO 测试套件不同，Selenium 不自带测试套件，而是由开发者自行构建。我们选择了Mocha，它是一个相当中立且与 WebDriver 无关的测试框架，因此我们的脚本需要做一些工作来按正确顺序设置所有内容。Mocha 默认期望在 test/test.js 处有一个测试文件，所以现在让我们创建该文件。

test/test.js:

import os from 'os';
import path from 'path';
import { expect } from 'chai';
import { spawn, spawnSync } from 'child_process';
import { Builder, By, Capabilities } from 'selenium-webdriver';
import { fileURLToPath } from 'url';

const __dirname = fileURLToPath(new URL('.', import.meta.url));

// create the path to the expected application binary
const application = path.resolve(
  __dirname,
  '..',
  '..',
  'src-tauri',
  'target',
  'debug',
  'tauri-app'
);

// keep track of the webdriver instance we create
let driver;

// keep track of the tauri-driver process we start
let tauriDriver;
let exit = false;

before(async function () {
  // set timeout to 2 minutes to allow the program to build if it needs to
  this.timeout(120000);

  // ensure the app has been built
  spawnSync('yarn', ['tauri', 'build', '--debug', '--no-bundle'], {
    cwd: path.resolve(__dirname, '../..'),
    stdio: 'inherit',
    shell: true,
  });

  // start tauri-driver
  tauriDriver = spawn(
    path.resolve(os.homedir(), '.cargo', 'bin', 'tauri-driver'),
    [],
    { stdio: [null, process.stdout, process.stderr] }
  );
  tauriDriver.on('error', (error) => {
    console.error('tauri-driver error:', error);
    process.exit(1);
  });
  tauriDriver.on('exit', (code) => {
    if (!exit) {
      console.error('tauri-driver exited with code:', code);
      process.exit(1);
    }
  });

  const capabilities = new Capabilities();
  capabilities.set('tauri:options', { application });
  capabilities.setBrowserName('wry');

  // start the webdriver client
  driver = await new Builder()
    .withCapabilities(capabilities)
    .usingServer('http://127.0.0.1:4444/')
    .build();
});

after(async function () {
  // stop the webdriver session
  await closeTauriDriver();
});

describe('Hello Tauri', () => {
  it('should be cordial', async () => {
    const text = await driver.findElement(By.css('body > h1')).getText();
    expect(text).to.match(/^[hH]ello/);
  });

  it('should be excited', async () => {
    const text = await driver.findElement(By.css('body > h1')).getText();
    expect(text).to.match(/!$/);
  });

  it('should be easy on the eyes', async () => {
    // selenium returns color css values as rgb(r, g, b)
    const text = await driver
      .findElement(By.css('body'))
      .getCssValue('background-color');

    const rgb = text.match(/^rgb\((?<r>\d+), (?<g>\d+), (?<b>\d+)\)$/).groups;
    expect(rgb).to.have.all.keys('r', 'g', 'b');

    const luma = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b;
    expect(luma).to.be.lessThan(100);
  });
});

async function closeTauriDriver() {
  exit = true;
  // kill the tauri-driver process
  tauriDriver.kill();
  // stop the webdriver session
  await driver.quit();
}

function onShutdown(fn) {
  const cleanup = () => {
    try {
      fn();
    } finally {
      process.exit();
    }
  };

  process.on('exit', cleanup);
  process.on('SIGINT', cleanup);
  process.on('SIGTERM', cleanup);
  process.on('SIGHUP', cleanup);
  process.on('SIGBREAK', cleanup);
}

onShutdown(() => {
  closeTauriDriver();
});

如果您熟悉 JS 测试框架，describe、it 和 expect 应该很熟悉。我们还有半复杂的 before() 和 after() 回调来设置和拆卸 Mocha。非测试行有注释解释设置和拆卸代码。如果您熟悉WebdriverIO 示例中的 Spec 文件，您会发现有很多不是测试的代码，因为我们必须设置更多与 WebDriver 相关的项。

运行测试套件

现在我们已经设置好了依赖项和测试脚本，让我们来运行它！

npm
yarn

npm test

yarn test

我们应该看到以下输出：

➜  selenium git:(main) ✗ yarn test
yarn run v1.22.11
$ Mocha


  Hello Tauri
    ✔ should be cordial (120ms)
    ✔ should be excited
    ✔ should be easy on the eyes


  3 passing (588ms)

Done in 0.93s.

我们可以看到我们用 describe 创建的 Hello Tauri 测试套件中，所有 3 个用 it 创建的测试都通过了！

通过 Selenium 并连接到测试套件，我们无需修改 Tauri 应用程序即可启用端到端测试！

在 Open Collective 上支持在 GitHub 上赞助