What has replaced Custom Electron API in the new version?

[1111mp]

import { ipcMain, nativeTheme } from "electron";
import { getSetting } from "./utils/setting";

import("wdio-electron-service/main");

import("./main");

ipcMain.handle("wdio-electron", (_event, name: string, ..._args: unknown[]) => {
  switch (name) {
    case "get-system-theme": {
      return nativeTheme.shouldUseDarkColors ? "dark" : "light";
    }

    case "setting-data-get": {
      return getSetting();
    }

    default: {
      return name;
    }
  }
});

// test
 describe('IPC Renderer', () => {
    describe('get-system-theme', () => {
      it('should return the value of system theme', async () => {
        const theme = await browser.electron.api('get-system-theme');

        expect(theme).toHaveText(['light', 'dark']);
      });
    });

    describe('setting-data-get', () => {
      it('should return the value of setting', async () => {
        const setting = await browser.electron.api('setting-data-get');

        expect(setting).toBeDefined();
        expect(setting).toHaveProperty('locale');
        expect(setting).toHaveProperty('mirror');
        expect(setting).toHaveProperty('theme');
      });
    });
  });

How to implement it now?

I tried like this:

describe("get-system-theme", () => {
      it("should return the value of system theme", async () => {
        const theme = await browser.electron.execute((electron) =>
          electron.ipcRenderer.sendSync("get-system-theme")
        );

        console.log(theme);

        expect(theme).toHaveText(["light", "dark"]);
      });
    });

But it will report an error:

javascript error: Error invoking remote method 'wdio-electron.execute': TypeError: Cannot read properties of undefined (reading 'sendSync')

Thanks in advance. 🌹

Currently I can achieve the same goal through the following method:

describe("IPC Renderer", () => {
    describe("get-system-theme", () => {
      it("should return the value of system theme", async () => {
        // @ts-ignore
        const theme = await browser.execute(() => window.Context.getSystemTheme());

        expect(theme).toHaveText(["light", "dark"]);
      });
    });

    describe("setting-data-get", () => {
      it("should return the value of setting", async () => {
        // @ts-ignore
        const setting = await browser.execute(() => window.Context.getSettingData());

        expect(setting).toBeDefined();
        expect(setting).toHaveProperty("locale");
        expect(setting).toHaveProperty("mirror");
        expect(setting).toHaveProperty("theme");
      });
    });
  });

Or is there a better way...

[christian-bromann]

The ipcRenderer is not attached to the electron instance. What you could try to do is:

const theme = await browser.electron.execute(async () => {
  const { ipcRenderer } = await import('electron/renderer')
  return ipcRenderer.sendSync("get-system-theme")
})

@goosewobbler what do you think? Is it worth exposing the IPC renderer in some way?

[1111mp]

Thank you for your prompt reply. 🌹

Will this approach bring additional performance burden? (And it can be expected that it will slow down the progress of testing, especially when there are many api tested.)

Currently I can implement it through the browser.execute API, and it is more suitable for the real test environment.

const theme = await browser.execute(() => window.Context.getSystemTheme());

Because I defined them ahead of time in preload:

contextBridge.exposeInMainWorld('Context', {
  // ...
  getSystemTheme: () => ipcRenderer.sendSync('get-system-theme') as string,
  / ...
});

I think there is no need to expose the ipcRenderer.

Maybe I'll close this discussion, of course, if you guys have anything to add.

Thank you very much again. 😄

[1111mp]

@christian-bromann Are there any major changes in the latest version? When I upgraded to the latest version, both of the above methods became unavailable.

const theme = await browser.execute(() => window.Context.getSystemTheme());

Error: TSError: ⨯ Unable to compile TypeScript:
src/__tests__/specs/api.spec.ts(19,58): error TS2551: Property 'Context' does not exist on type 'Window & typeof globalThis'. Did you mean 'context'?

---

const theme = await browser.electron.execute(async () => {
          const { ipcRenderer } = await import("electron/renderer");
          return ipcRenderer.sendSync("get-system-theme");
        });

javascript error: javascript error: Error invoking remote method 'wdio-electron.execute': ReferenceError: __awaiter is not defined
  (Session info: chrome=120.0.6099.276)

