From 31f40764da370a1e6351e53e4895da7407de2697 Mon Sep 17 00:00:00 2001
From: Romit <85230081+romitg2@users.noreply.github.com>
Date: Sat, 28 Mar 2026 20:07:55 +0530
Subject: [PATCH] fix: stabilize flaky E2E booking sheet tests by waiting for
 button visibility (#28631)

Both booking-sheet-keyboard.e2e.ts and bookings-list.e2e.ts intermittently
timeout in CI when clicking the booking item button before the DOM has
finished rendering. Adding explicit waitFor({ state: 'visible' }) on the
role=button element after the parent booking item is visible ensures the
click target is fully ready.

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 apps/web/playwright/booking-sheet-keyboard.e2e.ts | 4 +++-
 apps/web/playwright/bookings-list.e2e.ts          | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/web/playwright/booking-sheet-keyboard.e2e.ts b/apps/web/playwright/booking-sheet-keyboard.e2e.ts
index 91a849903a..617efdbfce 100644
--- a/apps/web/playwright/booking-sheet-keyboard.e2e.ts
+++ b/apps/web/playwright/booking-sheet-keyboard.e2e.ts
@@ -100,7 +100,9 @@ async function setupBookingsAndOpenSheet({
 
   const firstBookingItem = page.locator(`[data-booking-uid="${fixtures[0].uid}"]`);
   await expect(firstBookingItem).toBeVisible();
-  await firstBookingItem.locator('[role="button"]').first().click();
+  const firstButton = firstBookingItem.locator('[role="button"]').first();
+  await firstButton.waitFor({ state: "visible" });
+  await firstButton.click();
 
   const sheet = page.locator('[role="dialog"]');
   await expect(sheet).toBeVisible();
diff --git a/apps/web/playwright/bookings-list.e2e.ts b/apps/web/playwright/bookings-list.e2e.ts
index 41a3c1f203..30251fdf7b 100644
--- a/apps/web/playwright/bookings-list.e2e.ts
+++ b/apps/web/playwright/bookings-list.e2e.ts
@@ -798,8 +798,9 @@ test.describe("Bookings", () => {
 
       const bookingItem = page.locator(`[data-booking-uid="${bookingFixture.uid}"]`);
       await expect(bookingItem).toBeVisible();
-
-      await bookingItem.locator('[role="button"]').first().click();
+      const bookingButton = bookingItem.locator('[role="button"]').first();
+      await bookingButton.waitFor({ state: "visible" });
+      await bookingButton.click();
 
       await expect(page).toHaveURL(new RegExp(`[?&]uid=${bookingFixture.uid}(&|$)`));
     } finally {