test(adminfront): eliminate CI flakiness in audit and tenant e2e tests

adminfront/tests/audit.spec.ts

@@ -44,33 +44,31 @@ test.describe("Audit Logs Management", () => {
       await route.fulfill({ json: { issuer: "http://localhost:5000/oidc" } });
     });
 
-    await page.route(/.*\/api\/v1\/.*/, async (route) => {
+    await page.route(/\/v1\/audit/, async (route) => {
       const url = route.request().url();
-      if (url.includes("/user/me")) {
+      const urlObj = new URL(url);
-        return route.fulfill({
+      const cursor = urlObj.searchParams.get("cursor");
-          json: {
+      const offset = cursor ? 20 : 0;
-            id: "admin-user",
+      return route.fulfill({
-            name: "Admin",
+        json: {
-            role: "super_admin",
+          items: generateMockLogs(20, offset),
-            manageableTenants: [],
+          next_cursor: offset === 0 ? "fake-cursor" : null,
-          },
+          total: 40,
-          headers: { "Access-Control-Allow-Origin": "*" },
+        },
-        });
+        headers: { "Access-Control-Allow-Origin": "*" },
-      }
+      });
-      if (url.includes("/v1/audit")) {
+    });
-        const urlObj = new URL(url);
+
-        const cursor = urlObj.searchParams.get("cursor");
+    await page.route(/\/user\/me/, async (route) => {
-        const offset = cursor ? 20 : 0;
+      return route.fulfill({
-        return route.fulfill({
+        json: {
-          json: {
+          id: "admin-user",
-            items: generateMockLogs(20, offset),
+          name: "Admin",
-            next_cursor: offset === 0 ? "fake-cursor" : null,
+          role: "super_admin",
-            total: 40,
+          manageableTenants: [],
-          },
+        },
-          headers: { "Access-Control-Allow-Origin": "*" },
+        headers: { "Access-Control-Allow-Origin": "*" },
-        });
+      });
-      }
-      return route.continue();
     });
   });
 
@@ -102,55 +100,59 @@ test.describe("Audit Logs Management", () => {
       timeout: 20000,
     });
 
+    // Wait for the table to have at least one row, ensuring data is loaded
+    const firstRow = page.locator("tbody tr").first();
+    await expect(firstRow).toBeVisible({ timeout: 15000 });
+
     // Check if table rows are rendered
-    await expect(page.locator("tbody tr")).toHaveCount(20, { timeout: 15000 });
+    await expect(page.locator("tbody tr")).toHaveCount(20);
 
     // Check specific data visible in the row
-    await expect(page.locator("tbody")).toContainText("user-even", {
+    await expect(page.locator("tbody")).toContainText("user-even");
-      timeout: 10000,
+    await expect(page.locator("tbody")).toContainText("CREATE_TENANT");
-    });
-    await expect(page.locator("tbody")).toContainText("CREATE_TENANT", {
-      timeout: 10000,
-    });
   });
 
   test("should load more logs on scroll (infinite scroll)", async ({
     page,
   }) => {
     await page.goto("/audit-logs");
-    await expect(page.locator("tbody tr")).toHaveCount(20, { timeout: 15000 });
+    await expect(page.locator("tbody tr").first()).toBeVisible({
+      timeout: 15000,
+    });
+    await expect(page.locator("tbody tr")).toHaveCount(20);
 
     const loadMoreBtn = page.getByRole("button", {
       name: /더 보기|Load more/i,
     });
     await expect(loadMoreBtn).toBeVisible({ timeout: 10000 });
+
+    // Explicitly wait for the button to be enabled
+    await expect(loadMoreBtn).toBeEnabled();
     await loadMoreBtn.click();
 
-    // Wait for the next page to load
+    // Wait for the next page to load (should reach 40)
     await expect(page.locator("tbody tr")).toHaveCount(40, { timeout: 15000 });
-    // user-even and CREATE_TENANT should still be visible in the newly loaded rows
+    await expect(page.locator("tbody")).toContainText("user-even");
-    await expect(page.locator("tbody")).toContainText("user-even", {
-      timeout: 10000,
-    });
   });
 
   test("should filter logs by Action and User ID locally", async ({ page }) => {
     await page.goto("/audit-logs");
-    await expect(page.locator("tbody tr")).toHaveCount(20, { timeout: 15000 });
+    await expect(page.locator("tbody tr").first()).toBeVisible({
+      timeout: 15000,
+    });
+    await expect(page.locator("tbody tr")).toHaveCount(20);
 
-    // The filtering in AuditLogsPage is done locally using useDeferredValue
     // Search by User ID
     const userIdInput = page.getByTestId("audit-search-user-id");
     await userIdInput.fill("user-even");
 
     // Playwright expect will retry, so it will wait for deferred value
     await expect(page.locator("tbody tr")).toHaveCount(10, { timeout: 15000 });
-    await expect(page.locator("tbody")).not.toContainText("user-odd", {
+    await expect(page.locator("tbody")).not.toContainText("user-odd");
-      timeout: 10000,
-    });
 
     // Clear User ID
     await userIdInput.clear();
+    await userIdInput.press("Enter"); // Trigger potential refetch or blur
     await expect(page.locator("tbody tr")).toHaveCount(20, { timeout: 15000 });
 
     // Search by Action
@@ -159,26 +161,25 @@ test.describe("Audit Logs Management", () => {
 
     // Check that we only see ROTATE_SECRET (20 - 7 = 13)
     await expect(page.locator("tbody tr")).toHaveCount(13, { timeout: 15000 });
-    await expect(page.locator("tbody")).not.toContainText("CREATE_TENANT", {
+    await expect(page.locator("tbody")).not.toContainText("CREATE_TENANT");
-      timeout: 10000,
-    });
   });
 
   test("should filter logs by Status locally", async ({ page }) => {
     await page.goto("/audit-logs");
-    await expect(page.locator("tbody tr")).toHaveCount(20, { timeout: 15000 });
+    await expect(page.locator("tbody tr").first()).toBeVisible({
+      timeout: 15000,
+    });
+    await expect(page.locator("tbody tr")).toHaveCount(20);
 
     // Select "Failure" status
     await page.getByTestId("audit-filter-status").selectOption("failure");
 
-    // ID % 5 === 0 are status "failure"
+    // ID % 5 === 0 are status "failure" (0, 5, 10, 15)
-    // IDs: 0, 5, 10, 15 => 4 items
     await expect(page.locator("tbody tr")).toHaveCount(4, { timeout: 15000 });
 
     // Select "Success" status
     await page.getByTestId("audit-filter-status").selectOption("success");
 
-    // IDs: 1,2,3,4, 6,7,8,9, 11,12,13,14, 16,17,18,19 => 16 items
     await expect(page.locator("tbody tr")).toHaveCount(16, { timeout: 15000 });
   });
 });

