Electron uses Selenium and WebDriver

In this section we learn how to Electron use under Selenium and WebDriver .

Selenium

Selenium is a powerful browser-based open source automated testing tool provided by ThoughtWorks
Selenium is a Web application testing. The test runs directly in the browser automatically, just like a real user is manually operating. Supported browsers include IE , Chrome Opera , Firefox etc. The main functions of this tool include:

• Test the compatibility with the browser, test whether the application can work well on different browsers and operating systems.
• Test system functions, create regression tests to verify software functions and user requirements.
• Support automatic recording actions and automatic generation of test scripts in different languages such as .NET , Perl , Python , Ruby and Java

Selenium test runs directly in the browser, just like real users do. Selenium test can be run in Windows , Linux and Macintosh on Internet Explorer , Chrome and Firefox . No other testing tool can cover so many platforms.

WebDriver

WebDriver is an open source automated testing tool that supports multiple browsers. It provides the ability to operate web pages, user input, JavaScript execution and so on. ChromeDriver is an independent service that implements the WebDriver and Chromium It was also developed by the team that developed Chromium and WebDriver

Configure Spectron

Spectron is Electron officially supported ChromeDriver testing framework. It is built on WebdriverIO , and helps us to access Electron API and binding ChromeDriver in the test.

The installation command for spectron

$ npm install --save-dev spectron

Example:

The following code is used to test and verify whether a visual window with a title is opened:

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 exports a Application class, which can start and stop the Electron application after configuration. path field indicates the string path Electron application executable file to be started.

Configuration via WebDriverJs

WebDriverJs is a can with WebDriver do the test Node module.

Start ChromeDriver

First, we have to download chromedriver , and run the following command:

$ npm install electron-chromedriver

As shown below:

Then run the following command:

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

An error may be reported when executing this command:

$ C:\Users\lu\Desktop\my_electron>./node_modules/.bin/chromedriver
'.' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

We can replace the directory separator Windows default \ symbols:

Remember the port number 9515 , you will use it later.

Install WebDriverJS

Then we need to install WebDriverJS , execute the following command:

$ npm install selenium-webdriver

As shown below:

Connect to ChromeDriver

There is no big difference between using Electron selenium-webdriver and normal usage, but you need to manually set the path ChromeDriver and Electron

Example:

The code is as follows:

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()

Configure via WebdriverIO

WebdriverIO is a complex WebDriver for testing Node module.

Start ChromeDriver

First we have to install chromedriver , the command is as follows:

$ npm install electron-chromedriver

As shown below:

Then run the following command:

$ ./node_modules/.bin/chromedriver --url-base=wd/hub --port=9515

Results as shown below:

Install WebdriverIO

The command to install WebdriverIO is as follows:

$ npm install webdriverio

As shown below:

Connect to chrome driver

Then connect to chrome driver , the code is as follows:

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()

Without recompiling Electron , as long as the app source into Electron resource directory where you can directly start the test. Or we can also pass in parameters to specify the folder where the application is located when Electron Electron the step of copying and pasting applications to the 060c4709383cd1 resource directory.

Link: https://www.9xkd.com/