vue-cli3+electron+chromedriver+selenium-webdriver cannot find element - selenium-webdriver

Question

I use vue-cli project (that installed electron+seleniumWebDriver) run tests with ChromeDriver.
I keep running chromedriver (that installed in my vue-cli project) then I ran the test file 'node ff.js'.
The Electron app was run in screen but nothing happened. Then wait till the process exited, the result became error 'UnhandledPromiseRejectionWarning: WebDriverError: unknown error: DevToolsActivePort file doesn't exist'.
I searched the web for it and found the solution that the others claimed it works fine. It is just add a '--disable-dev-shm-usage' to chrome options. But it still error.
ff.js
const webdriver = require('selenium-webdriver')
const chrome = require('selenium-webdriver/chrome');
const driver = new webdriver.Builder()
// The "9515" is the port opened by chrome driver.
.usingServer('http://localhost:9515')
.withCapabilities({
chromeOptions: {
args: ['--headless', '--disable-gpu', '--no-sandbox', '--disable-extensions', '--disable-dev-shm-usage', 'start-minimized'],
// Here is the path to your Electron binary.
binary: './dist_electron/mac/myapp.app/Contents/MacOS/myapp'
}
})
.setChromeOptions(new chrome.Options().addArguments('--remote-debugging-port=7070'))
.forBrowser('electron')
.build()
driver.quit()
package.json
"devDependencies": {
"#types/chai": "^4.1.0",
"#types/mocha": "^5.2.4",
"#vue/cli-plugin-babel": "^3.5.0",
"#vue/cli-plugin-e2e-nightwatch": "^3.6.0",
"#vue/cli-plugin-eslint": "^3.5.0",
"#vue/cli-plugin-typescript": "^3.5.0",
"#vue/cli-plugin-unit-mocha": "^3.5.0",
"#vue/cli-service": "^3.5.0",
"#vue/eslint-config-standard": "^4.0.0",
"#vue/eslint-config-typescript": "^4.0.0",
"#vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-plugin-istanbul": "^5.1.3",
"bootstrap": "^4.3.1",
"chai": "^4.1.2",
"chromedriver": "^73.0.0",
"copy-webpack-plugin": "^5.0.2",
"electron": "^4.0.0",
"electron-rebuild": "^1.8.4",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"jquery": "^3.4.0",
"mocha": "^6.1.4",
"mochawesome": "^3.1.2",
"node-sass": "^4.9.0",
"nyc": "^14.0.0",
"popper.js": "^1.15.0",
"sass-loader": "^7.1.0",
"selenium-webdriver": "^4.0.0-alpha.1",
"ts-node": "^8.1.0",
"ts-protoc-gen": "^0.9.0",
"typescript": "^3.2.1",
"vue-cli-plugin-electron-builder": "^1.2.0",
"vue-template-compiler": "^2.5.21",
"vuex-module-decorators": "^0.9.8",
"webdriverio": "^5.8.3"
}
ps. I've tried with ChromeDriver#74.x.x, it still resulted same error.
Actually, I've tried with Selenium RobotFramework and still found the same error. I think it was something wrong with my test writing or some settings. (I'm not good in test tool.)
Just for information
mytest.robot
*** Settings ***
Library Selenium2Library
Variables vars.py
*** Test Cases ***
Foohaha
Create Webdriver Remote desired_capabilities=${binary_location} command_executor=http://localhost:9515
Log To Console ${item.get_attribute('innerHTML')}
[Teardown] Close All Browsers
P.s. The reason why not spectron is the tester I have only use the Selenium.

Answer 1

After I tried almost recommended testing library. I ended up with testcafe. Setting the pref app path to my distributed app's binary then set the page to open as html file in test file. The primary path was a default value.
This is how I set it up.
.testcafe-electron-rc
{
"mainWindowUrl": "app://./index.html",
"electronPath": "/Users/xxx/Documents/ProjectFolder/dist_electron/mac/my-lovely-app.app/Contents/MacOS/my-lovely-app",
"openDevTools": "true"
}
package.json
"scripts": {
...
"cafe": "testcafe \"electron:/Users/xxx/Documents/ProjectFolder/.testcafe-electron-rc\" \"/Users/xxx/Documents/ProjectFolder/tests/e2e/specs/testcafe.js\""
},
"devDependencies": {
...
"selenium-webdriver": "^4.0.0-alpha.1",
"testcafe": "^1.1.4",
"testcafe-browser-provider-electron": "0.0.8"
}
testcafe.js
import { Selector } from 'testcafe';
fixture(`Index page`)
.page('/Users/xxx/Documents/ProjectFolder/dist_electron/bundled/index.html');
test('Body > Paragraph contains "Hello World!"', async testController => {
const paragraphSelector = await new Selector('#nav > a.router-link-exact-active.router-link-active');
const txt = await new Selector('#app > div.auth-page > div > div > div > form > fieldset:nth-child(1) > input');
await testController.click(paragraphSelector)
.typeText(txt, 'Peter Parker');
// .expect(paragraphSelector.innerText).eql("Login");//.eql('Login');
});
Hope this will help someone.