WebdriverIO

示例应用

本 WebdriverIO 指南希望您已完成示例应用程序的设置，以便一步一步地进行操作。否则，一般信息可能仍然有用。

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

创建测试目录

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

初始化 WebdriverIO 项目

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

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 进行的最简单设置。

如果您想了解如何从零开始创建项目，请点击我

配置

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

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: ['./test/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 对象的属性感兴趣，我建议你阅读文档。对于non-WDIO 特定项目，有注释解释了为什么我们要在 onPrepare、beforeSession 和 afterSession 中运行命令。我们还将规范设置为"./test/specs/**/*.js"，因此现在让我们创建一个规范。

规范

规范包含测试实际应用程序的代码。测试运行程序会加载这些规范，并在它认为合适的时候自动运行它们。现在，让我们在指定的目录中创建规范。

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。WebdriverIO API 文档涵盖了其他 API，如 $ 等项目及其暴露的方法。

运行测试套件

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

npm
Yarn

npm test

yarn test

我们应该看到以下输出结果：


➜  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 - /test/specs/example.e2e.js
[0-0] PASSED in undefined - /test/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] » /test/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 告诉我们，test/specs/example.e2e.js 文件中的所有 3 个测试，以及最终报告 Spec Files: 1 passed, 1 total (100% completed) in 00:00:01。

使用 WebdriverIO 测试套件，我们只需几行配置和一条运行命令，就能轻松启用 Tauri 应用程序的 e2e 测试！更棒的是，我们根本无需修改应用程序。

selenium

持续集成

创建测试目录
初始化 WebdriverIO 项目
配置
规范
运行测试套件