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 的最簡單設置。

如果您想了解如何從頭開始設置一個項目，請按一下我

CLI 是互動式的，您可以選擇自己要使用的工具。請注意，您可能會偏離指南的其餘部分，並且您需要自己設置差異。

讓我們將 WebdriverIO CLI 添加到這個 npm 項目。

npm

npm install @wdio/cli

Yarn

yarn add @wdio/cli

Bun

bun add @wdio/cli

然後執行互動式配置命令以設置 WebdriverIO 測試套件，您可以執行

npm

npx wdio config

Yarn

yarn wdio config

Bun

bunx wdio config

配置

您可能已經注意到我們的 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 物件上的屬性感興趣，我 建議閱讀文件。對於非 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。其他 API，例如 $ 和其公開的方法等項目，則由 WebdriverIO API 文件 涵蓋。

執行測試套件

現在我們已經設定好設定檔和規格，讓我們執行它！

npm

npm test

Yarn

yarn test

Bun

bun run 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 測試！更好的是，我們根本不需要修改應用程式。