Setup playwright tests for accessibility testing

.gitignore

@@ -25,6 +25,7 @@ __coverage__
 csak-timelog.json
 .idea/
 debug/
+test-results/
 
 # Lefthook
 lefthook-local.yml

.vscode/extensions.json

@@ -6,6 +6,7 @@
     "syler.sass-indented",
     "redhat.vscode-yaml",
     "vue.volar",
-    "eamodio.gitlens"
+    "eamodio.gitlens",
+    "ms-playwright.playwright"
   ]
 }

_scripts/clean.mjs

@@ -3,8 +3,10 @@ import { join } from 'path'
 
 const BUILD_PATH = join(import.meta.dirname, '..', 'build')
 const DIST_PATH = join(import.meta.dirname, '..', 'dist')
+const TEST_RESULTS_PATH = join(import.meta.dirname, '..', 'test-results')
 
 await Promise.all([
   rm(BUILD_PATH, { recursive: true, force: true }),
-  rm(DIST_PATH, { recursive: true, force: true })
+  rm(DIST_PATH, { recursive: true, force: true }),
+  rm(TEST_RESULTS_PATH, { recursive: true, force: true }),
 ])

_scripts/webpack.main.config.js

@@ -5,74 +5,77 @@ const JsonMinimizerPlugin = require('json-minimizer-webpack-plugin')
 
 const isDevMode = process.env.NODE_ENV === 'development'
 
-/** @type {import('webpack').Configuration} */
-const config = {
-  name: 'main',
-  mode: process.env.NODE_ENV,
-  devtool: isDevMode ? 'eval-cheap-module-source-map' : false,
-  entry: {
-    main: path.join(__dirname, '../src/main/index.js'),
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: 'babel-loader',
-        exclude: /node_modules/,
-      },
-      {
-        resource: path.resolve(__dirname, '../node_modules/mime-db/db.json'),
-        use: path.join(__dirname, 'mime-db-shrinking-loader.js')
-      }
-    ],
-    generator: {
-      json: {
-        JSONParse: false
+module.exports = (env) => {
+  /** @type {import('webpack').Configuration} */
+  const config = {
+    name: 'main',
+    mode: process.env.NODE_ENV,
+    devtool: isDevMode ? 'eval-cheap-module-source-map' : false,
+    entry: {
+      main: path.join(__dirname, '../src/main/index.js'),
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          use: 'babel-loader',
+          exclude: /node_modules/,
+        },
+        {
+          resource: path.resolve(__dirname, '../node_modules/mime-db/db.json'),
+          use: path.join(__dirname, 'mime-db-shrinking-loader.js')
+        }
+      ],
+      generator: {
+        json: {
+          JSONParse: false
+        }
       }
-    }
-  },
-  // webpack defaults to only optimising the production builds, so having this here is fine
-  optimization: {
-    minimizer: [
-      '...', // extend webpack's list instead of overwriting it
-      new JsonMinimizerPlugin({
-        exclude: /\/locales\/.*\.json/
+    },
+    // webpack defaults to only optimising the production builds, so having this here is fine
+    optimization: {
+      minimizer: [
+        '...', // extend webpack's list instead of overwriting it
+        new JsonMinimizerPlugin({
+          exclude: /\/locales\/.*\.json/
+        })
+      ]
+    },
+    node: {
+      __dirname: isDevMode,
+      __filename: isDevMode
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        'process.platform': `'${process.platform}'`,
+        'process.env.IS_ELECTRON_MAIN': true,
+        'process.env.IS_TESTS': env.IS_TESTS
       })
-    ]
-  },
-  node: {
-    __dirname: isDevMode,
-    __filename: isDevMode
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.platform': `'${process.platform}'`,
-      'process.env.IS_ELECTRON_MAIN': true
-    })
-  ],
-  output: {
-    filename: '[name].js',
-    libraryTarget: 'commonjs2',
-    path: path.join(__dirname, '../dist'),
-  },
-  target: 'electron-main',
-}
+    ],
+    output: {
+      filename: '[name].js',
+      libraryTarget: 'commonjs2',
+      path: path.join(__dirname, '../dist'),
+    },
+    target: 'electron-main',
+  }
 
-if (!isDevMode) {
-  config.plugins.push(
-    new CopyWebpackPlugin({
-      patterns: [
-        {
-          from: path.join(__dirname, '../static'),
-          to: path.join(__dirname, '../dist/static'),
-          globOptions: {
-            dot: true,
-            ignore: ['**/.*', '**/locales/**', '**/pwabuilder-sw.js', '**/manifest.json', '**/dashFiles/**', '**/storyboards/**'],
+  if (!isDevMode) {
+    config.plugins.push(
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: path.join(__dirname, '../static'),
+            to: path.join(__dirname, '../dist/static'),
+            globOptions: {
+              dot: true,
+              ignore: ['**/.*', '**/locales/**', '**/pwabuilder-sw.js', '**/manifest.json', '**/dashFiles/**', '**/storyboards/**'],
+            },
           },
-        },
-      ]
-    })
-  )
-}
+        ]
+      })
+    )
+  }
 
-module.exports = config
+  return config
+}

eslint.config.mjs

@@ -1,3 +1,4 @@
+import { defineConfig } from "eslint/config";
 import eslintPluginVue from 'eslint-plugin-vue'
 import vuejsAccessibility from 'eslint-plugin-vuejs-accessibility'
 import eslintPluginUnicorn from 'eslint-plugin-unicorn'
