带光谱测试的电子应用程序的简单示例 [英] simple example of electron app with spectron test
问题描述
我正在尝试学习如何使用Spectron测试应用程序，使用电子工具进行构建. 为此，我从Web上获取了一个示例应用程序，其中带有简单的标题，计数器标签和增量器按钮.
I am trying to learn how to test apps, build with electron, using spectron. for this I took an example application from the web with a simple header, counter label, and incrementer button.
我将摩卡咖啡作为测试工具.
I use mocha as a test runnen.
测试应启动应用程序，按下按钮并检查计数器标签.
The test should launch the app, push the button and check the counter label.
我什至无法正确启动应用程序.
I can't even get to the point where the app is launched properly.
运行测试时，出现错误"TypeError:无法读取未定义的属性'waitUntilWindowLoaded'".
I am getting the error " TypeError: Cannot read property 'waitUntilWindowLoaded' of undefined" when I run the test.
另外，在查看启动的应用程序时，我在devtools中看到一个错误: 未捕获的ReferenceError:未定义require"
Also when looking at the launched app I see an error in the devtools: "Uncaught ReferenceError: require is not defined"
main.js
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format ({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// open dev tools
win.webContents.openDevTools();
}
app.on('ready', createWindow)
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Hello World!</title>
<link rel = "stylesheet"
href = "./bower_components/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
<div class = "container">
<h1>This page is using Bootstrap and jQuery!</h1>
<h3 id = "click-counter"></h3>
<button class = "btn btn-success" id = "countbtn">Click here</button>
<script src = "./view.js" ></script>
</div>
</body>
</html>
view.js
let $ = require('jquery') // jQuery now loaded and assigned to $
let count = 0
$('#click-counter').text(count.toString())
$('#countbtn').on('click', () => {
count ++
$('#click-counter').text(count)
})
package.json
package.json
{
"name": "gui_testing",
"version": "1.0.0",
"description": "app to test spectron",
"main": "main.js",
"scripts": {
"test": "mocha"
},
"author": "ACW",
"license": "ISC",
"dependencies": {
"jquery": "^3.4.1"
},
"devDependencies": {
"electron": "^7.1.7",
"mocha": "^6.2.2",
"spectron": "^9.0.0"
}
}
./test/index.js
./test/index.js
const assert = require('assert')
const path = require('path')
const { Application } = require('spectron')
const electronPath = require('electron') // Require Electron from the binaries included in node_modules.
const baseDir = path.join(__dirname, '..')
const sleep = time => new Promise(r => setTimeout(r, time))
describe('Application launch', function () {
this.timeout(30000)
const app = new Application({
path: electronPath,
args: [baseDir]
})
before(function () { app.start() })
after(function () { app.stop() })
it('show an initial window', async function () {
await app.client.waitUntilWindowLoaded();
const count = await app.client.getWindowCount();
assert.equal(count, 1)
})
})
推荐答案
像这样创建浏览器窗口.
Create your browser window like this.
win = new BrowserWindow({width: 800, height: 600,
webPreferences: {
nodeIntegration: true
}
})
这将解决未定义的需求问题.
Then this will resolve the undefined require issue.
这篇关于带光谱测试的电子应用程序的简单示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
