跳转到内容
Tauri

此 WebDriver 测试示例将使用 Selenium 和一个流行的 Node.js 测试套件。假设您已经安装了 Node.js,并附带 npmyarn,尽管完成的示例项目使用 yarn

为测试创建目录

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

初始化 Selenium 项目

我们将使用一个现有的 package.json 来启动此测试套件,因为我们已经选择了要使用的特定依赖项,并希望展示一个简单的工作解决方案。本节底部有一个如何从头开始设置的折叠指南。

package.json:

{
"name": "selenium",
"version": "1.0.0",
"private": true,
"scripts": {
"test": "mocha"
},
"dependencies": {
"chai": "^4.3.4",
"mocha": "^9.0.3",
"selenium-webdriver": "^4.0.0-beta.4"
}
}

我们有一个脚本,将 Mocha 作为测试框架作为 test 命令公开。我们还有各种我们将用于运行测试的依赖项。测试框架为 Mocha,断言库为 Chai,并且是 Node.js 的 Seleniumselenium-webdriver

如果您想看到从头设置项目的方法,请点击此处

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

npm install mocha chai selenium-webdriver

建议在 package.json"scripts" 键中添加一个 "test": "mocha" 项,以便可以简单地将 Mocha 调用为

npm test

测试

WebdriverIO 测试套件 不同,Selenium 并不带有内建的测试套件,而是将其留给开发者来构建。我们选择了 Mocha,这是一个相当中立的框架,与 Webdriver 无关,因此我们的脚本需要做一些工作,以正确顺序为我们设置一切。默认情况下,Mocha 预期一个测试文件在 test/test.js 中,因此我们现在创建该文件。

test/test.js:

const os = require('os');
const path = require('path');
const { expect } = require('chai');
const { spawn, spawnSync } = require('child_process');
const { Builder, By, Capabilities } = require('selenium-webdriver');
// create the path to the expected application binary
const application = path.resolve(
__dirname,
'..',
'..',
'..',
'target',
'release',
'hello-tauri-webdriver'
);
// keep track of the webdriver instance we create
let driver;
// keep track of the tauri-driver process we start
let tauriDriver;
before(async function () {
// set timeout to 2 minutes to allow the program to build if it needs to
this.timeout(120000);
// ensure the program has been built
spawnSync('cargo', ['build', '--release']);
// start tauri-driver
tauriDriver = spawn(
path.resolve(os.homedir(), '.cargo', 'bin', 'tauri-driver'),
[],
{ stdio: [null, process.stdout, process.stderr] }
);
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 driver.quit();
// kill the tauri-driver process
tauriDriver.kill();
});
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);
});
});

如果您熟悉JavaScript测试框架,describeitexpect等功能应该很熟悉。我们还有半复杂的before()after()回调函数来设置和清理mocha。非测试本身的行都有注释来解释设置和清理代码。如果您熟悉WebdriverIO示例中的Spec文件,您会注意到还有很多不是测试的代码,因为我们还需要设置一些与WebDriver相关的项。

运行测试套件

现在,我们已经准备好了依赖项和测试脚本,让我们来运行它吧!

npm 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”测试套件中,我们用it创建的所有3个项目都通过了测试!

通过Selenium和将测试套件连接起来,我们没有修改我们的Tauri应用,就实现了端到端测试!


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