带有光谱测试的电子应用程序的简单示例答案

【问题标题】：simple example of electron app with spectron test带有光谱测试的电子应用程序的简单示例
【发布时间】：2020-04-19 08:24:01
【问题描述】：

我正在尝试学习如何测试应用程序，使用电子构建，使用 Spectron。为此，我从网络上获取了一个示例应用程序，其中包含一个简单的标题、计数器标签和增量按钮。

我使用 mocha 作为试运行。

测试应该启动应用程序，按下按钮并检查计数器标签。

我什至无法正确启动应用程序。

我在运行测试时收到错误“TypeError: Cannot read property 'waitUntilWindowLoaded' of undefined”。

此外，在查看启动的应用程序时，我在 devtools 中看到一个错误： “未捕获的 ReferenceError：未定义要求”

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

<!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

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

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

【问题讨论】：

标签： javascript electron mocha.js spectron

【解决方案1】：

像这样创建您的浏览器窗口。

win = new BrowserWindow({width: 800, height: 600,
    webPreferences: {
        nodeIntegration: true
    }
})

那么这将解决未定义的需求问题。

【讨论】：

那么，还有什么问题呢？
'TypeError: 无法读取未定义的属性'waitUntilWindowLoaded'

【解决方案2】：

在谷歌搜索并尝试了几天后，我发现禁用“devtools”似乎可以解决“TypeError: Cannot read property 'waitUntilWindowLoaded' of undefined”

这有什么关系？

【讨论】：

【解决方案3】：

我在测试流程中添加了更多步骤，并不断遇到类似问题。现在我的“index.js”包含这样的测试：

it('click button', async () => {
    await app.client.waitUntilWindowLoaded()
    await sleep(1000)
    const btnH = await app.client.$('#countbtn')
    await btnH.click()
    await sleep(1000)
    app.client.$('#countbtn').click()
    await sleep(1000)
    const txt = await app.client.$('#click-counter').getText()
    return assert.equal(txt, '2')
})

由于某种原因，我得到了错误

TypeError: btnH.click 不是函数在上下文。 (测试\index.js:38:20) 在 processTicksAndRejections (internal/process/task_queues.js:93:5)

如果我直接在 app.client.$('#countbtn') 上执行 click() ，它就可以工作。但是如果我先将结果存储在一个变量中，我会得到错误。

【讨论】：

分享你的完整测试脚本