test: add e2e test with playwright

Author: z0gSh1u

.github/workflows/playwright.yml

@@ -0,0 +1,21 @@
+name: E2E Tests
+on:
+  push:
+    branches: [ master, dev-zx ]
+  pull_request:
+    branches: [ master ]
+jobs:
+  test:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm i
+      - name: Install Playwright Browser
+        run: npx playwright install --with-deps chromium
+      - name: Run Playwright tests
+        run: npm run test:e2e

.gitignore

@@ -5,4 +5,10 @@ coverage
 file.txt
 *.gz
 *.sw*
-*.un~
+*.un~
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -23,10 +23,12 @@
     "lodash": "4"
   },
   "devDependencies": {
+    "@playwright/test": "^1.52.0",
+    "@types/node": "^22.15.17",
     "electron-json-storage-alt": "18",
     "eslint": "7",
-    "eslint-config-egg": "^5.1.1",
-    "eslint-plugin-mocha": "^4.11.0",
+    "eslint-config-egg": "12",
+    "eslint-plugin-mocha": "~10.0.0",
     "git-contributor": "*",
     "husky": "*",
     "mocha": "*",
@@ -35,6 +37,7 @@
   "scripts": {
     "dev": "electron ./start.js",
     "test": "nyc --reporter=lcov --reporter=text mocha",
+    "test:e2e": "npx playwright test",
     "lint": "eslint . --fix",
     "contributor": "git-contributor"
   },

playwright.config.js

@@ -0,0 +1,21 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const isCI = !!process.env.CI;
+
+export default defineConfig({
+  testDir: './test/e2e',
+  fullyParallel: false,
+  forbidOnly: isCI,
+  retries: isCI ? 2 : 0,
+  workers: 1,
+  reporter: 'null',
+  use: {
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

test/e2e/electron-windows.e2e.test.js

@@ -0,0 +1,77 @@
+// @ts-check
+import { test, expect, _electron as electron } from '@playwright/test';
+import { last as _last } from 'lodash';
+import * as path from 'path';
+
+const wait = (ms = 2000) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * Gets the last element of array.
+ * @template T
+ * @param {T[] | null | undefined} arr
+ * @returns {T}
+ */
+const last = (arr) => {
+  const lastElement = _last(arr);
+  expect(lastElement).not.toBeUndefined();
+  // @ts-ignore
+  return lastElement;
+};
+
+test.describe('e2e', () => {
+  /** @type { import('@playwright/test').ElectronApplication } */
+  let electronApp;
+
+  test.beforeEach(async () => {
+    electronApp = await electron.launch({ args: ['start.js'], cwd: path.join(__dirname, '../..') });
+  });
+
+  test('loadingView option is working', async () => {
+    const window = await electronApp.firstWindow();
+
+    expect(await window.title()).toBe('Loading');
+    expect(window.url()).toMatch(/renderer\/loading\.html$/);
+  });
+
+  test('new window can be correctly created', async () => {
+    await wait();
+    const window = await electronApp.firstWindow();
+    await window.click('button#new');
+    await wait();
+    const windows = electronApp.windows();
+
+    expect(windows.length).toBeGreaterThan(1);
+    expect(last(windows).url()).toMatch(/renderer\/window\.html$/);
+  });
+
+  test('new online window can be correctly created', async () => {
+    await wait();
+    const window = await electronApp.firstWindow();
+    await window.click('button#new-online');
+    await wait();
+    const windows = electronApp.windows();
+
+    expect(windows.length).toBeGreaterThan(1);
+    expect(last(windows).url()).toMatch(/https(.+)?github\.com/);
+  });
+
+  test('window can be correctly closed', async () => {
+    await wait();
+    const window = await electronApp.firstWindow();
+    await window.click('button#new');
+    await wait();
+    const newWindow = last(electronApp.windows());
+    await newWindow.click('button#close');
+    await wait();
+    const windows = electronApp.windows();
+
+    expect(windows).toHaveLength(1);
+    expect(await windows[0].title()).toBe('main');
+  });
+
+  test.afterEach(async () => {
+    await electronApp.close();
+    // @ts-ignore
+    electronApp = null;
+  });
+});