test: add E2E testing to main site

apps/main/.gitignore

@@ -1,2 +1,5 @@
 static/skills.svg
 static/resume.pdf
+
+# testing
+/test-results

apps/main/e2e/title.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from "@playwright/test"
+
+const prefix = "developomp | "
+
+test("should have proper title", async ({ page }) => {
+    await page.goto("/")
+    expect(await page.title()).toEqual("developomp")
+
+    await page.goto("/404")
+    await page.waitForTimeout(1000)
+    expect(await page.title()).toEqual(`${prefix}Page Not Found`)
+})

apps/main/package.json

@@ -6,7 +6,9 @@
     "scripts": {
         "cp": "cp ../../packages/content/dist/skills.svg ../../packages/content/dist/resume.pdf static",
         "dev": "vite dev",
+        "dev:headless": "vite dev --open false",
         "build": "pnpm cp && vite build",
+        "test:e2e": "playwright test",
         "clean": "rm -rf .turbo .svelte-kit build node_modules vite.config.ts.timestamp-*",
         "lint": "eslint ."
     },
@@ -17,6 +19,7 @@
         "@developomp-site/tailwind-config": "workspace:*",
         "@fontsource/noto-sans-kr": "^5.0.5",
         "@inqling/svelte-icons": "^3.3.2",
+        "@playwright/test": "^1.36.2",
         "@sveltejs/adapter-static": "^2.0.2",
         "@sveltejs/kit": "^1.22.1",
         "@typescript-eslint/eslint-plugin": "^5.61.0",

apps/main/playwright.config.ts

@@ -0,0 +1,63 @@
+import { devices, PlaywrightTestConfig } from "@playwright/test"
+
+const baseURL = "http://localhost: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 dev:headless",
+        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

pnpm-lock.yaml

@@ -155,6 +155,9 @@ importers:
       '@inqling/svelte-icons':
         specifier: ^3.3.2
         version: 3.3.2(svelte@4.0.5)
+      '@playwright/test':
+        specifier: ^1.36.2
+        version: 1.36.2
       '@sveltejs/adapter-static':
         specifier: ^2.0.2
         version: 2.0.2(@sveltejs/kit@1.22.1)