feat(cypress): enhance browser launch setup for headless Chrome

cypress.config.ts

@@ -4,11 +4,26 @@ import parseEnvPlugin from './cypress/plugins'
 import webpack from 'webpack'
 const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 
+function customBrowserLaunch(on, config) {
+    on('before:browser:launch', (browser, launchOptions) => {
+        if (browser.name === 'chrome' && browser.isHeadless) {
+            const headlessIndex = launchOptions.args.indexOf('--headless')
+            if (headlessIndex > -1) {
+                launchOptions.args[headlessIndex] = '--headless=new'
+            }
+        }
+        return launchOptions
+    })
+    return require('./cypress/plugins/index.ts')(on, config)
+}
+
 export default defineConfig({
     e2e: {
         // We've imported your old cypress plugins here.
         // You may want to clean this up later by importing these.
         setupNodeEvents(on, config) {
+            customBrowserLaunch(on, config)
+
             const options = {
                 webpackOptions: {
                     resolve: {
@@ -52,6 +67,6 @@ export default defineConfig({
         grepTags: '',
         grepFilterSpecs: true,
         grepOmitFiltered: true,
-        grepUntagged: true
+        grepUntagged: true,
     },
 })