Selenium

示例应用程序

此 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

npm install mocha chai selenium-webdriver

yarn

yarn add mocha chai selenium-webdriver

我还建议在 package.json "scripts" 键中添加一个 "test": "mocha" 项，以便可以使用以下命令简单地调用 Mocha 运行

npm

npm test

yarn

yarn 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

npm test

yarn

yarn 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 应用程序！