Skip to content
Tauri 中文网
开发指南 参考手册 当前版本 v2.2

Selenium

此 WebDriver 测试示例将使用 Selenium 和流行的 Node.js 测试套件。你应该已经安装了 Node.js，以及 npm 或 yarn，尽管 完成的示例项目 使用 yarn。

¥This WebDriver testing example will use Selenium and a popular Node.js testing suite. You are expected to already have Node.js installed, along with npm or yarn although the finished example project uses yarn.

为测试创建目录

¥Create a Directory for the Tests

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

¥Let’s create a space to write these tests in our project. We will be using a nested directory for this example project as we will later also go over other frameworks, but typically you will only need to use one. Create the directory we will use with mkdir -p webdriver/selenium. The rest of this guide will assume you are inside the webdriver/selenium directory.

初始化 Selenium 项目

¥Initializing a Selenium Project

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

¥We will be using a pre-existing package.json to bootstrap this test suite because we have already chosen specific dependencies to use and want to showcase a simple working solution. The bottom of this section has a collapsed guide on how to set it up from scratch.

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 作为断言库，selenium-webdriver 是 Node.js Selenium 包。

¥We have a script that runs Mocha as a test framework exposed as the test command. We also have various dependencies that we will be using to run the tests. Mocha as the testing framework, Chai as the assertion library, and selenium-webdriver which is the Node.js Selenium package.

Click me if you want to see how to set a project up from scratch

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

¥If you want to install the dependencies from scratch, just run the following command.

npm install mocha chai selenium-webdriver

我建议在 package.json "scripts" 键中添加一个 "test": "mocha" 项，这样就可以简单地使用

¥I suggest also adding a "test": "mocha" item in the package.json "scripts" key so that running Mocha can be called simply with

npm test

测试

¥Testing

与 WebdriverIO 测试套件 不同，Selenium 不附带测试套件，而是由开发者自行构建。我们选择了 Mocha，它非常中性，与 WebDrivers 无关，因此我们的脚本需要做一些工作来按照正确的顺序为我们设置一切。Mocha 默认需要 test/test.js 处的测试文件，因此我们现在来创建该文件。

¥Unlike the WebdriverIO Test Suite, Selenium does not come out of the box with a Test Suite and leaves it up to the developer to build those out. We chose Mocha, which is pretty neutral and not related to WebDrivers, so our script will need to do a bit of work to set up everything for us in the correct order. Mocha expects a testing file at test/test.js by default, so let’s create that file now.

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);
  });
});

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

¥If you are familiar with JS testing frameworks, describe, it, and expect should look familiar. We also have semi-complex before() and after() callbacks to set up and teardown mocha. Lines that are not the tests themselves have comments explaining the setup and teardown code. If you were familiar with the Spec file from the WebdriverIO example, you notice a lot more code that isn’t tests, as we have to set up a few more WebDriver related items.

运行测试套件

¥Running the Test Suite

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

¥Now that we are all set up with our dependencies and our test script, let’s run it!

npm test

我们应该看到以下输出：

¥We should see output the following output:

➜  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 个项目都通过了测试！

¥We can see that our Hello Tauri test suite we created with describe had all 3 items we created with it pass their tests!

使用 Selenium 和一些测试套件，我们只需启用 e2e 测试，而无需修改我们的 Tauri 应用！

¥With Selenium and some hooking up to a test suite, we just enabled e2e testing without modifying our Tauri application at all!

Tauri 中文网 - 粤ICP备13048890号