From 5b98f9b2cc65d1da6a879ef47f89be58e27ecbac Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 19 Oct 2022 20:33:52 +0800 Subject: [PATCH 1/8] refactor!: use preview server for playwright testing --- template/config/playwright/playwright.config.js | 6 +++--- template/config/playwright/playwright.config.ts | 6 +++--- utils/generateReadme.ts | 3 +++ 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/template/config/playwright/playwright.config.js b/template/config/playwright/playwright.config.js index 0fadfcd12..e52e5464e 100644 --- a/template/config/playwright/playwright.config.js +++ b/template/config/playwright/playwright.config.js @@ -35,7 +35,7 @@ const config = { /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ actionTimeout: 0, /* Base URL to use in actions like `await page.goto('/')`. */ - baseURL: 'http://localhost:5173', + baseURL: 'http://localhost:4173', /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', @@ -99,8 +99,8 @@ const config = { /* Run your local dev server before starting the tests */ webServer: { - command: 'npm run dev', - port: 5173, + command: 'npm run preview', + port: 4173, reuseExistingServer: !process.env.CI } } diff --git a/template/config/playwright/playwright.config.ts b/template/config/playwright/playwright.config.ts index 5bb8d7950..84ea9ea98 100644 --- a/template/config/playwright/playwright.config.ts +++ b/template/config/playwright/playwright.config.ts @@ -34,7 +34,7 @@ const config: PlaywrightTestConfig = { /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ actionTimeout: 0, /* Base URL to use in actions like `await page.goto('/')`. */ - baseURL: 'http://localhost:5173', + baseURL: 'http://localhost:4173', /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', @@ -98,8 +98,8 @@ const config: PlaywrightTestConfig = { /* Run your local dev server before starting the tests */ webServer: { - command: 'npm run dev', - port: 5173, + command: 'npm run preview', + port: 4173, reuseExistingServer: !process.env.CI } } diff --git a/utils/generateReadme.ts b/utils/generateReadme.ts index 9f5d997a0..bc4ae7605 100644 --- a/utils/generateReadme.ts +++ b/utils/generateReadme.ts @@ -99,6 +99,9 @@ ${commandFor('test:e2e')} # or \`${commandFor('test:e2e:ci')}\` for headless tes # Install browsers for the first run npx playwright install +# Must build the project before end-to-end testing +${commandFor('build')} + # Runs the end-to-end tests ${commandFor('test:e2e')} # Runs the tests only on Chromium From 55f434ba8dcc63d027d69e693919c35fc08ed4cd Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 20 Oct 2022 17:12:47 +0800 Subject: [PATCH 2/8] feat!: use dev server by default and preview server on CI --- template/config/playwright/playwright.config.js | 10 +++++++--- template/config/playwright/playwright.config.ts | 10 +++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/template/config/playwright/playwright.config.js b/template/config/playwright/playwright.config.js index e52e5464e..1494d1171 100644 --- a/template/config/playwright/playwright.config.js +++ b/template/config/playwright/playwright.config.js @@ -35,7 +35,7 @@ const config = { /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ actionTimeout: 0, /* Base URL to use in actions like `await page.goto('/')`. */ - baseURL: 'http://localhost:4173', + baseURL: 'http://localhost:5173', /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', @@ -99,8 +99,12 @@ const config = { /* Run your local dev server before starting the tests */ webServer: { - command: 'npm run preview', - port: 4173, + /** + * Use the dev server by default for faster feedback loop. + * Use the preview server on CI for more realistic testing. + */ + command: process.env.CI ? 'npm run preview --port 5173' : 'npm run dev', + port: 5173, reuseExistingServer: !process.env.CI } } diff --git a/template/config/playwright/playwright.config.ts b/template/config/playwright/playwright.config.ts index 84ea9ea98..5cef696f7 100644 --- a/template/config/playwright/playwright.config.ts +++ b/template/config/playwright/playwright.config.ts @@ -34,7 +34,7 @@ const config: PlaywrightTestConfig = { /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ actionTimeout: 0, /* Base URL to use in actions like `await page.goto('/')`. */ - baseURL: 'http://localhost:4173', + baseURL: 'http://localhost:5173', /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', @@ -98,8 +98,12 @@ const config: PlaywrightTestConfig = { /* Run your local dev server before starting the tests */ webServer: { - command: 'npm run preview', - port: 4173, + /** + * Use the dev server by default for faster feedback loop. + * Use the preview server on CI for more realistic testing. + */ + command: process.env.CI ? 'npm run preview --port 5173' : 'npm run dev', + port: 5173, reuseExistingServer: !process.env.CI } } From e8d86d60efeb2d7de3e8383ea898f9b456dfb82e Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 20 Oct 2022 18:49:56 +0800 Subject: [PATCH 3/8] fix: remove the explicit `--port` argument I think it is not very useful unless we use `--strictPort` here, and keeping it makes it harder for us to customize the port number on command line. --- template/base/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/template/base/package.json b/template/base/package.json index e89a1dad8..abc37add6 100644 --- 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" From 4c399f6f817063bea7ef4c333c28d33847894be9 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 20 Oct 2022 18:51:27 +0800 Subject: [PATCH 4/8] docs: update the documentation to note that only CI environment needs build --- utils/generateReadme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/generateReadme.ts b/utils/generateReadme.ts index bc4ae7605..5b9eb0e71 100644 --- a/utils/generateReadme.ts +++ b/utils/generateReadme.ts @@ -99,7 +99,7 @@ ${commandFor('test:e2e')} # or \`${commandFor('test:e2e:ci')}\` for headless tes # Install browsers for the first run npx playwright install -# Must build the project before end-to-end testing +# When testing on CI, must build the project first ${commandFor('build')} # Runs the end-to-end tests From 41b78cf8a7057bfc5e1d6e6270cdadf6271db64f Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 20 Oct 2022 18:52:53 +0800 Subject: [PATCH 5/8] fix: correctly pass additional arguments to `npm run` --- template/config/playwright/playwright.config.js | 2 +- template/config/playwright/playwright.config.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/template/config/playwright/playwright.config.js b/template/config/playwright/playwright.config.js index 1494d1171..b373d27e9 100644 --- a/template/config/playwright/playwright.config.js +++ b/template/config/playwright/playwright.config.js @@ -103,7 +103,7 @@ const config = { * Use the dev server by default for faster feedback loop. * Use the preview server on CI for more realistic testing. */ - command: process.env.CI ? 'npm run preview --port 5173' : 'npm run dev', + command: process.env.CI ? 'npm run preview -- --port 5173' : 'npm run dev', port: 5173, reuseExistingServer: !process.env.CI } diff --git a/template/config/playwright/playwright.config.ts b/template/config/playwright/playwright.config.ts index 5cef696f7..8c6608256 100644 --- a/template/config/playwright/playwright.config.ts +++ b/template/config/playwright/playwright.config.ts @@ -102,7 +102,7 @@ const config: PlaywrightTestConfig = { * Use the dev server by default for faster feedback loop. * Use the preview server on CI for more realistic testing. */ - command: process.env.CI ? 'npm run preview --port 5173' : 'npm run dev', + command: process.env.CI ? 'npm run preview -- --port 5173' : 'npm run dev', port: 5173, reuseExistingServer: !process.env.CI } From 4f423c4267948de9c13ef3642a2bb3572083c96c Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 20 Oct 2022 23:44:14 +0800 Subject: [PATCH 6/8] refactor: use the `vite` command directly to simplify argument passing As `npm` and `npx` add `./node_modules/.bin` to `$PATH`, the `vite` command should be available when playwright is running. (Not sure if this works on Windows, let's wait and see the CI results.) --- template/config/playwright/playwright.config.js | 2 +- template/config/playwright/playwright.config.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/template/config/playwright/playwright.config.js b/template/config/playwright/playwright.config.js index b373d27e9..1c1ea7cc0 100644 --- a/template/config/playwright/playwright.config.js +++ b/template/config/playwright/playwright.config.js @@ -103,7 +103,7 @@ const config = { * Use the dev server by default for faster feedback loop. * Use the preview server on CI for more realistic testing. */ - command: process.env.CI ? 'npm run preview -- --port 5173' : 'npm run dev', + 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 8c6608256..44f343ed5 100644 --- a/template/config/playwright/playwright.config.ts +++ b/template/config/playwright/playwright.config.ts @@ -102,7 +102,7 @@ const config: PlaywrightTestConfig = { * Use the dev server by default for faster feedback loop. * Use the preview server on CI for more realistic testing. */ - command: process.env.CI ? 'npm run preview -- --port 5173' : 'npm run dev', + command: process.env.CI ? 'vite preview --port 5173' : 'vite dev', port: 5173, reuseExistingServer: !process.env.CI } From c3e7e1f762995344978ffa714c01b8b7f63a1ef7 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Fri, 21 Oct 2022 00:18:52 +0800 Subject: [PATCH 7/8] fix: correctly passing additional arguments to yarn/pnpm --- utils/generateReadme.ts | 9 +++++---- utils/getCommand.ts | 10 ++++++++-- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/utils/generateReadme.ts b/utils/generateReadme.ts index 5b9eb0e71..bbebc131a 100644 --- 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} @@ -105,11 +106,11 @@ ${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 96d4976f7..ea3a4e198 100644 --- 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}` + } } From 3bf4f5ea3dcf1ab6cc4d4206fc05e186f1203c61 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Fri, 21 Oct 2022 13:59:26 +0800 Subject: [PATCH 8/8] chore: add comments about reusing dev server Co-authored-by: Max Schmitt --- template/config/playwright/playwright.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/template/config/playwright/playwright.config.ts b/template/config/playwright/playwright.config.ts index 44f343ed5..333a4dc02 100644 --- a/template/config/playwright/playwright.config.ts +++ b/template/config/playwright/playwright.config.ts @@ -101,6 +101,7 @@ const config: PlaywrightTestConfig = { /** * 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,