Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Electron uses Selenium and WebDriver


May 25, 2021 Electron


Table of contents


Quote from ChromeDriver - WebDriver for Chrome :

WebDriver is an open source, multi-browser,000-based automated testing tool. I t provides the ability to manipulate web pages, user input, JavaScript execution, and more. C hromeDriver is a stand-alone service that implements the WebDriver and Chromium join protocols. It was also developed by the team that developed Chromium and WebDriver.

In order for chromedriver with Electron, we need to tell it where Electron is and convince it that Electron is Chrome.

Configured via WebDriverJs

WebDriverJs is a node module that can be tested with WebDriver, and we'll use it for a demonstration.

1. Start ChromeDriver

First, you want to chromedriver and then run the following command:

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

Remember 9515 port number, which we'll use later

2. Install WebDriverJS

$ npm install selenium-webdriver

3. Link to ChromeDriver

There's no big selenium-webdriver under Electron and its usual usage, but you'll need to manually set the path to ChromeDriver, as well as 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();

Configured via WebdriverIO

WebdriverIO is also a node module that WebDriver uses to test

1. Start ChromeDriver

First, download chromedriver and then run the following command:

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

Remember 9515 which you'll use later

2. Install WebdriverIO

$ npm install webdriverio

3. Connect to 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 */]           // 可选参数,类似:'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();

Workflow

There is no need to recompile Electron, just put the app's source code in Electron's resource directory and start testing directly.

Of course, you can also specify the folder where your app is located when you run Electron. This step eliminates you copying-pasting your app into Electron's resource catalog.