CODEWITHSUNDEEP
electrone2e-testingheadless-browserxvfb
Wyxos
Wyxos

Reputation: 595

End to end test of electron app on Windows

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?

Upvotes: 4

Views: 3220

Answers (1)

PeterDanis
PeterDanis

Reputation: 9326

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

Upvotes: 3

Related Questions