replace Spectron by Playwright

e2e/common-setup.ts

@@ -1,26 +0,0 @@
-const APPLICATION = require('spectron').Application;
-const ELECTRON_PATH = require('electron'); // Require Electron from the binaries included in node_modules.
-const PATH = require('path');
-
-export default function setup(): void {
-  beforeEach(async function() {
-    this.app = new APPLICATION({
-      // Your electron path can be any binary
-      // i.e for OSX an example path could be '/Applications/MyApp.app/Contents/MacOS/MyApp'
-      // But for the sake of the example we fetch it from our node_modules.
-      path: ELECTRON_PATH,
-      // The following line tells spectron to look and use the main.js file
-      // and the package.json located in app folder.
-      args: [PATH.join(__dirname, '../app/main.js'), PATH.join(__dirname, '../app/package.json')],
-      webdriverOptions: {}
-    });
-
-    await this.app.start();
-  });
-
-  afterEach(async function() {
-    if (this.app && this.app.isRunning()) {
-      await this.app.stop();
-    }
-  });
-}

e2e/main.e2e.ts

@@ -1,27 +0,0 @@
-import { expect } from 'chai';
-import { SpectronClient } from 'spectron';
-
-import commonSetup from './common-setup';
-
-describe('angular-electron App', function() {
-
-  commonSetup.apply(this);
-
-  let client: SpectronClient;
-
-  beforeEach(function() {
-    client = this.app.client;
-  });
-
-  it('creates initial windows', async function() {
-    const count = await client.getWindowCount();
-    expect(count).to.equal(1);
-  });
-
-  it('should display message saying App works !', async function() {
-    const elem = await client.$('app-home h1');
-    const text = await elem.getText();
-    expect(text).to.equal('App works !');
-  });
-
-});

e2e/main.spec.ts

@@ -0,0 +1,58 @@
+import { BrowserContext, ElectronApplication, Page, _electron as electron } from 'playwright';
+import { test, expect } from '@playwright/test';
+const PATH = require('path');
+
+test.describe('Check Home Page', async () => {
+  let app: ElectronApplication;
+  let firstWindow: Page;
+  let context: BrowserContext;
+
+  test.beforeAll( async () => {
+    app = await electron.launch({ args: [PATH.join(__dirname, '../app/main.js'), PATH.join(__dirname, '../app/package.json')] });
+    context = app.context();
+    await context.tracing.start({ screenshots: true, snapshots: true });
+    firstWindow = await app.firstWindow();
+  });
+
+  test('Launch electron app', async () => {
+
+    const windowState: { isVisible: boolean; isDevToolsOpened: boolean; isCrashed: boolean } = await app.evaluate(async (process) => {
+      const mainWindow = process.BrowserWindow.getAllWindows()[0];
+
+      const getState = () => ({
+        isVisible: mainWindow.isVisible(),
+        isDevToolsOpened: mainWindow.webContents.isDevToolsOpened(),
+        isCrashed: mainWindow.webContents.isCrashed(),
+      });
+
+      return new Promise((resolve) => {
+        if (mainWindow.isVisible()) {
+          resolve(getState());
+        } else {
+          mainWindow.once('ready-to-show', () => setTimeout(() => resolve(getState()), 0));
+        }
+      });
+    });
+
+    expect(windowState.isVisible).toBeTruthy();
+    expect(windowState.isDevToolsOpened).toBeFalsy();
+    expect(windowState.isCrashed).toBeFalsy();
+  });
+
+  test('Check Home Page design', async ({ browserName}) => {
+    // Uncomment if you change the design of Home Page in order to create a new screenshot
+    const screenshot = await firstWindow.screenshot({ path: '/tmp/home.png' });
+    expect(screenshot).toMatchSnapshot(`home-${browserName}.png`);
+  });
+
+  test('Check title', async () => {
+    const elem = await firstWindow.$('app-home h1');
+    const text = await elem.innerText();
+    expect(text).toBe('App works !');
+  });
+
+  test.afterAll( async () => {
+    await context.tracing.stop({ path: 'e2e/tracing/trace.zip' });
+    await app.close();
+  });
+});

e2e/playwright.config.ts

@@ -0,0 +1,19 @@
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+  testDir: '.',
+  timeout: 45000,
+  outputDir: './screenshots',
+  use: {
+    headless: false,
+    viewport: { width: 1280, height: 720 },
+    launchOptions: {
+      slowMo: 1000,
+    },
+    trace: 'on',
+  },
+  expect: {
+    toMatchSnapshot: { threshold: 0.2 },
+  },
+};
+
+module.exports = config;

e2e/tsconfig.e2e.json

@@ -1,14 +1,13 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "types": [
-      "mocha",
-      "node"
-    ]
-  },
-  "include": [
-    "**.ts"
-  ]
-}
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "**.spec.ts"
+  ],
+}