4

What I am trying to achieve:

I'd like to set up an electron project with a proper headless end-to-end testing configuration.

Issues encountered

Spectronjs seems to be the solution to achieve so. However there is no configuration to prevent the window from opening on each test. Reading some of the threads on the repository + the documentation of electron in regards to testing mentions Xvfb. I've tried to get my head around this but understand so far that this cannot be installed on Windows? And that there is no alternative.

The list on the page includes other options such as Appvoyer or CicleCI but these again are new and I am barely able to find a guide around these not to mention, I am not really liking that I have to do all these steps (link to github/bitbucket account, etc).

I've also tried to go through demo applications from the electronjs list page, but not all of them do have tests, and when they do, they are sometime written in what seems to be a different programming language, or specifically aimed for angular or react, while on my end I am aiming to use vuejs.

Can anyone point me to a clean example of an offline end to end headless test of an electron app on Windows?

joeyj
  • 535
  • 1
  • 6
  • 22

1 Answers1

3

There are several options how to E2E test an Electron app, unfortunately none of them is truly headless. On Windows you do not need Xvfb, it is a Linux thing. On Windows there is a "screen" available even in CI environments (I have experience with Appveyor and Azure Pipelines).

In the past I used Spectron, but I recently switched to Puppeteer and I am very happy with the switch.

Short Puppeteer try out test file:

const electron = require("electron");
const puppeteer = require("puppeteer-core");

const delay = ms =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, ms);
  });

(async () => {
  try {
    const app = await puppeteer.launch({
      executablePath: electron,
      args: ["."],
      headless: false,
    });
    const pages = await app.pages();
    const [page] = pages;

    await page.setViewport({ width: 1200, height: 700 });
    await delay(5000);
    const image = await page.screenshot();
    console.log(image);
    await page.close();
    await delay(2000);

    await app.close();
  } catch (error) {
    console.error(error);
  }
})();

I am testing and building an electron app in Azure Pipelines (free for open-source projects) on Win, Linux and MacOS with this config: azure-pipelines.yml

PeterDanis
  • 8,210
  • 2
  • 13
  • 23
  • Thanks for the response. I already implemented a solution with Jest and Spectron but I am not satisfied with the result, it's slow, opens multiple empty terminals (apparently an issue which dates from 2016 and not yet resolved up to now, and also occurs only on windows). I thought maybe docker would help achieve headless testing? But I am finding all this overwhelming. – joeyj Jan 19 '19 at 14:54
  • Up to now, I've reached the following "electronuserland/builder:wine-chrome — google-chrome-stable and xvfb are available — you can use this image for headless testing of Electron application. Based on builder:wine." which seems to indicate that it's possible to achieve headless testing. But I still can't wrap my head around Docker and what it takes to get it working. – joeyj Jan 20 '19 at 06:18
  • 1
    I still couldn't make it work even when setting the executablePath to electron. It says 'ERROR: The process "14012" not found. (node:28388) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!' What could have gone wrong? – oatcrunch Apr 01 '19 at 03:05
  • There is also [cucumber-electron](https://cucumber.io/blog/open-source/announcing-cucumber-electron/). – Ambroise Rabier Apr 27 '21 at 14:50