测试电子应用的文本输入

时间:2017-10-10 21:15:52

标签: javascript testing dom electron spectron

我正在尝试使用Electron和Spectron进行测试。

我想写一下contentEditable我的身体,然后在我的测试中检查文本是否匹配。到目前为止,我已经设法为该标题编写了一个成功的测试,但我无法找到解决方案。

的index.html;

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

featureTest.js,其中包括标题的通过测试,以及我想在底部进行测试的尝试。

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"
  }

2 个答案:

答案 0 :(得分:2)

我找到了问题的解决方案,只是将其写在这里以供其他人需要时参考

工作测试;

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

似乎.get [something]函数会自动将文本放入一个文本变量中,您可以从中进行测试。

答案 1 :(得分:1)

这是一种更清洁的方法

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