乐趣区

关于electron:Electron-使用Selenium和WebDriver

jiezi

本节咱们来学习如何在 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/

退出移动版