refactor: create sharable playwright config

apps/blog/package.json

@@ -13,6 +13,7 @@
     "devDependencies": {
         "@developomp-site/content": "workspace:*",
         "@developomp-site/eslint-config": "workspace:*",
+        "@developomp-site/playwright-config": "workspace:*",
         "@developomp-site/prettier-config": "workspace:*",
         "@developomp-site/tailwind-config": "workspace:*",
         "@fontsource/noto-sans-kr": "^5.0.5",

apps/blog/playwright.config.ts

@@ -1,63 +1,5 @@
-import { devices, PlaywrightTestConfig } from "@playwright/test"
+import { createConfig } from "@developomp-site/playwright-config"
 
-const baseURL = "http://localhost:3000"
+export default createConfig({
-
+    port: 3000,
-// Reference: https://playwright.dev/docs/test-configuration
+})
-const config: PlaywrightTestConfig = {
-    // Timeout per test
-    timeout: 30 * 1000,
-
-    // Test directory
-    testDir: "e2e",
-
-    // Artifacts folder where screenshots, videos, and traces are stored.
-    outputDir: "test-results/",
-
-    // Run your local dev server before starting the tests:
-    // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
-    webServer: {
-        command: "pnpm serve",
-        url: baseURL,
-        timeout: 120 * 1000,
-        // eslint-disable-next-line turbo/no-undeclared-env-vars
-        reuseExistingServer: !process.env.CI,
-    },
-
-    use: {
-        // Use baseURL so to make navigations relative.
-        // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
-        baseURL,
-
-        // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
-        // More information: https://playwright.dev/docs/trace-viewer
-        trace: "retry-with-trace",
-
-        // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
-        // contextOptions: {
-        //   ignoreHTTPSErrors: true,
-        // },
-    },
-
-    projects: [
-        {
-            name: "Desktop Chrome",
-            use: {
-                ...devices["Desktop Chrome"],
-            },
-        },
-        {
-            name: "Desktop Firefox",
-            use: {
-                ...devices["Desktop Firefox"],
-            },
-        },
-        {
-            name: "Mobile Chrome",
-            use: {
-                ...devices["Pixel 5"],
-            },
-        },
-    ],
-}
-
-export default config

apps/main/package.json

@@ -15,6 +15,7 @@
     "devDependencies": {
         "@developomp-site/content": "workspace:*",
         "@developomp-site/eslint-config": "workspace:*",
+        "@developomp-site/playwright-config": "workspace:*",
         "@developomp-site/prettier-config": "workspace:*",
         "@developomp-site/tailwind-config": "workspace:*",
         "@fontsource/noto-sans-kr": "^5.0.5",

apps/main/playwright.config.ts

@@ -1,63 +1,5 @@
-import { devices, PlaywrightTestConfig } from "@playwright/test"
+import { createConfig } from "@developomp-site/playwright-config"
 
-const baseURL = "http://localhost:5173"
+export default createConfig({
-
+    port: 5173,
-// Reference: https://playwright.dev/docs/test-configuration
+})
-const config: PlaywrightTestConfig = {
-    // Timeout per test
-    timeout: 30 * 1000,
-
-    // Test directory
-    testDir: "e2e",
-
-    // Artifacts folder where screenshots, videos, and traces are stored.
-    outputDir: "test-results/",
-
-    // Run your local dev server before starting the tests:
-    // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
-    webServer: {
-        command: "pnpm serve",
-        url: baseURL,
-        timeout: 120 * 1000,
-        // eslint-disable-next-line turbo/no-undeclared-env-vars
-        reuseExistingServer: !process.env.CI,
-    },
-
-    use: {
-        // Use baseURL so to make navigations relative.
-        // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
-        baseURL,
-
-        // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
-        // More information: https://playwright.dev/docs/trace-viewer
-        trace: "retry-with-trace",
-
-        // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
-        // contextOptions: {
-        //   ignoreHTTPSErrors: true,
-        // },
-    },
-
-    projects: [
-        {
-            name: "Desktop Chrome",
-            use: {
-                ...devices["Desktop Chrome"],
-            },
-        },
-        {
-            name: "Desktop Firefox",
-            use: {
-                ...devices["Desktop Firefox"],
-            },
-        },
-        {
-            name: "Mobile Chrome",
-            use: {
-                ...devices["Pixel 5"],
-            },
-        },
-    ],
-}
-
-export default config

apps/portfolio/package.json

@@ -14,6 +14,7 @@
         "@developomp-site/blog": "workspace:*",
         "@developomp-site/content": "workspace:*",
         "@developomp-site/eslint-config": "workspace:*",
+        "@developomp-site/playwright-config": "workspace:*",
         "@developomp-site/prettier-config": "workspace:*",
         "@developomp-site/tailwind-config": "workspace:*",
         "@fontsource/noto-sans-kr": "^5.0.5",

apps/portfolio/playwright.config.ts

@@ -1,63 +1,5 @@
-import { devices, PlaywrightTestConfig } from "@playwright/test"
+import { createConfig } from "@developomp-site/playwright-config"
 
-const baseURL = "http://localhost:5174"
+export default createConfig({
-
+    port: 5174,
-// Reference: https://playwright.dev/docs/test-configuration
+})
-const config: PlaywrightTestConfig = {
-    // Timeout per test
-    timeout: 30 * 1000,
-
-    // Test directory
-    testDir: "e2e",
-
-    // Artifacts folder where screenshots, videos, and traces are stored.
-    outputDir: "test-results/",
-
-    // Run your local dev server before starting the tests:
-    // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
-    webServer: {
-        command: "pnpm serve",
-        url: baseURL,
-        timeout: 120 * 1000,
-        // eslint-disable-next-line turbo/no-undeclared-env-vars
-        reuseExistingServer: !process.env.CI,
-    },
-
-    use: {
-        // Use baseURL so to make navigations relative.
-        // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
-        baseURL,
-
-        // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
-        // More information: https://playwright.dev/docs/trace-viewer
-        trace: "retry-with-trace",
-
-        // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
-        // contextOptions: {
-        //   ignoreHTTPSErrors: true,
-        // },
-    },
-
-    projects: [
-        {
-            name: "Desktop Chrome",
-            use: {
-                ...devices["Desktop Chrome"],
-            },
-        },
-        {
-            name: "Desktop Firefox",
-            use: {
-                ...devices["Desktop Firefox"],
-            },
-        },
-        {
-            name: "Mobile Chrome",
-            use: {
-                ...devices["Pixel 5"],
-            },
-        },
-    ],
-}
-
-export default config

packages/playwright-config/index.ts

@@ -0,0 +1,66 @@
+import { devices, type PlaywrightTestConfig } from "@playwright/test"
+
+export interface Config {
+    port: number
+}
+
+export function createConfig(config: Config): PlaywrightTestConfig {
+    const baseURL = `http://localhost:${config.port}`
+
+    return {
+        // Timeout per test
+        timeout: 30 * 1000,
+
+        // Test directory
+        testDir: "e2e",
+
+        // Artifacts folder where screenshots, videos, and traces are stored.
+        outputDir: "test-results/",
+
+        // Run your local dev server before starting the tests:
+        // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+        webServer: {
+            command: "pnpm serve",
+            url: baseURL,
+            timeout: 120 * 1000,
+            // eslint-disable-next-line turbo/no-undeclared-env-vars
+            reuseExistingServer: !process.env.CI,
+        },
+
+        use: {
+            // Use baseURL so to make navigations relative.
+            // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
+            baseURL,
+
+            // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
+            // More information: https://playwright.dev/docs/trace-viewer
+            trace: "retry-with-trace",
+
+            // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
+            // contextOptions: {
+            //   ignoreHTTPSErrors: true,
+            // },
+        },
+
+        projects: [
+            {
+                name: "Desktop Chrome",
+                use: {
+                    ...devices["Desktop Chrome"],
+                },
+            },
+            {
+                name: "Desktop Firefox",
+                use: {
+                    ...devices["Desktop Firefox"],
+                },
+            },
+            {
+                name: "Mobile Chrome",
+                use: {
+                    ...devices["Pixel 5"],
+                },
+            },
+        ],
+    }
+}

packages/playwright-config/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "@developomp-site/playwright-config",
+    "version": "0.0.0",
+    "main": "index.ts",
+    "devDependencies": {
+        "@playwright/test": "^1.36.2"
+    }
+}

