feat: switch to playwright for testing

Author: nklayman

generator/index.js

@@ -14,7 +14,6 @@ module.exports = (api, options = {}) => {
   if (!hasBackground) {
     // If user does not have a background file it should be created
     api.render('./templates/base', {
-      spectronSupport: options.electronBuilder.addTests,
       vue3: /^(\^?)3/.test(((pkg || {}).dependencies || {}).vue)
     })
   }
@@ -99,22 +98,11 @@ module.exports = (api, options = {}) => {
   if (usesTS) {
     devDependencies['@types/electron-devtools-installer'] = '^2.2.0'
   }
-  const dependencies = {}
-  if (testFramework) {
-    // Spectron version should be electron version + 2
-    devDependencies.spectron =
-      parseInt(
-        (electronVersion || pkg.devDependencies.electron).match(/^\^(\d*)\./)[1]
-      ) +
-      2 +
-      '.0.0'
-  }
   if (testFramework === 'mocha') {
     devDependencies['chai-as-promised'] = '^7.1.1'
   }
   api.extendPackage({
     scripts,
-    dependencies,
     devDependencies
   })
 }

generator/templates/base/src/background.js

@@ -16,10 +16,6 @@ async function createWindow() {
     width: 800,
     height: 600,
     webPreferences: {
-      <% if (spectronSupport) { %>
-      // Required for Spectron testing
-      enableRemoteModule: !!process.env.IS_TEST,
-      <% } %>
       // Use pluginOptions.nodeIntegration, leave this alone
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
       nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,

generator/templates/tests-jest/tests/unit/electron.spec.js

@@ -1,32 +1,23 @@
 /**
  * @jest-environment node
  */
-import spectron from 'spectron'
-import { testWithSpectron } from 'vue-cli-plugin-electron-builder'
+import { testWithPlaywright } from 'vue-cli-plugin-electron-builder'
 jest.setTimeout(50000)
 
 test('Window Loads Properly', async () => {
   // Wait for dev server to start
-  const { app, stopServe } = await testWithSpectron(spectron)
-  const win = app.browserWindow
-  const client = app.client
+  const { app, stop } = await testWithPlaywright()
+  const win = await app.firstWindow()
+  await win.waitForLoadState('domcontentloaded')
 
   // Window was created
-  expect(await client.getWindowCount()).toBe(1)
-  // It is not minimized
-  expect(await win.isMinimized()).toBe(false)
-  // Window is visible
-  expect(await win.isVisible()).toBe(true)
-  // Size is correct
-  const { width, height } = await win.getBounds()
-  expect(width).toBeGreaterThan(0)
-  expect(height).toBeGreaterThan(0)
+  expect(app.windows().length).toBe(1)
   // App is loaded properly
   expect(
     /Welcome to Your Vue\.js (\+ TypeScript )?App/.test(
-      await (await app.client.$('#app')).getHTML()
+      await win.innerText('#app')
     )
   ).toBe(true)
 
-  await stopServe()
+  await stop()
 })

lib/testWithPlaywright.js

@@ -0,0 +1,74 @@
+const execa = require('execa')
+const merge = require('lodash.merge')
+const { _electron: electron } = require('playwright')
+
+module.exports = (options = {}) =>
+  new Promise((resolve, reject) => {
+    let log = ''
+
+    let outputDir = ''
+    // Launch electron:serve in headless mode
+    const child = execa(
+      require.resolve('@vue/cli-service/bin/vue-cli-service', {
+        paths: [process.cwd()]
+      }),
+      ['electron:serve', '--headless', '--mode', options.mode || 'production'],
+      {
+        extendEnv: false,
+        env: {
+          ...process.env,
+          // Extending NODE_ENV causes warnings with build
+          NODE_ENV: undefined
+        }
+      }
+    )
+    // Exit if electron:serve throws an error
+    child.on('error', (err) => {
+      reject(err)
+    })
+    child.stdout.on('data', async (data) => {
+      data = data.toString()
+      log += data
+      const urlMatch = data.match(
+        /\$WEBPACK_DEV_SERVER_URL=https?:\/\/[^/]+\/?/
+      )
+      const outputDirMatch = data.match(/\$outputDir=\b.*\b/)
+      if (outputDirMatch) {
+        // Record output dir
+        outputDir = outputDirMatch[0].split('=')[1]
+      }
+      if (urlMatch) {
+        // Record url and launch app
+        const url = urlMatch[0].split('=')[1]
+        let app
+        if (!options.noPlaywright) {
+          const launchOptions = merge(
+            {
+              args: [`${outputDir}`],
+              env: {
+                ...process.env,
+                IS_TEST: true,
+                WEBPACK_DEV_SERVER_URL: url
+              }
+            },
+            // Apply user options
+            options.launchOptions
+          )
+          // Launch app with playwright
+          app = await electron.launch(launchOptions)
+        }
+        resolve({
+          stdout: log,
+          url,
+          app,
+          stop: () => {
+            // Exit serve process
+            child.stdin.write('close')
+            child.kill('SIGKILL')
+            // Close playwright
+            return app.close()
+          }
+        })
+      }
+    })
+  })