共计 3455 个字符，预计需要花费 9 分钟才能阅读完成。
本节咱们来学习如何在 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/