Add Playwright E2E tests replacing Cypress with MSW integration

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

tests/e2e/specs/filesCompare.spec.ts

@@ -0,0 +1,63 @@
+// The Lucia project.
+// Copyright 2026-2026 DSP, inc.  All rights reserved.
+// Authors:
+//   imacat.yang@dsp.im (imacat), 2026/03/22
+
+import { test, expect } from "@playwright/test";
+import { loginWithMSW } from "../helpers";
+
+test.describe("Files Page - COMPARE Tab", () => {
+  test.beforeEach(async ({ page, context }) => {
+    await loginWithMSW(context);
+    await page.goto("/files");
+    await expect(page.getByText("sample-process.xes").first()).toBeVisible();
+    // Switch to COMPARE tab
+    await page.locator("li", { hasText: "COMPARE" }).click();
+  });
+
+  test("shows Performance Comparison heading", async ({ page }) => {
+    await expect(
+      page.locator("h2", { hasText: "Performance Comparison" }),
+    ).toBeVisible();
+  });
+
+  test("shows two drag-and-drop slots", async ({ page }) => {
+    await expect(page.locator("#primaryDragCard")).toBeVisible();
+    await expect(page.locator("#secondaryDragCard")).toBeVisible();
+  });
+
+  test("drag slots show placeholder text", async ({ page }) => {
+    await expect(
+      page.locator("#primaryDragCard"),
+    ).toContainText("Drag and drop a file here");
+    await expect(
+      page.locator("#secondaryDragCard"),
+    ).toContainText("Drag and drop a file here");
+  });
+
+  test("Compare button is disabled when no files are dragged", async ({
+    page,
+  }) => {
+    await expect(
+      page.getByRole("button", { name: "Compare" }),
+    ).toBeDisabled();
+  });
+
+  test("shows sorting dropdown", async ({ page }) => {
+    await expect(page.locator(".p-select")).toBeVisible();
+  });
+
+  test("grid cards display file names", async ({ page }) => {
+    await expect(page.locator("#compareGridCards")).toBeVisible();
+    const items = page.locator("#compareGridCards li");
+    await expect(items).not.toHaveCount(0);
+  });
+
+  test("clicking sorting dropdown shows sort options", async ({ page }) => {
+    await page.locator(".p-select").click();
+    await expect(page.locator(".p-select-list")).toBeVisible();
+    await expect(
+      page.locator(".p-select-option", { hasText: "By File Name" }).first(),
+    ).toBeVisible();
+  });
+});