Electron 使用Selenium和WebDriver

本节我们来学习如何在 Electron 下使用 Selenium 和 WebDriver。

Selenium

Selenium 是 ThoughtWorks 提供的一个强大的基于浏览器的开源自动化测试工具。
Selenium 是一个用于 Web 应用程序测试的工具，测试直接自动运行在浏览器中，就像真正的用户在手工操作一样。支持的浏览器包括 IE、Chrome Opera、Firefox 等。这个工具的主要功能包括：

• 测试与浏览器的兼容性，测试应用程序是否能够很好地工作在不同浏览器和操作系统之上。
• 测试系统功能，创建回归测试检验软件功能和用户需求。
• 支持自动录制动作和自动生成 .NET、Perl、Python、Ruby 和 Java 等不同语言的测试脚本。

Selenium 测试直接在浏览器中运行，就像真实用户所做的一样。Selenium 测试可以在 Windows、Linux 和 Macintosh 上的 Internet Explorer、Chrome 和 Firefox 中运行。其他测试工具都不能覆盖如此多的平台。

WebDriver

WebDriver 是一款开源的支持多浏览器的自动化测试工具。 它提供了操作网页、用户输入、JavaScript 执行等能力。 ChromeDriver 是一个实现了 WebDriver 与 Chromium 联接协议的独立服务。 它也是由开发了 Chromium 和 WebDriver 的团队开发的。

配置Spectron

Spectron 是 Electron 官方支持的 ChromeDriver 测试框架。 它是建立在 WebdriverIO 的顶层，并且帮助我们会在测试中访问 Electron API 和绑定 ChromeDriver。

spectron 的安装命令如下所示：

$ npm install --save-dev spectron

示例：

下述代码用于测试验证是否打开了一个带标题的可视窗口：

const Application = require('spectron').Application
const assert = require('assert')
const myApp = new Application({
  path: '/Applications/MyApp.app/Contents/MacOS/MyApp'
})
const verifyWindowIsVisibleWithTitle = async (app) => {
  await app.start()
  try {
    // 检查窗口是否可见
    const isVisible = await app.browserWindow.isVisible()
    // 验证窗口是否可见
    assert.strictEqual(isVisible, true)
    // 获取窗口标题
    const title = await app.client.getTitle()
    // 验证窗口标题
    assert.strictEqual(title, 'my_electron')
  } catch (error) {
    // 记录任何故障
    console.error('测试失败', error.message)
  }
  // 停止应用
  await app.stop()
}
verifyWindowIsVisibleWithTitle(myApp)

Spectron 导出一个 Application 类，该类在配置后可以启动和停止 Electron 应用程序。path 字段表示要启动的 Electron 应用程序可执行文件的字符串路径。

通过WebDriverJs配置

WebDriverJs 是一个可以配合 WebDriver 做测试的 Node 模块。

启动ChromeDriver

首先，我们要下载 chromedriver，运行如下命令：

$ npm install electron-chromedriver

如下图所示：

然后运行以下命令：

$ ./node_modules/.bin/chromedriver
Starting ChromeDriver (v2.10.291558) on port 9515
Only local connections are allowed.

在执行这个命令时可能会报错：

$ C:\Users\lu\Desktop\my_electron>./node_modules/.bin/chromedriver
'.' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

我们可以将目录分隔符换成 Windows 默认的 \ 符号：

记住端口号 9515，稍后将使用到。

安装WebDriverJS

然后我们需要安装 WebDriverJS， 执行如下命令：

$ npm install selenium-webdriver

如下图所示：

连接到ChromeDriver

在 Electron 下使用 selenium-webdriver 和平时的用法并没有大的差异，只是需要手动设置连接 ChromeDriver，以及 Electron 的路径。

示例：

代码如下所示：

const webdriver = require('selenium-webdriver')
const driver = new webdriver.Builder()
  // "9515" 是ChromeDriver使用的端口
  .usingServer('http://localhost:9515')
  .withCapabilities({
    chromeOptions: {
      // 这里设置Electron的路径
      binary: '/Path-to-Your-App.app/Contents/MacOS/Electron'
    }
  })
  .forBrowser('electron')
  .build()
driver.get('http://www.google.com')
driver.findElement(webdriver.By.name('q')).sendKeys('webdriver')
driver.findElement(webdriver.By.name('btnG')).click()
driver.wait(() => {
  return driver.getTitle().then((title) => {
    return title === 'webdriver - Google Search'
  })
}, 1000)
driver.quit()

通过WebdriverIO配置

WebdriverIO 也是一个配合 WebDriver 用来测试的 Node 模块。

启动ChromeDriver

首先我们要安装 chromedriver，命令如下所示：

$ npm install electron-chromedriver

如下图：

然后运行如下命令：

$ ./node_modules/.bin/chromedriver --url-base=wd/hub --port=9515

效果如下图所示：

安装WebdriverIO

安装 WebdriverIO 的命令如下所示：

$ npm install webdriverio

如下图所示：

连接到chrome driver

然后连接到 chrome driver，代码如下所示：

const webdriverio = require('webdriverio')
const options = {
  host: 'localhost', // 使用本地主机作为chrome driver服务器
  port: 9515, // "9515" 端口是否由chrome driver打开
  desiredCapabilities: {
    browserName: 'chrome',
    chromeOptions: {
      binary: '/Path-to-Your-App/electron', // Electron的路径
      args: [/* cli arguments */] // Optional, perhaps 'app=' + /path/to/your/app/
    }
  }
}
let client = webdriverio.remote(options)
client
  .init()
  .url('http://google.com')
  .setValue('#q', 'webdriverio')
  .click('#btnG')
  .getTitle().then((title) => {
    console.log('Title was: ' + title)
  })
  .end()

不需要重新编译 Electron，只要把 app 的源码放到 Electron 的资源目录里就可直接开始测试了。或者我们也可以在运行 Electron 时传入参数指定应用所在文件夹。这样可以免去拷贝粘贴应用到 Electron 资源目录的步骤。

链接：https://www.9xkd.com/