# 使用 Selenium 和 WebDriver 引自[ChromeDriver - WebDriver for Chrome][chrome-driver]: > WebDriver 是一款開源的支持多瀏覽器的自動化測試工具。它提供了操作網頁、用戶輸入、JavaScript 執行等能力。ChromeDriver 是一個實現了 WebDriver 與 Chromium 聯接協議的獨立服務。它也是由開發了 Chromium 和 WebDriver 的團隊開發的。 為了能夠使 `chromedriver` 和 Electron 一起正常工作，我們需要告訴它 Electron 在哪，并且讓它相信 Electron 就是 Chrome 瀏覽器。 ## 通過 WebDriverJs 配置 [WebDriverJs](https://code.google.com/p/selenium/wiki/WebDriverJs) 是一個可以配合 WebDriver 做測試的 node 模塊，我們會用它來做個演示。 ### 1. 啟動 ChromeDriver 首先，你要下載 `chromedriver`，然后運行以下命令： ```bash $ ./chromedriver Starting ChromeDriver (v2.10.291558) on port 9515 Only local connections are allowed. ``` 記住 `9515` 這個端口號，我們后面會用到 ### 2. 安裝 WebDriverJS ```bash $ npm install selenium-webdriver ``` ### 3. 聯接到 ChromeDriver 在 Electron 下使用 `selenium-webdriver` 和其平時的用法并沒有大的差異，只是你需要手動設置連接 ChromeDriver，以及 Electron 的路徑： ```javascript 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](http://webdriver.io/) 也是一個配合 WebDriver 用來測試的 node 模塊 ### 1. 啟動 ChromeDriver 首先，下載 `chromedriver`，然后運行以下命令： ```bash $ chromedriver --url-base=wd/hub --port=9515 Starting ChromeDriver (v2.10.291558) on port 9515 Only local connections are allowed. ``` 記住 `9515` 端口，后面會用到 ### 2. 安裝 WebdriverIO ```bash $ npm install webdriverio ``` ### 3. 連接到 ChromeDriver ```javascript 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 */] // 可選參數，類似：'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的資源目錄](https://github.com/electron/electron/blob/master/docs/tutorial/application-distribution.md) 里就可直接開始測試了。 當然，你也可以在運行 Electron 時傳入參數指定你 app 的所在文件夾。這步可以免去你拷貝－粘貼你的 app 到 Electron 的資源目錄。 [chrome-driver]: https://sites.google.com/a/chromium.org/chromedriver/