CODEWITHSUNDEEP
javascripttestingdomelectronspectron
pyan
pyan

Reputation: 885

Testing Text Input for Electron App

I'm trying to get to grips with using Electron, and Spectron for its testing.

I would like to write in my body which is contentEditable, and then check that the text matches in my test. So far I've managed to write a successful test for the title, but am unable to find a solution to this one.

Index.html;

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Hello</title>
    </head>
    <body id = "test" contentEditable = true>
    </body>
</html>

featureTest.js which includes the passing test for title, and my attempt for the test I would like at the bottom.

const electron = require("electron");
var expect = require("chai").expect;

var Application = require("spectron").Application;
var assert = require("assert");

describe("application launch", function() {
  this.timeout(10000);

  beforeEach(function() {
    this.app = new Application({
      path: `${__dirname}/../node_modules/.bin/electron`,
      args: ["main.js"]
    });
    return this.app.start();
  });

  afterEach(function() {
    if (this.app && this.app.isRunning()) {
      return this.app.stop();
    }
  });

  it("title says Hello", function() {
    return this.app.client
      .waitUntilWindowLoaded()
      .getTitle()
      .then(text => expect(text).to.eq("Hello"));
  });

  it("inputs and then finds the text on the page", function() {
    return this.app.client
      .waitUntilWindowLoaded()
      .elementIdText("test")
      .keys("Hello World!")
      .then(text => expect(text).to.eq("Hello World!"));
  });
});

main.js;

const {app, BrowserWindow, Menu} = require('electron')
const path = require('path')
const url = require('url')
const fs = require("fs")

let mainWindow;

app.on('ready', function () {

  mainWindow = new BrowserWindow({width: 800, height: 600})

  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  mainWindow.on('closed', () => {
    app.quit();
  })

  const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);

  Menu.setApplicationMenu(mainMenu);

  if(process.platform == 'darwin'){
    mainMenuTemplate.unshift({});
  }

});

package.JSON 

"devDependencies": {
    "chai": "^4.1.2",
    "electron": "^1.7.8",
    "mocha": "^4.0.1",
    "spectron": "^3.7.2"
  }

Upvotes: 1

Views: 3840

Answers (2)

Bharath Kumar S
Bharath Kumar S

Reputation: 1408

A much cleaner way is this

 return app.client.waitForVisible('#test')
        .waitForEnabled('#test')
        .clearElement('#test')
        .setValue('#test', "TEST")
        .getValue('#test')
        .should.eventually.equal("TEST")

Upvotes: 1

pyan
pyan

Reputation: 885

I've found the solution to my problem, just writing it here for reference if others need it

The working test;

it("should enter and show text", function(){
    return this.app.client
      .waitUntilWindowLoaded()
      .click('#test')
      .keys('Hello')
      .getText('#test')
      .then(text => expect(text).to.eq('Hello'))

It seems like .get[something] functions puts the text into a text variable automatically of which you can test from.

Upvotes: 2

Related Questions