Electron 使用 Selenium 和 WebDriver

引自ChromeDriver - WebDriver for Chrome:

WebDriver 是一款開(kāi)源的支持多瀏覽器的自動(dòng)化測(cè)試工具。它提供了操作網(wǎng)頁(yè)、用戶輸入、JavaScript 執(zhí)行等能力。ChromeDriver 是一個(gè)實(shí)現(xiàn)了 WebDriver 與 Chromium 聯(lián)接協(xié)議的獨(dú)立服務(wù)。它也是由開(kāi)發(fā)了 Chromium 和 WebDriver 的團(tuán)隊(duì)開(kāi)發(fā)的。

為了能夠使 chromedriver 和 Electron 一起正常工作，我們需要告訴它 Electron 在哪，并且讓它相信 Electron 就是 Chrome 瀏覽器。

通過(guò) WebDriverJs 配置

WebDriverJs 是一個(gè)可以配合 WebDriver 做測(cè)試的 node 模塊，我們會(huì)用它來(lái)做個(gè)演示。

1. 啟動(dòng) ChromeDriver

首先，你要下載 chromedriver，然后運(yùn)行以下命令：

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

記住 9515 這個(gè)端口號(hào)，我們后面會(huì)用到

2. 安裝 WebDriverJS

$ npm install selenium-webdriver

3. 聯(lián)接到 ChromeDriver

在 Electron 下使用 selenium-webdriver 和其平時(shí)的用法并沒(méi)有大的差異，只是你需要手動(dòng)設(shè)置連接 ChromeDriver，以及 Electron 的路徑：

const webdriver = require('selenium-webdriver');

var driver = new webdriver.Builder()
  // "9515" 是ChromeDriver使用的端口
  .usingServer('http://localhost:9515')
  .withCapabilities({
    chromeOptions: {
      // 這里設(shè)置Electron的路徑
      binary: '/Path-to-Your-App.app/Contents/MacOS/Atom',
    }
  })
  .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(function() {
 return driver.getTitle().then(function(title) {
   return title === 'webdriver - Google Search';
 });
}, 1000);

driver.quit();

通過(guò) WebdriverIO 配置

WebdriverIO 也是一個(gè)配合 WebDriver 用來(lái)測(cè)試的 node 模塊

1. 啟動(dòng) ChromeDriver

首先，下載 chromedriver，然后運(yùn)行以下命令：

$ chromedriver --url-base=wd/hub --port=9515
Starting ChromeDriver (v2.10.291558) on port 9515
Only local connections are allowed.

記住 9515 端口，后面會(huì)用到

2. 安裝 WebdriverIO

$ npm install webdriverio

3. 連接到 ChromeDriver

const webdriverio = require('webdriverio');
var options = {
    host: "localhost", // 使用localhost作為ChromeDriver服務(wù)器
    port: 9515,        // "9515"是ChromeDriver使用的端口
    desiredCapabilities: {
        browserName: 'chrome',
        chromeOptions: {
          binary: '/Path-to-Your-App/electron', // Electron的路徑
          args: [/* cli arguments */]           // 可選參數(shù)，類似：'app=' + /path/to/your/app/
        }
    }
};

var client = webdriverio.remote(options);

client
    .init()
    .url('http://google.com')
    .setValue('#q', 'webdriverio')
    .click('#btnG')
    .getTitle().then(function(title) {
        console.log('Title was: ' + title);
    })
    .end();

工作流程

無(wú)需重新編譯 Electron，只要把 app 的源碼放到 Electron的資源目錄 里就可直接開(kāi)始測(cè)試了。