implement basic automation test with playwright

Author: jooy2

.github/workflows/app-test.yml

@@ -0,0 +1,51 @@
+name: app-test
+
+on:
+  push:
+    branches: [master]
+    paths:
+      - '**'
+      - '!*.md'
+      - '!LICENSE'
+      - '!.github/**'
+  pull_request:
+    branches: [master]
+  workflow_dispatch:
+
+jobs:
+  app-test:
+    runs-on: ${{ matrix.os }}
+    name: Test NodeJS ${{ matrix.node_version }} on ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        node_version: ['16', '18', '20']
+        os: [windows-latest, macos-latest, ubuntu-latest]
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup NodeJS ${{ matrix.node_version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node_version }}
+          cache: npm
+          cache-dependency-path: '**/package-lock.json'
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        id: npm-cache
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-
+      - name: Install dependencies
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm i
+
+      - name: Test module script
+        run: npm run test

.gitignore

@@ -2,6 +2,7 @@
 node_modules/
 release/
 dist/
+tests/results/
 
 .eslintcache
 vite-plugin-electron.log

electron-builder.json5

@@ -10,7 +10,7 @@
     buildResources: './buildAssets/installer/',
     output: './release/${version}',
   },
-  files: ['dist/**/*', '!release/**/*'],
+  files: ['dist/**/*', '!release/**/*', '!tests/**/*'],
   fileAssociations: [
     {
       ext: 'swf',

package-lock.json

@@ -27,13 +27,17 @@
     "dev:debug:force": "vite -d --force",
     "build": "npm run build:pre && electron-builder -wml",
     "build:pre": "tsc && vite build",
+    "build:dir": "npm run build:pre && electron-builder --dir",
     "build:mac": "npm run build:pre && electron-builder --mac",
     "build:win": "npm run build:pre && electron-builder --windows",
     "build:linux": "npm run build:pre && electron-builder --linux",
     "format": "prettier .",
-    "format:fix": "prettier . --write"
+    "format:fix": "prettier . --write",
+    "test": "npm run build:dir && xvfb-maybe -- playwright test",
+    "test:nobuild": "xvfb-maybe -- playwright test"
   },
   "devDependencies": {
+    "@playwright/test": "^1.36.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/parser": "^6.1.0",
@@ -49,12 +53,14 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "playwright": "^1.36.1",
     "prettier": "^3.0.0",
     "typescript": "^5.1.6",
     "vite": "^4.4.6",
     "vite-plugin-electron": "^0.12.0",
     "vite-plugin-electron-renderer": "^0.14.5",
-    "vite-plugin-eslint": "^1.8.1"
+    "vite-plugin-eslint": "^1.8.1",
+    "xvfb-maybe": "^0.2.1"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",

package.json

@@ -0,0 +1,5 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  outputDir: 'tests/results',
+});

playwright.config.ts

@@ -56,7 +56,7 @@ global.APP_VERSION_CODE = pkg.versionCode;
 global.APP_VERSION_DATE = pkg.versionDate;
 global.APP_AUTHOR = pkg.author;
 global.APP_RUFFLE_VERSION_DATE = pkg.ruffleVersionDate;
-global.ENV_IS_DEV = !app.isPackaged;
+global.ENV_IS_DEV = process.env.E2E === 'yes' ? false : !app.isPackaged;
 global.ENV_OS = CURRENT_OS;
 global.ENV_IS_WINDOWS = CURRENT_OS === 'Windows';
 global.ENV_IS_MAC = CURRENT_OS === 'macOS';

src/main/index.ts

@@ -44,6 +44,7 @@ const Layout = ({
           {title}
           {withTail ? titleTail : ''}
         </title>
+        <script src="js/ruffle/ruffle.js" />
       </Helmet>
       {header ? <Header title={title} withBackButton={withBackButton} /> : ''}
       <Grid

src/renderer/components/layouts/Layout.tsx

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
@@ -14,5 +14,4 @@
     <div id="app"></div>
   </body>
   <script type="module" src="./index.tsx"></script>
-  <script src="js/ruffle/ruffle.js"></script>
 </html>

src/renderer/index.html

@@ -142,6 +142,7 @@ const Explorer = () => {
                 <Paper css={paperSm}>
                   <div
                     {...getRootProps({
+                      id: 'uiFileOpen',
                       css: css`
                         cursor: pointer;
                         user-select: none;