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

Co-authored-by: Max Schmitt <max@schmitt.mx>

diff --git a/template/base/package.json b/template/base/package.json
index e89a1dad8ff567176becfca1c1d373768ca61212..abc37add6035ae4935f810f43c8ca66bc76cae78 100644 (file)
--- a/template/base/package.json
+++ b/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"

diff --git a/template/config/playwright/playwright.config.js b/template/config/playwright/playwright.config.js
index 0fadfcd1206a372fba36a502a5296b080c35e6bb..1c1ea7cc0f1cf4811eea6dfa42607b1db2ef5b10 100644 (file)
--- a/template/config/playwright/playwright.config.js
+++ b/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
   }

diff --git a/template/config/playwright/playwright.config.ts b/template/config/playwright/playwright.config.ts
index 5bb8d795011a066da2af79cd7c7de30a90a127a7..333a4dc02101abbfbec02028676635ffade2206d 100644 (file)
--- a/template/config/playwright/playwright.config.ts
+++ b/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
   }

diff --git a/utils/generateReadme.ts b/utils/generateReadme.ts
index 9f5d997a0403b442a29930cde35ecf2d72b70b0f..bbebc131a213607698337024be247219dad85905 100644 (file)
--- a/utils/generateReadme.ts
+++ b/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')}
 \`\`\`
 `
   }

diff --git a/utils/getCommand.ts b/utils/getCommand.ts
index 96d4976f7da3bfc7b2c3f5b2cb27df5390efd703..ea3a4e1987dba7b70f9dc17e4f8163c503a5d0cb 100644 (file)
--- a/utils/getCommand.ts
+++ b/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}`
+  }
 }