Spectron [deprecated]

Easily test your Electron apps using WebdriverIO and Chromedriver.

RIP Spectron - long live WDIO

wdio-electron-service has now been released enabling Electron apps to be tested natively in WebdriverIO. I updated this fork to use the new service but this change effectively makes Spectron mostly, if not entirely redundant. Some of the Electron APIs / browser helper functions here may be ported to the new service if/as required, but this fork of Spectron will no longer be updated.

Please try out the new service if you are interested in using modern WebdriverIO and its extensive ecosystem for E2E testing Electron apps. It should be a more than adequate replacement for Spectron, but if anything critical is missing for your use case please let us know.

Modern alternatives to Spectron for Electron E2E testing:

WebdriverIO
Playwright (currently experimental Electron support)
Puppeteer-in-electron

---

Rationale

This fork of Spectron exists to fulfil a simple requirement - bring Spectron in line with modern versions of Electron & WebdriverIO, by any means necessary. The code has been completely rewritten in Typescript with modern dependencies and a much greater WebdriverIO integration.

Installation & Quick Start

Install Spectron using your favourite package manager. You will also need to install WebdriverIO and a framework dependency for whichever framework you want to use, for instance Mocha:

1npm install --save-dev @goosewobbler/spectron webdriverio @wdio/mocha-framework
2
3yarn add -D @goosewobbler/spectron webdriverio @wdio/mocha-framework
4
5pnpm i -D @goosewobbler/spectron webdriverio @wdio/mocha-framework

In your main process root (index) file, add the following import:

1import '@goosewobbler/spectron/main';

In your preload file, add the following import:

1import '@goosewobbler/spectron/preload';

Add a spec file - the following is a basic example in TypeScript using Mocha and Testing Library:

1import { initSpectron, SpectronApp } from '@goosewobbler/spectron';
2import { setupBrowser, WebdriverIOQueries } from '@testing-library/webdriverio';
3
4let app: SpectronApp;
5let screen: WebdriverIOQueries;
6
7describe('App', () => {
8  before(async (): Promise<void> => {
9    app = await initSpectron();
10    await app.client.waitUntilWindowLoaded();
11    screen = setupBrowser(app.client);
12  });
13
14  it('should launch the app', async () => {
15    const isVisible = await app.browserWindow.isVisible();
16    expect(isVisible).toBe(true);
17  });
18
19  it('should display a button', async () => {
20    const button = await screen.getByText('This is a button');
21    expect(button).toBeDefined();
22  });
23});

Running tests with Spectron depends on your app binary so you will need to ensure it is built before the tests are executed.

Next you will need some configuration. Spectron uses the exact same format as the WebdriverIO configuration file for their TestRunner, the only difference is that you won't need to configure Chromedriver in services or anything in the capabilities section as these are handled by Spectron. Here is a sample configuration:

1const { join } = require('path');
2const fs = require('fs-extra');
3
4const packageJson = JSON.parse(fs.readFileSync('./package.json'));
5const {
6  build: { productName },
7} = packageJson;
8
9const config = {
10  spectronOpts: {
11    appPath: join(process.cwd(), 'dist'),
12    appName: productName,
13  },
14  port: 9515,
15  waitforTimeout: 5000,
16  connectionRetryCount: 10,
17  connectionRetryTimeout: 30000,
18  logLevel: 'debug',
19  runner: 'local',
20  outputDir: 'wdio-logs',
21  specs: ['./test/e2e/*.spec.ts'],
22  autoCompileOpts: {
23    autoCompile: true,
24    tsNodeOpts: {
25      transpileOnly: true,
26      files: true,
27      project: './tsconfig.json',
28    },
29    tsConfigPathsOpts: {
30      baseUrl: './',
31    },
32  },
33  framework: 'mocha',
34};
35
36module.exports = { config };

Finally, you can execute your tests by pointing Spectron at your configuration file:

1npx spectron ./spectron.conf.js
2
3yarn spectron ./spectron.conf.js
4
5pnpx spectron ./spectron.conf.js

API

API details can be found here.

Architecture

The architecture of Spectron is documented here.

Known Limitations / WIP

Chromedriver is not currently restarted in between tests; this is a consequence of using the wdio-chromedriver-service. Separate worker processes are spawned by WDIO for each spec file, but within a given spec file, test state is likely to bleed into subsequent tests. See the migration doc for more details.

Not all Electron APIs are currently supported.

Some old functionality provided by the Electron remote API (now found here) is not yet fully replicated.

Some Electron API functions may not work due to serialisation errors; this is a consequence of the new way of accessing electron methods from renderer processes, this is by design and can be worked around.

Development

Logging all tasks for development here.
Rewrite Discussion here.

Configuration

Details of how to configure Spectron can be found here.