Playwright testing setup improvement

.gitignore

@@ -36,5 +36,8 @@ yarn-error.log*
 # local .env files
 .env.local*
 
+# Local Playwright test results folder
+/test-results
+
 .nyc_output
 coverage/

package.json

@@ -11,7 +11,7 @@
     "build": "quasar build -m electron --publish never",
     "test:unit:ui": "vitest --ui",
     "test:unit:ci": "vitest run",
-    "test:component": "node \"node_modules/@playwright/test/cli.js\" test test/playwright-e2e/",
+    "test:component": "node \"node_modules/@playwright/test/cli.js\" test src/components/",
     "test:e2e": "node \"node_modules/@playwright/test/cli.js\" test test/playwright-e2e/"
   },
   "dependencies": {

playwright.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from '@playwright/test'
+
+export default defineConfig({
+  testMatch: '**/*playwright.@(spec|test).?(c|m)[jt]s?(x)',
+  reporter: [
+    ['list'],
+    ['json', { outputFile: 'test-results/test-results.json' }]
+  ]
+})

src/components/GlobalWindowButtons/GlobalWindowButtons.playwright.test.ts

@@ -1,6 +1,6 @@
-const appRoot = require('app-root-path')
-const { _electron: electron } = require('playwright')
-const { test, expect } = require('@playwright/test')
+import appRoot from 'app-root-path'
+import { _electron as electron } from 'playwright'
+import { test, expect } from '@playwright/test'
 
 const electronMainFilePath = appRoot + '/dist/electron/UnPackaged/electron-main.js'
 const faFrontendRenderTimer = 1000
@@ -17,9 +17,14 @@ test('click resize button - smallify', async () => {
   await appWindow.waitForTimeout(faFrontendRenderTimer)
 
   const resizeButton = await appWindow.$('.globalWindowButtons__resize')
-  await resizeButton.click()
-  const isMaximized = await appWindow.evaluate(() => window.faWindowControlAPI.checkWindowMaximized())
-  expect(isMaximized).toBe(false)
+
+  if (resizeButton !== null) {
+    await resizeButton.click()
+    const isMaximized = await appWindow.evaluate(() => window.faWindowControlAPI.checkWindowMaximized())
+    expect(isMaximized).toBe(false)
+  } else {
+    test.fail()
+  }
 
   // close app
   await electronApp.close()
@@ -31,10 +36,15 @@ test('click resize button - maximize', async () => {
   await appWindow.waitForTimeout(faFrontendRenderTimer)
 
   const resizeButton = await appWindow.$('.globalWindowButtons__resize')
-  await resizeButton.click()
-  await resizeButton.click()
-  const isMaximized = await appWindow.evaluate(() => window.faWindowControlAPI.checkWindowMaximized())
-  expect(isMaximized).toBe(true)
+
+  if (resizeButton !== null) {
+    await resizeButton.click()
+    await resizeButton.click()
+    const isMaximized = await appWindow.evaluate(() => window.faWindowControlAPI.checkWindowMaximized())
+    expect(isMaximized).toBe(true)
+  } else {
+    test.fail()
+  }
 
   // close app
   await electronApp.close()
@@ -46,26 +56,35 @@ test('click minimize button', async () => {
   await appWindow.waitForTimeout(faFrontendRenderTimer)
 
   const minimizeButton = await appWindow.$('.globalWindowButtons__minimize')
-  await minimizeButton.click()
-  const isMaximized = await appWindow.evaluate(() => window.faWindowControlAPI.checkWindowMaximized())
-  expect(isMaximized).toBe(false)
+
+  if (minimizeButton !== null) {
+    await minimizeButton.click()
+    const isMaximized = await appWindow.evaluate(() => window.faWindowControlAPI.checkWindowMaximized())
+    expect(isMaximized).toBe(false)
+  } else {
+    test.fail()
+  }
 
   // close app
   await electronApp.close()
 })
 
+/* This test can VERY occasionally fail when the window takes too long to close on weaker PCs. Simply rerunning the tests generally fixes this. */
 test('click close button', async () => {
   const electronApp = await electron.launch({ args: [electronMainFilePath] })
   const appWindow = await electronApp.firstWindow()
   await appWindow.waitForTimeout(faFrontendRenderTimer)
 
-  let windowIsClosed = false
-  appWindow.on('close', () => {
-    windowIsClosed = true
-  })
-
   const closeButton = await appWindow.$('.globalWindowButtons__close')
-  await closeButton.click()
 
-  expect(windowIsClosed).toBe(true)
+  if (closeButton !== null) {
+    let windowIsClosed = false
+    appWindow.on('close', () => {
+      windowIsClosed = true
+    })
+    await closeButton.click()
+    expect(windowIsClosed).toBe(true)
+  } else {
+    test.fail()
+  }
 })

test/playwright-e2e/appWindowControls.playwright.spec.ts

@@ -0,0 +1,90 @@
+import appRoot from 'app-root-path'
+import { _electron as electron } from 'playwright'
+import { test, expect } from '@playwright/test'
+
+const electronMainFilePath = appRoot + '/dist/electron/UnPackaged/electron-main.js'
+const faFrontendRenderTimer = 1000
+
+test('launch app', async () => {
+  const electronApp = await electron.launch({ args: [electronMainFilePath] })
+  // close app
+  await electronApp.close()
+})
+
+test('click resize button - smallify', async () => {
+  const electronApp = await electron.launch({ args: [electronMainFilePath] })
+  const appWindow = await electronApp.firstWindow()
+  await appWindow.waitForTimeout(faFrontendRenderTimer)
+
+  const resizeButton = await appWindow.$('.globalWindowButtons__resize')
+
+  if (resizeButton !== null) {
+    await resizeButton.click()
+    const isMaximized = await appWindow.evaluate(() => window.faWindowControlAPI.checkWindowMaximized())
+    expect(isMaximized).toBe(false)
+  } else {
+    test.fail()
+  }
+
+  // close app
+  await electronApp.close()
+})
+
+test('click resize button - maximize', async () => {
+  const electronApp = await electron.launch({ args: [electronMainFilePath] })
+  const appWindow = await electronApp.firstWindow()
+  await appWindow.waitForTimeout(faFrontendRenderTimer)
+
+  const resizeButton = await appWindow.$('.globalWindowButtons__resize')
+
+  if (resizeButton !== null) {
+    await resizeButton.click()
+    await resizeButton.click()
+    const isMaximized = await appWindow.evaluate(() => window.faWindowControlAPI.checkWindowMaximized())
+    expect(isMaximized).toBe(true)
+  } else {
+    test.fail()
+  }
+
+  // close app
+  await electronApp.close()
+})
+
+test('click minimize button', async () => {
+  const electronApp = await electron.launch({ args: [electronMainFilePath] })
+  const appWindow = await electronApp.firstWindow()
+  await appWindow.waitForTimeout(faFrontendRenderTimer)
+
+  const minimizeButton = await appWindow.$('.globalWindowButtons__minimize')
+
+  if (minimizeButton !== null) {
+    await minimizeButton.click()
+    const isMaximized = await appWindow.evaluate(() => window.faWindowControlAPI.checkWindowMaximized())
+    expect(isMaximized).toBe(false)
+  } else {
+    test.fail()
+  }
+
+  // close app
+  await electronApp.close()
+})
+
+/* This test can VERY occasionally fail when the window takes too long to close on weaker PCs. Simply rerunning the tests generally fixes this. */
+test('click close button', async () => {
+  const electronApp = await electron.launch({ args: [electronMainFilePath] })
+  const appWindow = await electronApp.firstWindow()
+  await appWindow.waitForTimeout(faFrontendRenderTimer)
+
+  const closeButton = await appWindow.$('.globalWindowButtons__close')
+
+  if (closeButton !== null) {
+    let windowIsClosed = false
+    appWindow.on('close', () => {
+      windowIsClosed = true
+    })
+    await closeButton.click()
+    expect(windowIsClosed).toBe(true)
+  } else {
+    test.fail()
+  }
+})