refactor(playwright)!: use prod bundle & preview server on CI (#182)

Co-authored-by: Max Schmitt <[email protected]>

Author: haoqunjiang

template/base/package.json

@@ -2,7 +2,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview --port 4173"
+    "preview": "vite preview"
   },
   "dependencies": {
     "vue": "^3.2.40"

template/config/playwright/playwright.config.js

@@ -99,7 +99,11 @@ const config = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'npm run dev',
+    /**
+     * Use the dev server by default for faster feedback loop.
+     * Use the preview server on CI for more realistic testing.
+     */
+    command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
     port: 5173,
     reuseExistingServer: !process.env.CI
   }

template/config/playwright/playwright.config.ts

@@ -98,7 +98,12 @@ const config: PlaywrightTestConfig = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'npm run dev',
+    /**
+     * Use the dev server by default for faster feedback loop.
+     * Use the preview server on CI for more realistic testing.
+    Playwright will re-use the local server if there is already a dev-server running.
+     */
+    command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
     port: 5173,
     reuseExistingServer: !process.env.CI
   }

utils/generateReadme.ts

@@ -25,7 +25,8 @@ export default function generateReadme({
   needsVitest,
   needsEslint
 }) {
-  const commandFor = (scriptName) => getCommand(packageManager, scriptName)
+  const commandFor = (scriptName: string, args?: string) =>
+    getCommand(packageManager, scriptName, args)
 
   let readme = `# ${projectName}
 
@@ -99,14 +100,17 @@ ${commandFor('test:e2e')} # or \`${commandFor('test:e2e:ci')}\` for headless tes
 # Install browsers for the first run
 npx playwright install
 
+# When testing on CI, must build the project first
+${commandFor('build')}
+
 # Runs the end-to-end tests
 ${commandFor('test:e2e')}
 # Runs the tests only on Chromium
-${commandFor('test:e2e -- --project=chromium')}
+${commandFor('test:e2e', '--project=chromium')}
 # Runs the tests of a specific file
-${commandFor('test:e2e -- tests/example.spec.ts')}
+${commandFor('test:e2e', 'tests/example.spec.ts')}
 # Runs the tests in debug mode
-${commandFor('test:e2e -- --debug')}
+${commandFor('test:e2e', '--debug')}
 \`\`\`
 `
   }

utils/getCommand.ts

@@ -1,7 +1,13 @@
-export default function getCommand(packageManager, scriptName) {
+export default function getCommand(packageManager: string, scriptName: string, args?: string) {
   if (scriptName === 'install') {
     return packageManager === 'yarn' ? 'yarn' : `${packageManager} install`
   }
 
-  return packageManager === 'npm' ? `npm run ${scriptName}` : `${packageManager} ${scriptName}`
+  if (args) {
+    return packageManager === 'npm'
+      ? `npm run ${scriptName} -- ${args}`
+      : `${packageManager} ${scriptName} ${args}`
+  } else {
+    return packageManager === 'npm' ? `npm run ${scriptName}` : `${packageManager} ${scriptName}`
+  }
 }