Need help in the plugin configuration!

[Meceron]

Hello,

I've started to test an application with Electron 22.0.0. We asked for the dialog support for electron what is come true, but now I ran into some configuration errors. Somebody can help me out what did I missed? (application build on windows 'release' dir. Angular 15 app.

when i run test i got:

 Cannot read properties of undefined (reading 'electron')
[electron 22.0.0 win32 #0-0] TypeError: Cannot read properties of undefined (reading 'electron')  
[electron 22.0.0 win32 #0-0]     at LicenseSelector.<anonymous> (C:\Users\user\IdeaProjects\electronapp\test\pageobjects\page.ts:64:19)

main.ts

import('wdio-electron-service/dist/main')

const VISIBLE_SIDEBAR_MIN_WINDOWS_WIDTH = 1050
const VISIBLE_SIDEBAR_MIN_WINDOWS_HEIGHT = 750

 win = new BrowserWindow({
    width: initialWindowWidth,
    height: initialWindowHeight,
    minWidth: 800,
    minHeight: 600,
    title: CommonConstants.APP_TITLE,
    icon: path.join(assetsDir, 'icon.icns'),
    center: true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js'),
      sandbox: false,
    },
  })

preload.js

// build in support
require('wdio-electron-service/dist/preload')

wdio.conf.ts

import * as Path from 'path'

// More info on
// https://webdriver.io/docs/configurationfile/
export const config = {
  runner: 'local',
  specs: [Path.join(__dirname, 'test', 'specs', '*.ts')],
  maxInstances: 1,
  capabilities: [
    {
      maxInstances: 1,
      browserName: 'electron',
    },
  ],
  autoCompileOpts: {
    autoCompile: true,
    tsNodeOpts: {
      project: './test/tsconfig.json',
      transpileOnly: true,
    },
  },
  logLevel: 'info',
  bail: 1,
  baseUrl: 'http://127.0.0.1',
  waitforTimeout: 10000,
  connectionRetryTimeout: 120000,
  connectionRetryCount: 3,
  services: [
    [
      'electron',
      {
        appPath: Path.join(__dirname, 'release'),
        appName: 'Application',
        electronVersion: '22.0.0',
      },
    ],
  ],
  framework: 'mocha',
  reporters: ['spec'],
  mochaOpts: {
    ui: 'bdd',
    retries: 0,
    timeout: 30 * 1000, // 30 sec
  },
}

page.ts

import { browser } from 'wdio-electron-service'

/**
 * Main page object containing all methods, selectors and functionality
 * that is shared across all page objects
 */
export default class Page {
  /**
   * Get title from electron window
   */
  async title(): Promise<string> {
    return (await browser.electron.app('getName')) as Promise<string> // this line cause the error
  }

   /**
   * Wait for upload filepath via browser windows
   * @param selector element id for open the browser
   * @param path path to file
   */
  async waitForFileUpload(selector: string, path: string) {
    await browser.electron.mock('dialog', 'showOpenDialog', 'path/to/file') // this line cause the error
    const result = await browser.electron.dialog('showOpenDialog')  // this line cause the error
    console.log('result:' + result)
  }
}

package.json

{
  "main": "main.js",
  "scripts": {
    "wdio": "pnpm exec wdio run ./wdio.conf.ts"
  },
  "dependencies": {
    "@electron/remote": "2.0.9",
...
    "electron-updater": "5.3.0",
...
    "wdio-electron-service": "4.1.0",
    "webdriverio": "8.11.2"
  },
  "devDependencies": {
...
    "@wdio/cli": "8.6.9",
    "@wdio/devtools-service": "8.6.9",
    "@wdio/junit-reporter": "8.6.8",
    "@wdio/spec-reporter": "8.6.8",
    "@wdio/local-runner": "8.6.9",
    "@wdio/mocha-framework": "8.6.8",
...
    "electron": "22.0.0",
    "electron-builder": "23.6.0",
    "electron-reload": "2.0.0-alpha.1",
...
    "wait-on": "7.0.1",
    "wdio-chromedriver-service": "8.1.1",
    "wdio-cucumberjs-json-reporter": "4.4.3",
    "wdio-eslinter-service": "0.0.4",
    "wdio-json-reporter": "3.0.0",
    "wdio-wait-for": "3.0.2",
    "webdriver-manager": "12.1.8",
...
}

[goosewobbler]

@Meceron You're trying to use the browser object inside your application code. WDIO won't be available there, you need to do the mocking in your spec files with the tests.

[goosewobbler]

You can see an example of the mocking in a basic test here. The example app directory contains the app code and the e2e directory contains the tests for that app and the WDIO configuration.

[Meceron]

hello, the page.ts is the base for e2e test :) first when a tried the import i got this error:

/ Generating browser application bundles (phase: sealing)...(node:18224) UnhandledPromiseRejectionWarning: Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\balazs.m\IdeaProjects\frontend\node_modules\w
dio-electron-service\dist\main.js from C:\Users\balazs.m\IdeaProjects\frontend\node_modules\wdio-electron-service\dist\cjs\main.js not supported.
Instead change the require of C:\Users\balazs.m\IdeaProjects\frontend\node_modules\wdio-electron-service\dist\main.js in C:\Users\balazs.m\IdeaProjects\frontend\node_modules\wdio-electron-service
\dist\cjs\main.js to a dynamic import() which is available in all CommonJS modules.
    at f._load (node:electron/js2c/asar_bundle:2:13330)
    at Object.<anonymous> (C:\Users\balazs.m\IdeaProjects\frontend\node_modules\wdio-electron-service\dist\cjs\main.js:2:1)
    at f._load (node:electron/js2c/asar_bundle:2:13330)
    at C:\Users\balazs.m\IdeaProjects\frontend\main.js:56:45
(node:18224) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .c
atch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
[

I fixed it with :
import * as wdio from 'wdio-electron-service/main'

but the browser object still undefined

[goosewobbler]

Where are the tests then? It would help to know what the usage of this Page object is, because as far as I can tell, it's not being accessed in the WDIO context. Do you have this code available on github? It's hard for me to help debug this without having a repository containing a (minimal or otherwise) reproducible example.

[Meceron]

Test in a 'test' directory under the main project structure, page.ts is the base for test page objects, but look lik i found the problem, the preload causing errors, because of the angulars's ESM structure, Do you have any idea how to resolve it? I cannot use require() in preload.js.

[goosewobbler]

Do you mean ESM? Electron doesn't really support ESM properly yet though full support is on the way. Did you try a dynamic import as mentioned in the readme?

[Meceron]

require('wdio-electron-service/preload');

in electron preload script cause:

Error: require() of ES Module C:\Users\balazs.m\IdeaProjects\frontend\node_modules\wdio-electron-service\dist\preload.js from C:\Users\balazs.m\IdeaProjects\frontend\node_modules\wdio-electron-service\dist\cjs\preload.js not supported.
Instead change the require of C:\Users\balazs.m\IdeaProjects\frontend\node_modules\wdio-electron-service\dist\preload.js in C:\Users\balazs.m\IdeaProjects\frontend\node_modules\wdio-electron-service\dist\cjs\preload.js to a dynamic import() which is available in all CommonJS modules.

if i use import() the application crash with: [3812:0704/153222.829:ERROR:crashpad_client_win.cc(844)] not connected or simply not start with random error codes..

[goosewobbler]

Is this crash when running the tests or just when running the app? Or both?

Did you use a conditional to wrap the import as suggested in the docs?

if (isTest) {
  import('wdio-electron-service/preload');
}

In the example isTest is mapped to an environment variable TEST which is set in the WDIO config, this avoids running service code outside of the WDIO runner:

https://github.com/webdriverio-community/wdio-electron-service/blob/main/example/app/src/preload.ts#L4
https://github.com/webdriverio-community/wdio-electron-service/blob/main/example/app/src/util.ts
https://github.com/webdriverio-community/wdio-electron-service/blob/main/example/e2e/wdio.conf.js#L11

[Meceron]

Both, I try this optional imports

[Meceron]

Ok I've done it. Look like all scripts loaded. But the await browser.electron.app('getName') still throw TypeError: Cannot read properties of undefined (reading 'electron'). Any idea?

If I not import the 'browser' object from the service I got this:

[0-0] 2023-07-05T14:27:20.010Z INFO devtools: COMMAND executeAsyncScript("return (async function callApi(bridgePropName, args, done) {
[0-0]     if (window.wdioElectron === undefined) {
[0-0]         throw new Error(`ContextBridge not available for invocation of "${bridgePropName}" API`);
[0-0]     }
[0-0]     if (window.wdioElectron[bridgePropName] === undefined) {
[0-0]         throw new Error(`"${bridgePropName}" API not found on ContextBridge`);
[0-0]     }
[0-0]     done(await window.wdioElectron[bridgePropName].invoke(...args));
[0-0] }).apply(null, arguments)", <object>)
[0-0] Error in "Mercury starts up.Electron starts.should launch the application"
Error: Timeout of 30000ms exceeded. The execution in the test "Electron starts should launch the application" took too long. Try to reduce the run time or increase your timeout for test specs (https://webdriver.io/docs/timeouts). (C:\Users\balazs.m\IdeaProjects\frontend\test\specs\application.e2e.ts)

[Meceron]

Ok, update: After rework and refactors, i got these:

Error occurred in handler for 'wdio-electron.mock': No handler registered for 'wdio-electron.mock'
[0-0] Error in "electron APIs.mock.should mock the expected electron API function"
Error: mock error: javascript error: Error invoking remote method 'wdio-electron.mock': No handler registered for 'wdio-electron.mock'
JavaScript stack:
Error: Error invoking remote method 'wdio-electron.mock': No handler registered for 'wdio-electron.mock'
    at a.invoke (node:electron/js2c/renderer_init:2:7610)
  (Session info: chrome=108.0.5359.62)

and I found out there is a 'contextIsolation: false,' setup in out main project, we cannot chang these setting due to a a cross-platform supports, anyone have any advice to use the preload script some how?

if I require that in the preload I've got :
Error: require() of ES Module C:\Users\balazs.m\IdeaProjects\frontend\node_modules\wdio-electron-service\dist\preload.js from C:\Users\balazs.m\IdeaProjects\frontend\node_modules\wdio-electron-service\dist\cjs\preload.js not supported.

Any advice?

[goosewobbler]

@Meceron looks like you are getting closer. Unfortunately the service wasn't developed to support contextIsolation: false as it's a security risk. I'll take a look to see if there's an easy way to detect this setting and use an alternative to the preload script but I can't promise anything.

[goosewobbler]

@Meceron Actually I don't know if the contextIsolation is the problem here.

The first error about missing handlers will be a consequence of the preload not loading correctly. Are you using ESM or CJS in your project?

If you need to use CJS then you should be able to swap out the dynamic import for a require, but this will mean that your entire repo needs to be CJS and you will not be able to use import anywhere. The error in the preload implies that you are using CJS to require the preload script in an ESM project - this will not work.

EDIT: I found some issue with the CJS export which might be affecting your project if you are using CJS, I will fix this and add CJS-specific testing.

[Meceron]

Its electron(CJS) + angular(ESM) but now I'm allowed to modify and clean up some legacy stuff (about 10y old project wiht full of noise). I would like to change the contextIsolation to default true. Then maybe the preload hopefully starts work.

[goosewobbler]

Ok @Meceron, also you might want to try 4.2 which has fixed the CJS build issue.

EDIT: I just tried out contextIsolation: false and indeed the service doesn't work with that. I also prototyped a fix but there's really a lot of work involved in making it play nicely with tests, and I'd rather put energy into #107 which would be the first step towards the service no longer requiring these preload / main scripts.