pnpm-lock.yaml

@@ -35,6 +35,9 @@ importers:
       '@developomp-site/eslint-config':
         specifier: workspace:*
         version: link:../../packages/eslint-config
+      '@developomp-site/playwright-config':
+        specifier: workspace:*
+        version: link:../../packages/playwright-config
       '@developomp-site/prettier-config':
         specifier: workspace:*
         version: link:../../packages/prettier-config
@@ -143,6 +146,9 @@ importers:
       '@developomp-site/eslint-config':
         specifier: workspace:*
         version: link:../../packages/eslint-config
+      '@developomp-site/playwright-config':
+        specifier: workspace:*
+        version: link:../../packages/playwright-config
       '@developomp-site/prettier-config':
         specifier: workspace:*
         version: link:../../packages/prettier-config
@@ -230,6 +236,9 @@ importers:
       '@developomp-site/eslint-config':
         specifier: workspace:*
         version: link:../../packages/eslint-config
+      '@developomp-site/playwright-config':
+        specifier: workspace:*
+        version: link:../../packages/playwright-config
       '@developomp-site/prettier-config':
         specifier: workspace:*
         version: link:../../packages/prettier-config
@@ -492,6 +501,12 @@ importers:
         specifier: ^5.1.6
         version: 5.1.6
 
+  packages/playwright-config:
+    devDependencies:
+      '@playwright/test':
+        specifier: ^1.36.2
+        version: 1.36.2
+
   packages/prettier-config: {}
 
   packages/tailwind-config: