Question

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

我将摩卡咖啡作为测试工具。

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

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

运行测试时出现错误“ TypeError：无法读取未定义的属性'waitUntilWindowLoaded'”。

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

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

Answer 1

像这样创建浏览器窗口。

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

然后，这将解决未定义的需求问题。

Answer 2

在谷歌搜索并尝试了几天之后，我发现禁用“ devtools”似乎可以解决“ TypeError：无法读取未定义的属性'waitUntilWindowLoaded'”

这怎么关联？

Answer 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不是函数在上下文。（test \ index.js：38：20）在processTicksAndRejections（internal / process / task_queues.js：93：5）

如果我直接在app.client。$（'＃countbtn'）上执行click（），它将起作用。但是，如果我先将结果存储在变量中，则会出现错误。

电子应用程序与光谱测试的简单示例

3 个答案: