本节咱们来学习如何在 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').Applicationconst 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/chromedriverStarting ChromeDriver (v2.10.291558) on port 9515Only 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/