I checked the documentation and couldn't find any relevant instructions or solutions.

[goosewobbler]

@1111mp I'm just catching up with this - I can see what you are trying to do with the nativeTheme, can you not implement this in a much more direct way with execute? Something like:

const theme = await browser.electron.execute((electron) => electron.nativeTheme.shouldUseDarkColors ? "dark" : "light");

As for the latest version, it just contains a few new mocking functions, there are no major changes. What version did you upgrade from?

[1111mp]

Thank you for your reply. 🌹

from:

"@wdio/cli": "8.24.13",
"@wdio/globals": "^8.24.12",
"@wdio/local-runner": "^8.24.12",
"@wdio/mocha-framework": "^8.24.12",
"@wdio/spec-reporter": "^8.24.12",
"wdio-electron-service": "^6.0.0",
"webdriverio": "^8.24.12",

upgrade to:

"@wdio/cli": "^8.31.1",
"@wdio/globals": "^8.31.1",
"@wdio/local-runner": "^8.31.1",
"@wdio/mocha-framework": "^8.31.1",
"@wdio/spec-reporter": "^8.31.1",
"wdio-electron-service": "^6.3.0",
"webdriverio": "^8.31.1"

I can see what you are trying to do with the nativeTheme, can you not implement this in a much more direct way with execute?

I'm afraid not, because I need to test these APIs (preload.ts). Like these:

// api.spec.ts
import { expect } from "@wdio/globals";
import { browser } from "wdio-electron-service";

const { productName, version } = globalThis.packageJson;

describe("Electron APIs", () => {
  describe("app", () => {
    it("should retrieve app metadata through the electron API", async () => {
      const appName = await browser.electron.execute((electron) => electron.app.getName());
      expect(appName).toEqual(productName);
      const appVersion = await browser.electron.execute((electron) => electron.app.getVersion());
      expect(appVersion).toEqual(version);
    });
  });

  describe("IPC Renderer", () => {
    describe("get-system-theme", () => {
      it("should return the value of system theme", async () => {
        const theme = await browser.execute(() => window.Context.getSystemTheme());

        expect(theme).toHaveText(["light", "dark"]);
      });
    });

    describe("setting-data-get", () => {
      it("should return the value of setting", async () => {
        const setting = await browser.execute(() => window.Context.getSettingData());

        expect(setting).toBeDefined();
        expect(setting).toHaveProperty("locale");
        expect(setting).toHaveProperty("mirror");
        expect(setting).toHaveProperty("theme");
      });
    });
  });
});


// preload.ts
contextBridge.exposeInMainWorld('Context', {
    // ...
    updateSettingData: (setting: Nvmd.Setting) =>
        ipcRenderer.invoke('setting-data-set', setting) as Promise<void>,
    getSystemTheme: () => ipcRenderer.sendSync('get-system-theme') as string,
    // ...
})

I can test them before upgrading through browser.execute(() => window.Context.getSettingData()); , and I also like this api because I can also test whether the preload api is working properly at the same time. But it won't work after upgrading.

If you need any more information from me, please feel free to let me know. Thank you so much. 🌹

If you want to see the complete code, you can check the code at https://github.com/1111mp/nvm-desktop. By the way, you should ignore the src/__tests__/specs/setting.spec.ts file.

[goosewobbler]

I checked out your code and tried a couple of things. In order to get the tests to work I had to make some hacky changes, I put these in a draft PR so you can see what they are and hopefully give you a starting point to work out what is wrong: https://github.com/1111mp/nvm-desktop/pull/59/files

Firstly I pinned all the versions to the ones you posted as "before upgrade" - the API tests fail, the service is complaining about the context bridge being unavailable. So this would imply the upgrade is not the issue here. I then manually set the isTest value in electron.vite.config.ts to true and the API tests pass (though the nvmd ones still fail). Obviously you don't want to manually override isTest, there must be some other reason like the environment var isn't being set correctly. There was also a TS unused var error and some issue with the types of window.Context...

[1111mp]

Thank you very much for your patience and reply. 🌹 🚀 I'm really sorry for my delay in replying (I was on the train all night last night, it was such a long journey...)

Yes, with your help I have now located the problem: test failed due to typescript type checking error.

