Visual Testing導入: Playwright E2Eテスト追加

.github/workflows/test.yaml

@@ -35,3 +35,13 @@ jobs:
       - name: "Report coverage"
         if: always()
         uses: davelosert/vitest-coverage-report-action@v2
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run Playwright tests
+        run: pnpm test:e2e
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -33,3 +33,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -7,7 +7,12 @@
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start",
-    "test": "vitest"
+    "test": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:update": "playwright test --update-snapshots",
+    "test:e2e:report": "playwright show-report"
   },
   "dependencies": {
     "diff": "5.1.0",
@@ -18,6 +23,7 @@
     "tailwindcss": "3.3.3"
   },
   "devDependencies": {
+    "@playwright/test": "1.53.1",
     "@types/diff": "5.2.3",
     "@types/node": "20.17.12",
     "@types/react": "18.3.18",

playwright.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [['html', { open: 'never' }]],
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    }
+  ],
+
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});

src/app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useSearchParams } from "next/navigation";
-import { Fragment, useState } from "react";
+import { Fragment, useState, useEffect } from "react";
 import { diffLines } from "diff";
 import lz from "lz-string";
 import { createShareUrl } from "@/create-share-url";
@@ -26,14 +26,19 @@ export default function Home() {
   const [text2, setText2] = useState<string>(textB);
   const [diffs, setDiffs] = useState<DiffResult[]>(diffLines(textA, textB));
   const [copyButtonText, setCopyButtonText] = useState<string>("Copy");
+  const [currentURL, setCurrentURL] = useState<string>("");
+
+  useEffect(() => {
+    setCurrentURL(window.location.href);
+  }, []);
 
   const calculateDiff = (a: string, b: string) => {
     setDiffs(diffLines(a, b));
   };
 
   const copyUrl = () => {
     navigator.clipboard.writeText(
-      createShareUrl(window.location.href, text1, text2)
+      createShareUrl(currentURL, text1, text2)
     );
   };
 
@@ -105,7 +110,8 @@ export default function Home() {
         <input
           type="text"
           className="bg-gray-100 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-100 focus:border-blue-100 block w-full p-2.5"
-          value={createShareUrl(window.location.href, text1, text2)}
+          value={createShareUrl(currentURL, text1, text2)}
+          readOnly
         />
         <button
           type="button"

src/create-share-url.ts

@@ -1,10 +1,18 @@
 import lz from "lz-string";
 
 export function createShareUrl(baseUrl: string, textA: string, textB: string) {
-  const url = new URL(baseUrl);
-  url.searchParams.set(
-    "data",
-    lz.compressToEncodedURIComponent(JSON.stringify({ textA, textB }))
-  );
-  return url.toString();
+  if (!baseUrl) {
+    return "";
+  }
+
+  try {
+    const url = new URL(baseUrl);
+    url.searchParams.set(
+      "data",
+      lz.compressToEncodedURIComponent(JSON.stringify({ textA, textB }))
+    );
+    return url.toString();
+  } catch {
+    return "";
+  }
 }