@@ -12,13 +13,14 @@ import jsdoc from 'eslint-plugin-jsdoc'
 import stylistic from '@stylistic/eslint-plugin'
 import eslintPluginImportX from 'eslint-plugin-import-x'
 import eslintPluginN from 'eslint-plugin-n'
+import eslintPluginPlaywright from 'eslint-plugin-playwright'
 import eslintPluginPromise from 'eslint-plugin-promise'
 
 import freetube from './_scripts/eslint-rules/plugin.mjs'
 
 import activeLocales from './static/locales/activeLocales.json' with { type: 'json' }
 
-export default [
+export default defineConfig([
   {
     ignores: [
       'build/',
@@ -427,7 +429,7 @@ export default [
     }
   },
   {
-    files: ['_scripts/**/*.mjs'],
+    files: ['_scripts/**/*.mjs', 'tests/**/*.mjs'],
     languageOptions: {
       globals: globals.node,
       ecmaVersion: 'latest',
@@ -447,5 +449,24 @@ export default [
       'unicorn/prefer-date-now': 'error',
       'unicorn/prefer-array-index-of': 'error',
     }
+  },
+  {
+    files: ['tests/playwright/helpers.mjs', 'tests/playwright/**/*spec.mjs'],
+    extends: [eslintPluginPlaywright.configs['flat/recommended']],
+    settings: {
+      playwright: {
+        globalAliases: {
+          test: ["electronDesktopTest", "electronMobileTest", "electronTabletTest"],
+        }
+      }
+    },
+    rules: {
+      "playwright/expect-expect": [
+        "error",
+        {
+          "assertFunctionNames": ["validateAccessibility"],
+        }
+      ]
+    }
   }
-]
+])

package.json

@@ -34,8 +34,8 @@
     "lint-all": "pnpm run \"/^(lint|lint-json)$/\"",
     "lint": "pnpm run \"/^(eslint-lint|lint-style)$/\"",
     "lint-fix": "pnpm run \"/^(eslint-lint|lint-style)-fix$/\"",
-    "eslint-lint": "eslint --config eslint.config.mjs \"src/**/*.js\" \"src/renderer/**/*.vue\" \"static/*.js\" \"_scripts/*.js\" \"_scripts/**/*.mjs\"",
-    "eslint-lint-fix": "eslint --config eslint.config.mjs --fix \"src/**/*.js\" \"src/renderer/**/*.vue\" \"static/*.js\" \"_scripts/*.js\" \"_scripts/**/*.mjs\"",
+    "eslint-lint": "eslint --config eslint.config.mjs \"src/**/*.js\" \"src/renderer/**/*.vue\" \"static/*.js\" \"_scripts/*.js\" \"_scripts/**/*.mjs\" \"tests/**/*.mjs\"",
+    "eslint-lint-fix": "eslint --config eslint.config.mjs --fix \"src/**/*.js\" \"src/renderer/**/*.vue\" \"static/*.js\" \"_scripts/*.js\" \"_scripts/**/*.mjs\" \"tests/**/*.mjs\"",
     "lint-json": "eslint --config eslint.config.mjs \"static/**/*.json\"",
     "lint-style": "stylelint \"src/**/*.{css,scss}\"",
     "lint-style-fix": "stylelint --fix \"src/**/*.{css,scss}\"",
@@ -44,10 +44,14 @@
     "pack:main": "webpack --mode=production --config-node-env=production --config _scripts/webpack.main.config.js",
     "pack:renderer": "webpack --mode=production --config-node-env=production --config _scripts/webpack.renderer.config.js",
     "pack:preload": "webpack --mode=production --config-node-env=production --config _scripts/webpack.preload.config.js",
+    "pack:tests": "pnpm run \"/^pack:(main-tests|renderer|preload|botGuardScript)$/\" && node _scripts/injectAllowedPaths.mjs",
+    "pack:main-tests": "webpack --mode=production --config-node-env=production --env \"IS_TESTS=true\" --config _scripts/webpack.main.config.js",
     "pack:web": "webpack --mode=production --config-node-env=production --config _scripts/webpack.web.config.js",
     "pack:botGuardScript": "webpack --config _scripts/webpack.botGuardScript.config.js",
     "checkforbadtemplates": "node _scripts/findMissingTemplates.mjs",
-    "ci": "pnpm install --frozen-lockfile"
+    "ci": "pnpm install --frozen-lockfile",
+    "test:playwright": "pnpm run pack && pnpm run test:playwright-nopack",
+    "test:playwright-nopack": "playwright test"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
@@ -74,11 +78,13 @@
     "youtubei.js": "^17.0.1"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.1",
     "@babel/core": "^7.29.0",
     "@babel/preset-env": "^7.29.2",
     "@double-great/stylelint-a11y": "^3.4.10",
     "@eslint/js": "^10.0.1",
     "@intlify/eslint-plugin-vue-i18n": "^4.3.0",
+    "@playwright/test": "^1.58.2",
     "@stylistic/eslint-plugin": "^5.10.0",
     "babel-loader": "^10.1.1",
     "copy-webpack-plugin": "^14.0.0",
@@ -91,6 +97,7 @@
     "eslint-plugin-jsdoc": "^62.9.0",
     "eslint-plugin-jsonc": "^3.1.2",
     "eslint-plugin-n": "^17.24.0",
+    "eslint-plugin-playwright": "^2.5.1",
     "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-unicorn": "^64.0.0",
     "eslint-plugin-vue": "^10.8.0",

playwright.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+export default {
+  testDir: './tests/playwright',
+  testMatch: '**/*.spec.mjs',
+  workers: 1,
+  fullyParallel: false
+}