Help needed to get test webdriver setup working for electron #11400

mulgurul · 2023-10-11T10:45:19Z

mulgurul
Oct 11, 2023

I'm completly new to webdriver/electron testing. I'm following the guide from https://webdriver.io/docs/desktop-testing/electron/.

I'm on OSX, node v18.17.1, Electron v25.0.1 npm v9.6.7

Here's the experience:
Create a new empty dir for the test project (Maybe it needs to be added to the App project instead?)

Run rpm create wdio@latest ./
Select “Desktop Testing - of Electron Application
Set path to: /Users/mac20rd01/Source/DPA Audio Controller Test/DPA%20Audio%20Controller/release/app/dist (Notice, this is not the path to a binary but to output from a build)
Select Mocha
Select Typescript compiler
Select generate test files
Select default location
Select spec and Allure
Select no plugins
Select to add electron as a service to test setup

Run npm install

Do npm run wdio

I get:

2023-10-03T09:17:34.637Z ERROR @wdio/config:ConfigParser: Failed loading configuration file: file:///Users/mac20rd01/Source/apptest/wdio.conf.ts: Cannot read properties of undefined (reading 'productName')
TypeError: Cannot read properties of undefined (reading 'productName')
at file:///Users/mac20rd01/Source/apptest/wdio.conf.ts:5:39
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Ok so I add missing definition to the package.json file. Guess it expected the test project to be hacked into the App project or?

"name": "my-new-project",
"type": "module",
"build": {
"productName": "DPA Audio Controller"
},

Run npm run wdio again this time getting:

2023-10-03T09:22:36.355Z INFO @wdio/cli:launcher: Run onPrepare hook
2023-10-03T09:22:36.357Z ERROR electron-service: Error: No Electron browser found in capabilities
at ElectronLaunchService.onPrepare (file:///Users/mac20rd01/Source/apptest/node_modules/wdio-electron-service/src/launcher.ts:33:41)
at async file:///Users/mac20rd01/Source/apptest/node_modules/@wdio/cli/build/utils.js:43:17
at async Promise.all (index 0)
at async Launcher.run (file:///Users/mac20rd01/Source/apptest/node_modules/@wdio/cli/build/launcher.js:94:13)
2023-10-03T09:22:36.360Z ERROR @wdio/cli:utils: A service failed in the 'onPrepare' hook
Error: No Electron browser found in capabilities
at ElectronLaunchService.onPrepare (file:///Users/mac20rd01/Source/apptest/node_modules/wdio-electron-service/src/launcher.ts:33:41)
at async file:///Users/mac20rd01/Source/apptest/node_modules/@wdio/cli/build/utils.js:43:17
at async Promise.all (index 0)
at async Launcher.run (file:///Users/mac20rd01/Source/apptest/node_modules/@wdio/cli/build/launcher.js:94:13)

Continue...
2023-10-03T09:22:36.361Z INFO @wdio/local-runner: Shutting down spawned worker
file:///Users/mac20rd01/Source/apptest/node_modules/@wdio/utils/build/driver/manager.js:12
? caps.map((cap) => {
^
TypeError: Cannot read properties of undefined (reading 'capabilities')
at file:///Users/mac20rd01/Source/apptest/node_modules/@wdio/utils/build/driver/manager.js:15:80
at Array.map ()
at mapCapabilities (file:///Users/mac20rd01/Source/apptest/node_modules/@wdio/utils/build/driver/manager.js:12:16)
at setupDriver (file:///Users/mac20rd01/Source/apptest/node_modules/@wdio/utils/build/driver/manager.js:87:12)
at Launcher.run (file:///Users/mac20rd01/Source/apptest/node_modules/@wdio/cli/build/launcher.js:99:17)

Ok what is wrong here. I thought that adding the 'electron' service should setup capabilities. It says so in the conf. file:

capabilities: [{
// no need to define any capabilities for local Electron web tests
// since service plugin takes care of setting everything up
}],

Then I've hacked around adding capabilities anyway, like:

capabilities: [{
browserName: 'chrome',
"goog:chromeOptions": { binary: '/Users/mac20rd01/Source/DPA Audio Controller Test/DPA%20Audio%20Controller/release/build/mac/DPA Audio Controller.app/Contents/MacOS/DPA Audio Controller', }
}],

I get to a place where the app starts, I see the correct menus but renderer is blank, does not seem to load/run renderer scripts.
And I get more errors in console. The app hangs, no test output:

Can anyone with some decent experience please help me getting it up and running, thanks

Best regards, Peter from Denmark

christian-bromann · 2023-10-11T15:06:26Z

christian-bromann
Oct 11, 2023
Maintainer

Hey Peter from 🇩🇰 👋

It seems like you have been using an outdated configuration wizard since we updated the bootstrap process for electron applications in the last release. Can you try again with:

npm init wdio@latest ./

Let me know if this works better, thanks!

3 replies

mulgurul Oct 11, 2023
Author

Thank you so much for quick response Christian, I appreciate it a lot🙏

I've not succeeded in making it work yet.
First of all, I'm creating the test project by itself in a clean folder using the npm init wdio@latest ./ and then providing the path, for (now two) prompts for dist and binary folder:
I can see the binary path in wdion.conf.js:
appBinaryPath: '/Users/mac20rd01/Source/DPA Audio Controller Test/DPA%20Audio%20Controller/release/build/mac/DPA Audio Controller.app/Contents/MacOS/DPA Audio Controller'
But I can't see the path to the dist folder anywhere..
/Users/mac20rd01/Source/DPA Audio Controller Test/DPA%20Audio%20Controller/release/app/dist

Maybe I have to do the npm init inside my app project folder to make it work??
Runnings the npm run wdio after install, i get a lot of errors, like:

Execution of 1 workers started at 2023-10-11T20:58:34.119Z

2023-10-11T20:58:34.160Z INFO @wdio/cli:launcher: Run onPrepare hook
2023-10-11T20:58:40.771Z ERROR electron-service: Error: You must install Electron locally, or provide a custom Chromedriver path / browserVersion value for each Electron capability
    at file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/wdio-electron-service/dist/launcher.js:63:56
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async ElectronLaunchService.onPrepare (file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/wdio-electron-service/dist/launcher.js:41:9)
    at async file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/@wdio/cli/build/utils.js:43:17
    at async Promise.all (index 0)
    at async Launcher.run (file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/@wdio/cli/build/launcher.js:94:13)
2023-10-11T20:58:40.772Z ERROR electron-service: Failed setting up Electron session: Error: You must install Electron locally, or provide a custom Chromedriver path / browserVersion value for each Electron capability
    at file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/wdio-electron-service/dist/launcher.js:63:56
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async ElectronLaunchService.onPrepare (file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/wdio-electron-service/dist/launcher.js:41:9)
    at async file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/@wdio/cli/build/utils.js:43:17
    at async Promise.all (index 0)
    at async Launcher.run (file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/@wdio/cli/build/launcher.js:94:13)

Preparing my apps for the test drive, I have included many packages as devdep. as I've seen in the github example apps:
"@wdio/globals": "^8.17.0",
"@wdio/local-runner": "^8.17.0",
"@wdio/mocha-framework": "^8.17.0",
"wdio-electron-service": "file:../",
"webdriverio": "^8.17.0",

I have manually created the @types folder and added the:
main.d.ts
preload.d.ts files with content.

I have added the isTest export in util and the conditional import statements in main and preload.
But building the i get errors:

ERROR in ./src/main/main.ts 30:4-40
[0] Module not found: Error: Can't resolve 'wdio-electron-service/main' in '/Users/mac20rd01/Source/DPA Audio Controller Test/DPA%20Audio%20Controller/src/main'
[0] 
[0] ERROR in ./src/main/preload.ts 16:4-43
[0] Module not found: Error: Can't resolve 'wdio-electron-service/preload' in '/Users/mac20rd01/Source/DPA Audio Controller Test/DPA%20Audio%20Controller/src/main'
[0]

Hmm, I'm a bit lost what to do now...

Best regards

christian-bromann Oct 11, 2023
Maintainer

But I can't see the path to the dist folder anywhere..

What do you use to package the Electron application?

But building the i get errors:

I think it will work when using "module": "NodeNext", in your tsconfig.json however if you can't set that I just used this:

const isTest = process.env.NODE_ENV === 'test'
if (isTest) {
  require('wdio-electron-service/preload')
}

fyi: I am working on this boilerplate at the moment: https://github.com/webdriverio/electron-boilerplate, maybe you can compare this with your setup?

mulgurul Oct 12, 2023
Author

Again, thanks for helping out Christian.
Great if I could get the nut cracked:-)
I choose electron-builder as build tool in the wizard, but the App is based on Electron-React-Boilerplate from Github, which is a mix of a lot of Webpack scripts and electron-builder.
https://github.com/electron-react-boilerplate/electron-react-boilerplate

Requiring the wdio-electron-service/main and wdio-electron-service/preload modules instead of import makes no difference when building. Still can't resolve them.

I'll take a look at your boilerplate to see if I can find some gold:D

mulgurul · 2023-10-28T22:38:03Z

mulgurul
Oct 28, 2023
Author

Ok, I started using time on getting webdriver working again.

My problem right now is that I get the following error:
2023-10-28T22:31:08.587Z INFO @wdio/cli:launcher: Run onPrepare hook
2023-10-28T22:31:10.497Z ERROR electron-service: Error: You must install Electron locally, or provide a custom Chromedriver path / browserVersion value for each Electron capability
at file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/wdio-electron-service/dist/launcher.js:74:56
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Promise.all (index 0)
at async ElectronLaunchService.onPrepare (file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/wdio-electron-service/dist/launcher.js:49:9)
at async file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/@wdio/cli/build/utils.js:44:17
at async Promise.all (index 0)
at async Launcher.run (file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/@wdio/cli/build/launcher.js:98:13)
2023-10-28T22:31:10.497Z ERROR electron-service: Failed setting up Electron session: Error: You must install Electron locally, or provide a custom Chromedriver path / browserVersion value for each Electron capability
at file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/wdio-electron-service/dist/launcher.js:74:56
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Promise.all (index 0)
at async ElectronLaunchService.onPrepare (file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/wdio-electron-service/dist/launcher.js:49:9)
at async file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/@wdio/cli/build/utils.js:44:17
at async Promise.all (index 0)
at async Launcher.run (file:///Users/mac20rd01/Source/wdioelectrontest/node_modules/@wdio/cli/build/launcher.js:98:13)
2023-10-28T22:31:10.498Z INFO @wdio/local-runner: Shutting down spawned worker
2023-10-28T22:31:10.749Z INFO @wdio/local-runner: Waiting for 0 to shut down gracefully
2023-10-28T22:31:10.750Z INFO @wdio/local-runner: shutting down

I tried several configurations, see outcommented. But no luck. Any hints sp solve these errors occuring is much appreciated.

Config:
capabilities: [{
browserName: 'electron',
'wdio:electronServiceOptions': {
appBinaryPath: '/Users/mac20rd01/Source/DPA Audio Controller Test/DPA%20Audio%20Controller/release/build/mac/DPA Audio Controller.app/Contents/MacOS/DPA Audio Controller',
appArgs: ['foo', 'bar=baz']
}
}],
// capabilities: [
// {
// 'browserName': 'electron',
// 'wdio:electronServiceOptions': {
// appArgs: ['foo', 'bar=baz'],
// },
// },
// ],

services: [[
    'electron',
    {
        appPath: '/Users/mac20rd01/Source/DPA Audio Controller Test/DPA%20Audio%20Controller/release/app/dist',
        appName: productName,
        appArgs: ['foo', 'bar=baz'],
        chromedriver: {
            logFileName: 'wdio-chromedriver.log',
        },
        electronVersion: '25.0.1',
    }
]],

1 reply

christian-bromann Oct 29, 2023
Maintainer

It seems like you are using an old version of WebdriverIO and the Electron service. Check out this video I made to get you up and running: https://www.youtube.com/watch?v=iQNxTdWedk0

mulgurul · 2023-10-30T07:43:26Z

mulgurul
Oct 30, 2023
Author

For some reason it seems to fail downloading the chrome for testing driver, but the path seems very odd to me: "https://edgedl.me.gvt1.com/edgedl/chrome/chrome-for-testing/114.0.5735.133/mac-x64/chromedriver-mac-x64.zip". I ran the pure project as explained in the video, and this project works fully. I'm going to compare the package.json files to see what is different between the two solutions.

0 replies

mulgurul · 2023-10-30T08:24:56Z

mulgurul
Oct 30, 2023
Author

Upgraded to electron 27.0.1 and now it seems to find the correct driver, and now after a npm package, at last it can run the basic test:-)

I'm very happy. Now to writing some great test.

0 replies

mulgurul · 2023-10-30T09:11:28Z

mulgurul
Oct 30, 2023
Author

OK, not so happy after all:-(

Now i started looking at running some test, I discovered that the application/chromium starts but the React GUI is never loaded. Putting in a pause on the browser, I just see a blank page with no html elements. I see the correct Electron menu, but it is running the App in prod release, so I cant access the dev tools.
So it seems like the Electron BrowserWindow is not loading the content correct or instantiating the React app as it should.
I'm unsure how to troubleshoot this without dev tools..

1 reply

mulgurul Oct 30, 2023
Author

This might have to do with the Electron upgrade and nothing with running it with npm run wdio. I see the same blank application when starting it directly from release/build folder. Might be a problem with build after changes. starting it in development mode works fine.

arjundangi01 · 2024-05-17T05:16:42Z

arjundangi01
May 17, 2024

Please Help me

I follwed -

and I write a test as mentioned in doc

describe('when the make smaller button is clicked', () => {
  it('should decrease the window height and width by 10 pixels', async () => {
    const boundsBefore = await browser?.electron.browserWindow('getBounds');
    expect(boundsBefore.width).toEqual(210);
    expect(boundsBefore.height).toEqual(310);

    await $('.make-smaller').click();
    const boundsAfter = await browser?.electron.browserWindow('getBounds');
    expect(boundsAfter.width).toEqual(200);
    expect(boundsAfter.height).toEqual(300);
  });
});

But it throw type-script error Property 'electron' does not exist on type 'Browser'.

1 reply

christian-bromann May 17, 2024
Maintainer

@arjundangi01 have you added the Electron service to your wdio config? Do you have a reproducible example?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Help needed to get test webdriver setup working for electron #11400

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 6 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Help needed to get test webdriver setup working for electron #11400

mulgurul Oct 11, 2023

Replies: 6 comments · 6 replies

christian-bromann Oct 11, 2023 Maintainer

mulgurul Oct 11, 2023 Author

christian-bromann Oct 11, 2023 Maintainer

mulgurul Oct 12, 2023 Author

mulgurul Oct 28, 2023 Author

christian-bromann Oct 29, 2023 Maintainer

mulgurul Oct 30, 2023 Author

mulgurul Oct 30, 2023 Author

mulgurul Oct 30, 2023 Author

mulgurul Oct 30, 2023 Author

arjundangi01 May 17, 2024

christian-bromann May 17, 2024 Maintainer

mulgurul
Oct 11, 2023

Replies: 6 comments 6 replies

christian-bromann
Oct 11, 2023
Maintainer

mulgurul Oct 11, 2023
Author

christian-bromann Oct 11, 2023
Maintainer

mulgurul Oct 12, 2023
Author

mulgurul
Oct 28, 2023
Author

christian-bromann Oct 29, 2023
Maintainer

mulgurul
Oct 30, 2023
Author

mulgurul
Oct 30, 2023
Author

mulgurul
Oct 30, 2023
Author

mulgurul Oct 30, 2023
Author

arjundangi01
May 17, 2024

christian-bromann May 17, 2024
Maintainer