electronspectron

How to interact with the controls of an electron app using spectron


My project is using Electron framework. The developers have made a build and have given me an electron exe. When you open the exe it displays a login form which is the entry point of my application. The form basically has 3 controls: user name and password text boxes and a "Sign in" button. Now I have to perform a functional test on that page.

My requirement is to input some text into the user name and password text boxes and click on the submit button. (In this case the assumption is a successful login.) Once logged in I see a welcome message which I have to test.

How do you get the textbox and submit button references from the electron app and perform actions on them?

I have tried the below code. It opens my electron exe but does nothing and the test case passes.

var assert = require('assert');
var Application = require('spectron').Application
describe('Test Suite 1', function () {
    this.timeout(100000)
    beforeEach(function () {
        this.app = new Application({
            path: '/CorumDispense-win32-ia32/CorumDispense.exe'
        })

        return this.app.start()        
    })
    /*afterEach(function () {
        if (this.app && this.app.isRunning()) {
            return this.app.stop()            
        }
    })*/
    it('Login Dispense', function () {
        var txtUserName = this.app.client.elementIdText('inpuUsername3');
        var txtPassword = this.app.client.elementIdText('inputPassword3');   
        var btnSignIn = this.app.client.element('//button/*[text(),Sign in]');
        txtUserName.keys('Bharat');     
        txtPassword.keys('Bharat');     

        //click on signin button
        btnSignIn.click();

    })
})

The output shows the test case has passed, but I don't see any text being typed into the user name field or the password field, and the button has not been clicked.

Test Name:  Test Suite 1 Login Dispense
Test Outcome:   Passed
Result StandardOutput:  
mocha.json options file not found. Using default values: { ui: 'tdd', reporter: 'tap', timeout: 2000 }
1..1
ok 1 Test Suite 1 Login Dispense
# tests 1
# pass 1
# fail 0

My package.json

{
  "name": "lighthouse",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "description": "Lighthouse",
  "author": {
    "name": "bpappu"
  },
  "dependencies": {
    "body-parser": "~1.8.1",
    "cookie-parser": "~1.3.3",
    "debug": "~2.0.0",
    "express": "~4.9.0",
    "jade": "~1.6.0",
    "morgan": "~1.3.0",
    "serve-favicon": "~2.1.3",
    "spectron": "^3.4.0",
    "stylus": "0.42.3"
  },
  "devDependencies": {
    "chai": "^3.5.0",
    "electron": "^1.4.6",
    "electroner": "^4.0.2",
    "mocha": "^3.1.2",
    "spectron": "^3.4.0",
    "spectron-keys": "0.0.1"
  }
}

Solution

  • I have solved this issue. The problem seems to be the developer tools open in the application. That is causing the issue where I am unable to fetch the controls. Once the developers repackage the application with developer tools option closed then the above code works fine.