跳到內容
Tauri
指南 參考 部落格 發行版本

Selenium

此 WebDriver 測試範例將使用 Selenium 和一個熱門的 Node.js 測試套件。 預期您已安裝 Node.js，以及 npm 或 yarn，儘管 完成的範例專案 使用 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 作為斷言函式庫，以及 selenium-webdriver，它是 Node.js 的 Selenium 套件。

如果您想了解如何從頭開始設定專案，請點擊我

如果您想從頭開始安裝依賴項，只需執行以下命令。

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

如果您熟悉 JS 測試框架，describe、it 和 expect 應該看起來很熟悉。 我們也有半複雜的 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 測試套件，其中所有 3 個我們用 it 建立的項目都通過了測試！

通過 Selenium 和一些與測試套件的連結，我們只需啟用 e2e 測試，而無需修改我們的 Tauri 應用程式！

© 2025 Tauri Contributors. CC-BY / MIT