3

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.

I am getting the error " TypeError: Cannot read property 'waitUntilWindowLoaded' of undefined" when I run the test.

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

<!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)
    })
})
wallage
  • 73
  • 6

3 Answers3

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.

tpikachu
  • 3,339
  • 2
  • 12
  • 34
1

after googling and trying for a few days I found that disabling "devtools" seems to resolve the "TypeError: Cannot read property 'waitUntilWindowLoaded' of undefined"

How can this be related?

wallage
  • 73
  • 6
0

i added more steps to the test flow and keep running into similar problems. now my "index.js" contains a test like this:

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

for some reason i get the error

TypeError: btnH.click is not a function at Context. (test\index.js:38:20) at processTicksAndRejections (internal/process/task_queues.js:93:5)

If I execute the click() directly on the app.client.$('#countbtn') it works. But if I store the result in a variable first I get the error.

wallage
  • 73
  • 6