// error TS2551: Property 'Context' does not exist on type 'Window & typeof globalThis'.
const theme = await browser.execute(() => window.Context.getSystemTheme());

// it will be fine
const theme = await browser.execute(() => ((window as unknown as { Context: any }).Context.getSystemTheme()));

However, transpileOnly: true has been set in the wdio.conf.ts configuration, and the tsconfig.test.json file contains a declaration file of this type:

// wdio.conf.ts
export const config: Options.Testrunner = {
  //
  // ====================
  // Runner Configuration
  // ====================
  // WebdriverIO supports running e2e tests as well as unit and component tests.
  runner: "local",
  outputDir: "wdio-logs",
  autoCompileOpts: {
    autoCompile: true,
    tsNodeOpts: {
      project: "./tsconfig.test.json",
      transpileOnly: true
    }
  },
  // ...
}

// tsconfig.test.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowJs": true,
    "types": ["node", "@wdio/globals/types", "@wdio/mocha-framework", "wdio-electron-service"]
  },
  "ts-node": {
    "transpileOnly": true,
    "files": true
  },
  "include": ["src/__tests__/**/*.spec.ts", "src/preload/preload.d.ts"]
}

// src/preload/preload.d.ts
import { ElectronHandler } from './index'

declare global {
  interface Window {
    Context: ElectronHandler
  }
}

export {}

In the end, I avoided this error by adding TS_NODE_TRANSPILE_ONLY=true before the test command so that ts-node would not perform type checking:

"test": "TS_NODE_TRANSPILE_ONLY=true wdio run ./wdio.conf.ts"

I guess it is because the configuration of ts-node in wdio.conf.ts does not affect the browser environment...i'm not sure...

Thank you very much again for your patient reply. 😄

[christian-bromann]

@1111mp thanks for the investigation, what fix would you suggest?

[1111mp]

Perhaps it should be possible to obtain data through ts-node's register. Like this:

export const loadData = async (path:string) => {
  await import('ts-node/register');

  const data = require(path);
  return data.default ? data.default : data;
};

const wdioConfig = await loadData(wdioConf.fullPath);

const tsNodeProjectFromParams = wdioConfig.autoCompileOpts?.tsNodeOpts?.project &&
            path.resolve(process.cwd(), wdioConfig.autoCompileOpts?.tsNodeOpts?.project)

I'll test it locally later to see if it works. Maybe there is a better way. What you think?

---

The following code has passed the test locally:

async function loadConfigData(path: string) {
    const { createRequire } = await import("node:module").then(module => module.default)
   const require = createRequire(import.meta.url)
   require('ts-node/register')
   const data = require(path)
   return data.default ? data.default : data
}

const { config: wdioConfig } = await loadConfigData(wdioConf.fullPath);
console.log("wdioConfig", wdioConfig);
// wdioConfig {
//     runner: 'local',
//     outputDir: 'wdio-logs',
//     autoCompileOpts: {
//       autoCompile: true,
//       tsNodeOpts: { project: './tsconfig.test.json', transpileOnly: true }
//     },
//     specs: [ './src/__tests__/specs/**/*.ts' ],
//     exclude: [],
//     maxInstances: 10,
//     capabilities: [
//       {
//         browserName: 'electron',
//         'wdio:electronServiceOptions': [Object]
//       }
//     ],
//     logLevel: 'info',
//     bail: 0,
//     baseUrl: '',
//     waitforTimeout: 10000,
//     connectionRetryTimeout: 120000,
//     connectionRetryCount: 3,
//     services: [ [ 'electron', [Object] ] ],
//     framework: 'mocha',
//     reporters: [ 'spec' ],
//     mochaOpts: { ui: 'bdd', timeout: 60000 }
//   }

const tsNodeProjectFromParams = wdioConfig.autoCompileOpts?.tsNodeOpts?.project &&
            path.resolve(process.cwd(), wdioConfig.autoCompileOpts?.tsNodeOpts?.project);

[christian-bromann]

@1111mp can you do me a favor and raise an issue within the WebdriverIO project with these findings?

[1111mp]

Of course, I have opened an issue: #12248

[christian-bromann]

Thank you!