Skip to content
Tauri 中文网
开发指南 参考手册 Nodejs.cn 旗下网站

WebdriverIO

此 WebDriver 测试示例将使用 WebdriverIO 及其测试套件。预计已经安装了 Node.js，以及 npm 或 yarn，尽管 完成的示例项目 使用 yarn。

¥This WebDriver testing example will use WebdriverIO, and its testing suite. It is expected to have Node.js already installed, along with npm or yarn although the finished example project uses yarn.

为测试创建目录

¥Create a Directory for the Tests

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

¥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 only need to use one. Create the directory we will use with mkdir -p webdriver/webdriverio. The rest of this guide assumes you are inside the webdriver/webdriverio directory.

初始化 WebdriverIO 项目

¥Initializing a WebdriverIO Project

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

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

package.json：

{
  "name": "webdriverio",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "test": "wdio run wdio.conf.js"
  },
  "dependencies": {
    "@wdio/cli": "^7.9.1"
  },
  "devDependencies": {
    "@wdio/local-runner": "^7.9.1",
    "@wdio/mocha-framework": "^7.9.1",
    "@wdio/spec-reporter": "^7.9.0"
  }
}

我们有一个脚本，它将 WebdriverIO 配置作为测试套件运行，作为 test 命令公开。我们在第一次设置时还通过 @wdio/cli 命令添加了各种依赖。简而言之，这些依赖用于最简单的设置，使用本地 WebDriver 运行器、Mocha 作为测试框架和一个简单的 Spec Reporter。

¥We have a script that runs a WebdriverIO config as a test suite exposed as the test command. We also have various dependencies added by the @wdio/cli command when we first set it up. In short, these dependencies are for the most simple setup using a local WebDriver runner, Mocha as the test framework, and a simple Spec Reporter.

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

CLI 是交互式的，你可以选择自己使用的工具。请注意，你可能会与指南的其余部分有所不同，你需要自己设置差异。

¥The CLI is interactive, and you may choose the tools to work with yourself. Note that you will likely diverge from the rest of the guide, and you need to set up the differences yourself.

让我们将 WebdriverIO CLI 添加到这个 npm 项目中。

¥Let’s add the WebdriverIO CLI to this npm project.

npm install @wdio/cli

然后运行交互式配置命令来设置 WebdriverIO 测试套件，你可以运行：

¥To then run the interactive config command to set up a WebdriverIO test suite, you can then run:

npx wdio config

配置

¥Config

你可能已经注意到，我们的 package.json 中的 test 脚本提到了一个文件 wdio.conf.js。这是 WebdriverIO 配置文件，它控制着我们测试套件的大多数方面。

¥You may have noticed that the test script in our package.json mentions a file wdio.conf.js. That’s the WebdriverIO config file which controls most aspects of our testing suite.

wdio.conf.js：

const os = require('os');
const path = require('path');
const { spawn, spawnSync } = require('child_process');


// keep track of the `tauri-driver` child process
let tauriDriver;


exports.config = {
  specs: ['./develop/tests/specs/**/*.js'],
  maxInstances: 1,
  capabilities: [
    {
      maxInstances: 1,
      'tauri:options': {
        application: '../../target/release/hello-tauri-webdriver',
      },
    },
  ],
  reporters: ['spec'],
  framework: 'mocha',
  mochaOpts: {
    ui: 'bdd',
    timeout: 60000,
  },


  // ensure the rust project is built since we expect this binary to exist for the webdriver sessions
  onPrepare: () => spawnSync('cargo', ['build', '--release']),


  // ensure we are running `tauri-driver` before the session starts so that we can proxy the webdriver requests
  beforeSession: () =>
    (tauriDriver = spawn(
      path.resolve(os.homedir(), '.cargo', 'bin', 'tauri-driver'),
      [],
      { stdio: [null, process.stdout, process.stderr] }
    )),


  // clean up the `tauri-driver` process we spawned at the start of the session
  afterSession: () => tauriDriver.kill(),
};

如果你对 exports.config 对象的属性感兴趣，我 建议阅读文档。对于非 WDIO 特定项目，有注释解释了我们为什么在 onPrepare、beforeSession 和 afterSession 中运行命令。我们还将我们的规范设置为 "./develop/tests/specs/**/*.js"，所以现在让我们创建一个规范。

¥If you are interested in the properties on the exports.config object, I suggest reading the documentation. For non-WDIO specific items, there are comments explaining why we are running commands in onPrepare, beforeSession, and afterSession. We also have our specs set to "./develop/tests/specs/**/*.js", so let’s create a spec now.

规范

¥Spec

规范包含测试实际应用的代码。测试运行器将加载这些规范并根据需要自动运行它们。让我们现在在我们指定的目录中创建我们的规范。

¥A spec contains the code that is testing your actual application. The test runner will load these specs and automatically run them as it sees fit. Let’s create our spec now in the directory we specified.

test/specs/example.e2e.js：

// calculates the luma from a hex color `#abcdef`
function luma(hex) {
  if (hex.startsWith('#')) {
    hex = hex.substring(1);
  }


  const rgb = parseInt(hex, 16);
  const r = (rgb >> 16) & 0xff;
  const g = (rgb >> 8) & 0xff;
  const b = (rgb >> 0) & 0xff;
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}


describe('Hello Tauri', () => {
  it('should be cordial', async () => {
    const header = await $('body > h1');
    const text = await header.getText();
    expect(text).toMatch(/^[hH]ello/);
  });


  it('should be excited', async () => {
    const header = await $('body > h1');
    const text = await header.getText();
    expect(text).toMatch(/!$/);
  });


  it('should be easy on the eyes', async () => {
    const body = await $('body');
    const backgroundColor = await body.getCSSProperty('background-color');
    expect(luma(backgroundColor.parsed.hex)).toBeLessThan(100);
  });
});

上面的 luma 函数只是我们其中一个测试的辅助函数，与应用的实际测试无关。如果你熟悉其他测试框架，你可能会注意到使用的类似功能正在公开，例如 describe、it 和 expect。其他 API，例如 $ 及其公开的方法等项目，由 WebdriverIO API 文档 涵盖。

¥The luma function on top is just a helper function for one of our tests and is not related to the actual testing of the application. If you are familiar with other testing frameworks, you may notice similar functions being exposed that are used, such as describe, it, and expect. The other APIs, such as items like $ and its exposed methods, are covered by the WebdriverIO API docs.

运行测试套件

¥Running the Test Suite

现在我们已经设置了配置和规范，让我们运行它吧！

¥Now that we are all set up with config and a spec let’s run it!

npm test

我们应该看到以下输出：

¥We should see output the following output:

➜  webdriverio git:(main) ✗ yarn test
yarn run v1.22.11
$ wdio run wdio.conf.js


Execution of 1 workers started at 2021-08-17T08:06:10.279Z


[0-0] RUNNING in undefined - /develop/tests/specs/example.e2e.js
[0-0] PASSED in undefined - /develop/tests/specs/example.e2e.js


 "spec" Reporter:
------------------------------------------------------------------
[wry 0.12.1 linux #0-0] Running: wry (v0.12.1) on linux
[wry 0.12.1 linux #0-0] Session ID: 81e0107b-4d38-4eed-9b10-ee80ca47bb83
[wry 0.12.1 linux #0-0]
[wry 0.12.1 linux #0-0] » /develop/tests/specs/example.e2e.js
[wry 0.12.1 linux #0-0] Hello Tauri
[wry 0.12.1 linux #0-0]    ✓ should be cordial
[wry 0.12.1 linux #0-0]    ✓ should be excited
[wry 0.12.1 linux #0-0]    ✓ should be easy on the eyes
[wry 0.12.1 linux #0-0]
[wry 0.12.1 linux #0-0] 3 passing (244ms)




Spec Files:   1 passed, 1 total (100% completed) in 00:00:01


Done in 1.98s.

我们看到 Spec Reporter 告诉我们所有 3 个测试都来自 test/specs/example.e2e.js 文件，以及最终报告 Spec Files: 1 passed, 1 total (100% completed) in 00:00:01。

¥We see the Spec Reporter tell us that all 3 tests from the test/specs/example.e2e.js file, along with the final report Spec Files: 1 passed, 1 total (100% completed) in 00:00:01.

使用 WebdriverIO 测试套件，我们只需几行配置和一个运行命令即可轻松为我们的 Tauri 应用启用 e2e 测试！更好的是，我们根本不需要修改应用。

¥Using the WebdriverIO test suite, we just easily enabled e2e testing for our Tauri application from just a few lines of configuration and a single command to run it! Even better, we didn’t have to modify the application at all.

Tauri v2.4 中文网 - 粤ICP备13048890号
Nodejs.cn 旗下网站