adminfront/tests/tenants.spec.ts

@@ -649,11 +649,17 @@ test.describe("Tenants Management", () => {
     const openDataManagementMenu = async () => {
       const btn = page.getByTestId("tenant-data-mgmt-btn");
       const exportMenuItem = page.getByTestId("tenant-export-menu-item");
-      const isExpanded = await btn.getAttribute("aria-expanded");
+
-      if (isExpanded !== "true") {
+      // Attempt to open the menu with a retry loop using toPass
-        await btn.click({ force: true });
+      await expect(async () => {
-      }
+        if (!(await exportMenuItem.isVisible())) {
-      await expect(exportMenuItem).toBeVisible({ timeout: 10000 });
+          await btn.click({ force: true });
+        }
+        await expect(exportMenuItem).toBeVisible({ timeout: 2000 });
+      }).toPass({
+        intervals: [1000, 2000],
+        timeout: 10000,
+      });
     };
 
     await page.route("**/api/v1/admin/tenants**", async (route) => {
@@ -721,9 +727,21 @@ test.describe("Tenants Management", () => {
     await expect(page.getByTestId("tenant-template-menu-item")).toBeVisible();
     await expect(page.getByTestId("tenant-import-menu-item")).toBeVisible();
 
-    const download = page.waitForEvent("download");
+    const safeDownload = async (testId: string) => {
-    await page.getByTestId("tenant-export-menu-item").click({ force: true });
+      const item = page.getByTestId(testId);
-    const exportDownload = await download;
+      await item.waitFor({ state: "attached" });
+
+      let downloadObj;
+      await expect(async () => {
+        const downloadPromise = page.waitForEvent("download", { timeout: 10000 });
+        // Use dispatchEvent for more reliable trigger in webkit
+        await item.dispatchEvent("click");
+        downloadObj = await downloadPromise;
+      }).toPass({ timeout: 30000, intervals: [3000] });
+      return downloadObj;
+    };
+
+    const exportDownload = await safeDownload("tenant-export-menu-item");
     expect(exportRequested).toBe(true);
     expect(exportDownload.suggestedFilename()).toBe("tenants.csv");
     expect(exportUrl).toContain("includeIds=false");
@@ -732,17 +750,13 @@ test.describe("Tenants Management", () => {
     await expect(
       page.getByTestId("tenant-export-with-ids-menu-item"),
     ).toBeVisible();
-    const exportWithIdsDownload = page.waitForEvent("download");
+    const exportWithIdsDownload = await safeDownload(
-    await page
+      "tenant-export-with-ids-menu-item",
-      .getByTestId("tenant-export-with-ids-menu-item")
+    );
-      .click({ force: true });
-    await exportWithIdsDownload;
     expect(exportUrl).toContain("includeIds=true");
 
     await openDataManagementMenu();
-    const templateDownload = page.waitForEvent("download");
+    const template = await safeDownload("tenant-template-menu-item");
-    await page.getByTestId("tenant-template-menu-item").click({ force: true });
-    const template = await templateDownload;
     expect(template.suggestedFilename()).toBe("tenant-import-template.csv");
 
     // Upload directly via setInputFiles (Playwright supports hidden inputs)