Electron 使用 Selenium 和 WebDriver

引自ChromeDriver - WebDriver for Chrome:

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

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

通過 WebDriverJs 配置

WebDriverJs 是一個可以配合 WebDriver 做測試的 node 模塊，我們會用它來做個演示。

1. 啟動 ChromeDriver

首先，你要下載 chromedriver，然后運行以下命令：

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

記住 9515 這個端口號，我們后面會用到

2. 安裝 WebDriverJS

$ npm install selenium-webdriver

3. 聯(lián)接到 ChromeDriver

在 Electron 下使用 selenium-webdriver 和其平時的用法并沒有大的差異，只是你需要手動設置連接 ChromeDriver，以及 Electron 的路徑：

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

var driver = new webdriver.Builder()
  // "9515" 是ChromeDriver使用的端口
  .usingServer('http://localhost:9515')
  .withCapabilities({
    chromeOptions: {
      // 這里設置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();

通過 WebdriverIO 配置

WebdriverIO 也是一個配合 WebDriver 用來測試的 node 模塊

1. 啟動 ChromeDriver

首先，下載 chromedriver，然后運行以下命令：

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

記住 9515 端口，后面會用到

2. 安裝 WebdriverIO

$ npm install webdriverio

3. 連接到 ChromeDriver

const webdriverio = require('webdriverio');
var options = {
    host: "localhost", // 使用localhost作為ChromeDriver服務器
    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();

工作流程

無需重新編譯 Electron，只要把 app 的源碼放到 Electron的資源目錄 里就可直接開始測試了。