diff --git a/README.md b/README.md index 772058cb..4029fa04 100644 --- a/README.md +++ b/README.md @@ -37,10 +37,10 @@ Next, create your WDIO configuration file. If you need some inspiration for this You will need to add `electron` to your services array and set an Electron capability, e.g.: -```js -// wdio.conf.js +`wdio.conf.ts` + +```ts export const config = { - outputDir: 'logs', // ... services: ['electron'], capabilities: [ @@ -58,14 +58,22 @@ This will spin up an instance of your app in the same way that WDIO handles brow If you use [Electron Forge](https://www.electronforge.io/) or [Electron Builder](https://www.electron.build/) to package your app then the service will automatically attempt to find the path to your bundled Electron application. You can provide a custom path to the binary via custom service capabilities, e.g.: +`wdio.conf.ts` + ```ts -capabilities: [{ - browserName: 'electron', - 'wdio:electronServiceOptions': { - appBinaryPath: './path/to/bundled/electron/app.exe', - appArgs: ['foo', 'bar=baz'], - }, -}], +export const config = { + // ... + capabilities: [ + { + 'browserName': 'electron', + 'wdio:electronServiceOptions': { + appBinaryPath: './path/to/bundled/electron/app.exe', + appArgs: ['foo', 'bar=baz'], + }, + }, + ], + // ... +}; ``` ## Documentation diff --git a/docs/common-issues.md b/docs/common-issues.md index ce45d36b..a62f5e8d 100644 --- a/docs/common-issues.md +++ b/docs/common-issues.md @@ -14,16 +14,28 @@ $ npx electron-packager --no-prune #### Electron Forge +`package.json` + ```json -"package": "NODE_ENV=test electron-forge package" +{ + // ... + "scripts": { + // ... + "package": "TEST=true electron-forge package" + // ... + } + // ... +} ``` +`forge.config.js` + ```ts -// forge.config.js module.exports = { + // ... packagerConfig: { asar: true, - prune: process.env.NODE_ENV !== 'test', + prune: process.env.TEST !== 'true', }, // ... }; diff --git a/docs/configuration/chromedriver-configuration.md b/docs/configuration/chromedriver-configuration.md index 8c322b0d..e1a8a957 100644 --- a/docs/configuration/chromedriver-configuration.md +++ b/docs/configuration/chromedriver-configuration.md @@ -6,10 +6,10 @@ If you are not specifying a Chromedriver binary then the service will download and use the appropriate version for your app's Electron version. The Electron version of your app is determined by the version of `electron` or `electron-nightly` in your `package.json`, however you may want to override this behaviour - for instance, if the app you are testing is in a different repo from the tests. You can specify the Electron version manually by setting the `browserVersion` capability, as shown in the example configuration below: -```js -// wdio.conf.js +_`wdio.conf.ts`_ + +```ts export const config = { - outputDir: 'logs', // ... services: ['electron'], capabilities: [ diff --git a/docs/configuration/service-configuration.md b/docs/configuration/service-configuration.md index 3a38ed32..825ee0aa 100644 --- a/docs/configuration/service-configuration.md +++ b/docs/configuration/service-configuration.md @@ -2,6 +2,8 @@ The service can be configured by setting `wdio:electronServiceOptions` either on the service level or capability level, in which capability level configurations take precedence, e.g. the following WebdriverIO configuration: +_`wdio.conf.ts`_ + ```ts export const config = { // ... @@ -28,10 +30,10 @@ export const config = { ...would result in the following configuration object: -```js +```json { - appBinaryPath: '/foo/bar/myOtherApp', - appArgs: ['foo', 'bar'] + "appBinaryPath": "/foo/bar/myOtherApp", + "appArgs": ["foo", "bar"] } ``` diff --git a/docs/electron-apis/accessing-apis.md b/docs/electron-apis/accessing-apis.md index 0e33e839..3ae9ac0a 100644 --- a/docs/electron-apis/accessing-apis.md +++ b/docs/electron-apis/accessing-apis.md @@ -2,44 +2,60 @@ If you wish to access the Electron APIs then you will need to import (or require) the preload and main scripts in your app. -Somewhere near the top of your `preload.js`, load `wdio-electron-service/preload` conditionally, e.g.: +Somewhere near the top of your preload script, load `wdio-electron-service/preload` conditionally, e.g.: + +_`preload/index.ts`_ ```ts -if (process.env.NODE_ENV === 'test') { +if (process.env.TEST === 'true') { import('wdio-electron-service/preload'); } ``` And somewhere near the top of your main index file (app entry point), load `wdio-electron-service/main` conditionally, e.g.: +_`main/index.ts`_ + ```ts -if (process.env.NODE_ENV === 'test') { +if (process.env.TEST === 'true') { import('wdio-electron-service/main'); } ``` **_For security reasons it is encouraged to ensure electron main process access is only available when the app is being tested._** -This is the reason for the above dynamic imports wrapped in conditionals. An alternative approach is to use a separate test index file for both your preload and main entry points, e.g. +This is the reason for the above dynamic imports wrapped in conditionals. You will need to specify the TEST environment variable at the top of your WDIO config file: + +_`wdio.conf.ts`_ + +```ts +// ... +process.env.TEST = 'true'; +// ... +``` + +An alternative approach is to use a separate test index file for both your preload and main entry points, e.g. -`main/index.test.ts` +_`main/index.test.ts`_ ```ts import('wdio-electron-service/main'); import('./index.js'); ``` -`preload/index.test.ts` +_`preload/index.test.ts`_ ```ts import('wdio-electron-service/preload'); import('./index.js'); ``` -You can then switch the test and production entry points of the application depending on the presence of an environment variable. +You can then switch the test and production entry points of the application depending on the presence of the TEST environment variable. e.g. for a Vite-based application: +_`vite.config.ts`_ + ```ts export default defineConfig(({ mode }) => { const isProd = mode === 'production'; @@ -66,14 +82,24 @@ If you are not bundling your preload script you will be unable to import 3rd-par It is not recommended to disable sandbox mode in production; to control this behaviour you can set the `NODE_ENV` environment variable when executing WDIO: +_`package.json`_ + ```json -"wdio": "NODE_ENV=test wdio run wdio.conf.js" +// ... +"scripts": { + // ... + "wdio": "TEST=true wdio run wdio.conf.js", + // ... +} +// ... ``` -In your BrowserWindow configuration, set the sandbox option depending on the NODE_ENV variable: +In your BrowserWindow configuration, set the sandbox option depending on the TEST variable: + +_`main/index.ts`_ ```ts -const isTest = process.env.NODE_ENV === 'test'; +const isTest = process.env.TEST === 'true'; new BrowserWindow({ webPreferences: {