replace Spectron by Playwright

Author: maximegris

.gitignore

@@ -43,6 +43,8 @@ testem.log
 /e2e/*.js
 !/e2e/protractor.conf.js
 /e2e/*.map
+/e2e/tracing
+/e2e/screenshots
 
 # System Files
 .DS_Store

app/main.ts

@@ -3,9 +3,6 @@ import * as path from 'path';
 import * as fs from 'fs';
 import * as url from 'url';
 
-// Initialize remote module
-require('@electron/remote/main').initialize();
-
 let win: BrowserWindow = null;
 const args = process.argv.slice(1),
   serve = args.some(val => val === '--serve');
@@ -25,7 +22,6 @@ function createWindow(): BrowserWindow {
       nodeIntegration: true,
       allowRunningInsecureContent: (serve) ? true : false,
       contextIsolation: false,  // false if you want to run e2e test with Spectron
-      enableRemoteModule : true // true if you want to run e2e test with Spectron or use remote module in renderer context (ie. Angular)
     },
   });
 

app/package-lock.json

@@ -3,7 +3,5 @@
   "version": "10.1.0",
   "main": "main.js",
   "private": true,
-  "dependencies": {
-    "@electron/remote": "1.2.0"
-  }
+  "dependencies": {}
 }

app/package.json

@@ -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/common-setup.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/main.e2e.ts

@@ -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"
+  ],
+}