Run tests in electron, add eslint plugin for playwright

Author: radmorecameron

.vscode/extensions.json

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

_scripts/dev-runner.js

@@ -15,7 +15,6 @@ let manualRestart = null
 
 const remoteDebugging = process.argv.indexOf('--remote-debug') !== -1
 const web = process.argv.indexOf('--web') !== -1
-const noopen = process.argv.indexOf('--no-open') !== -1
 
 let mainConfig
 let rendererConfig
@@ -223,7 +222,7 @@ function startWeb () {
   })
 
   const server = new WebpackDevServer({
-    open: !noopen,
+    open: true,
     static: {
       directory: path.resolve(__dirname, '..', 'static'),
       watch: {

e2e/Settings.e2e.mjs

@@ -14,10 +14,12 @@ import eslintPluginYml from 'eslint-plugin-yml'
 import { neostandard } from 'neostandard/lib/main.js'
 import jsdoc from 'eslint-plugin-jsdoc'
 import freetube from './_scripts/eslint-rules/plugin.mjs'
+import eslintPluginPlaywright from 'eslint-plugin-playwright'
 
 import activeLocales from './static/locales/activeLocales.json' with { type: 'json' }
+import { defineConfig } from "eslint/config";
 
-export default [
+export default defineConfig([
   {
     ignores: [
       'build/',
@@ -226,7 +228,7 @@ export default [
     }
   },
   {
-    files: ['_scripts/**/*.mjs'],
+    files: ['_scripts/**/*.mjs', 'tests/**/*.mjs'],
     languageOptions: {
       globals: globals.node,
       ecmaVersion: 'latest',
@@ -246,5 +248,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"],
+        }
+      ]
+    }
   }
-]
+])

e2e/helpers.mjs

@@ -30,16 +30,15 @@
     "debug-runner": "node _scripts/dev-runner.js --remote-debug",
     "dev": "run-s patch-shaka dev-runner",
     "dev:web": "node _scripts/dev-runner.js --web",
-    "dev:web-noopen": "node _scripts/dev-runner.js --web --no-open",
     "dev-runner": "node _scripts/dev-runner.js",
     "get-instances": "node _scripts/getInstances.js",
     "patch-shaka": "node _scripts/patchShaka.mjs",
     "get-regions": "node _scripts/getRegions.mjs",
     "lint-all": "run-p lint lint-json",
     "lint": "run-p eslint-lint lint-style",
     "lint-fix": "run-p eslint-lint-fix 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}\"",
@@ -53,7 +52,8 @@
     "postinstall": "yarn run --silent patch-shaka",
     "checkforbadtemplates": "node _scripts/findMissingTemplates.mjs",
     "ci": "yarn install --silent --frozen-lockfile --network-concurrency 1",
-    "test:e2e": "playwright test"
+    "test:playwright": "run-s pack test:playwright-nopack",
+    "test:playwright-nopack": "playwright test"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
@@ -94,6 +94,7 @@
     "eslint": "^9.39.2",
     "eslint-plugin-jsdoc": "^62.5.2",
     "eslint-plugin-jsonc": "^2.21.0",
+    "eslint-plugin-playwright": "^2.5.1",
     "eslint-plugin-unicorn": "^62.0.0",
     "eslint-plugin-vue": "^10.7.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",

eslint.config.mjs

@@ -1,15 +1,7 @@
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 export default {
-  testDir: './e2e',
-  testMatch: '*.e2e.mjs',
-  // retries: 1,
-  fullyParallel: true,
-  use: {
-    headless: !!process.env.CI,
-    baseURL: 'http://localhost:9080'
-  },
-  webServer: {
-    command: 'npm run dev:web-noopen',
-    url: 'http://localhost:9080',
-  },
+  testDir: './tests/playwright',
+  testMatch: '*.spec.mjs',
+  workers: 1,
+  fullyParallel: false
 }

package.json

@@ -0,0 +1,59 @@
+import { devices, expect, test, _electron as electron } from '@playwright/test'
+import { join } from 'path'
+import { AxeBuilder } from '@axe-core/playwright'
+
+const mainJs = join(import.meta.dirname, '../../dist/main.js')
+
+/**
+ *
+ * @param {string} name
+ * @param {import('@playwright/test').ViewportSize} viewPortSize
+ * @param {(function({ app: import('@playwright/test').ElectronApplication, page: import('@playwright/test').Page }) : Promise<void>)} func
+*/
+const electronTest = async (name, viewPortSize, func) => {
+  // eslint-disable-next-line playwright/expect-expect, playwright/valid-title
+  test(name, async () => {
+    const electronApp = await electron.launch({ args: [mainJs] })
+    const page = await electronApp.firstWindow()
+    page.setViewportSize(viewPortSize)
+
+    await func({ app: electronApp, page })
+
+    await electronApp.close()
+  })
+}
+
+/**
+ * @param {string} name
+ * @param {(function({ app: import('@playwright/test').ElectronApplication, page: import('@playwright/test').Page }) : Promise<void>)} func
+*/
+export const electronDesktopTest = async (name, func) => {
+  await electronTest(name, devices['Desktop Firefox'].viewport, func)
+}
+
+/**
+ * @param {string} name
+ * @param {(function({ app: import('@playwright/test').ElectronApplication, page: import('@playwright/test').Page }) : Promise<void>)} func
+*/
+export const electronMobileTest = async (name, func) => {
+  await electronTest(name, devices['LG Optimus L70'].viewport, func)
+}
+
+/**
+ * @param {string} name
+ * @param {(function({ app: import('@playwright/test').ElectronApplication, page: import('@playwright/test').Page }) : Promise<void>)} func
+*/
+export const electronTabletTest = async (name, func) => {
+  await electronTest(name, devices['Galaxy Tab S9'].viewport, func)
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+export async function validateAccessibility (page) {
+  const axeResults = await new AxeBuilder({ page })
+    .setLegacyMode(true)
+    .analyze()
+
+  expect(axeResults.violations).toHaveLength(0)
+}

playwright.config.mjs

@@ -0,0 +1,35 @@
+import { electronDesktopTest, electronMobileTest, electronTabletTest, validateAccessibility } from '../helpers.mjs'
+
+electronDesktopTest('desktop - settings - accessibility test', async ({ page }) => {
+  await page.waitForLoadState('load')
+  await page.waitForLoadState('domcontentloaded')
+
+  // go to settings page
+  await page.locator('a[href="#/settings"]').last().click()
+  await page.waitForLoadState('load')
+  await page.waitForLoadState('domcontentloaded')
+  await validateAccessibility(page)
+})
+
+electronMobileTest('mobile - settings - accessibility test', async ({ page }) => {
+  await page.waitForLoadState('load')
+  await page.waitForLoadState('domcontentloaded')
+
+  // go to settings page
+  await page.locator('.moreOptionNav').click()
+  await page.locator('a[href="#/settings"]').first().click()
+  await page.waitForLoadState('load')
+  await page.waitForLoadState('domcontentloaded')
+  await validateAccessibility(page)
+})
+
+electronTabletTest('tablet - settings - accessibility test', async ({ page }) => {
+  await page.waitForLoadState('load')
+  await page.waitForLoadState('domcontentloaded')
+
+  // go to settings page
+  await page.locator('a[href="#/settings"]').last().click()
+  await page.waitForLoadState('load')
+  await page.waitForLoadState('domcontentloaded')
+  await validateAccessibility(page)
+})

tests/playwright/helpers.mjs

@@ -4388,6 +4388,13 @@ eslint-plugin-n@^17.20.0:
     semver "^7.6.3"
     ts-declaration-location "^1.0.6"
 
+eslint-plugin-playwright@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-playwright/-/eslint-plugin-playwright-2.5.1.tgz#f4bdc721ecaab2dac4690208ebd48ae020513435"
+  integrity sha512-q7oqVQTTfa3VXJQ8E+ln0QttPGrs/XmSO1FjOMzQYBMYF3btih4FIrhEYh34JF184GYDmq3lJ/n7CMa49OHBvA==
+  dependencies:
+    globals "^16.4.0"
+
 eslint-plugin-promise@^7.2.1:
   version "7.2.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-7.2.1.tgz#a0652195700aea40b926dc3c74b38e373377bfb0"