test: fixed flaky e2e tests (calcom#24490)

* test: fixed flaky e2e tests

* fix

Author: anikdhabal

apps/web/playwright/booking-seats.e2e.ts

@@ -541,9 +541,10 @@ test.describe("Reschedule for booking with seats", () => {
       data: bookingSeats,
     });
 
-    const references = await prisma.bookingSeat.findMany({
-      where: { bookingId: booking.id },
-      orderBy: { id: "asc" },
+    const secondAttendeeId = bookingAttendees.find((attendee)=> attendee.email === "second+seats@cal.com");
+
+    const references = await prisma.bookingSeat.findFirst({
+      where: { bookingId: booking.id, attendeeId: secondAttendeeId?.id },
     });
 
     const secondUser = await users.create({
@@ -556,13 +557,14 @@ test.describe("Reschedule for booking with seats", () => {
     await page.waitForSelector('[data-testid="bookings"]');
 
     await page.locator('[data-testid="booking-actions-dropdown"]').nth(0).click();
+    const href = await page.locator('[data-testid="reschedule"]').getAttribute("href");
+    expect(href).toBeTruthy();
+    const url = new URL(href!, page.url());
+    const seatReferenceUid = url.searchParams.get('seatReferenceUid');
+    expect(seatReferenceUid).toBeTruthy();
+    expect(seatReferenceUid).toBe(references?.referenceUid);
     await page.locator('[data-testid="reschedule"]').click();
 
-    await page.waitForURL((url) => {
-      const rescheduleUid = url.searchParams.get("rescheduleUid");
-      return !!rescheduleUid && rescheduleUid === references[1].referenceUid;
-    });
-
     await selectFirstAvailableTimeSlotNextMonth(page);
 
     const nameElement = page.locator("input[name=name]");

apps/web/playwright/fixtures/apps.ts

@@ -117,6 +117,7 @@ export function createAppsFixture(page: Page) {
     },
     goToAppsTab: async () => {
       await page.getByTestId("vertical-tab-apps").click();
+      await expect(page.getByTestId("vertical-tab-apps")).toHaveAttribute("aria-current", "page");
     },
     activeApp: async (app: string) => {
       await page.locator(`[data-testid='${app}-app-switch']`).click();
@@ -126,7 +127,7 @@ export function createAppsFixture(page: Page) {
     },
     verifyAppsInfoNew: async (app: string, eventTypeId: number) => {
       await page.goto(`event-types/${eventTypeId}?tabName=apps`);
-      await expect(page.getByTestId("vertical-tab-basics")).toContainText("Basics"); // fix the race condition
+      await expect(page.getByTestId("vertical-tab-apps")).toHaveAttribute("aria-current", "page"); // fix the race condition
       await expect(page.locator(`[data-testid='${app}-app-switch'][data-state="checked"]`)).toBeVisible();
     },
   };

apps/web/playwright/out-of-office.e2e.ts

@@ -653,11 +653,12 @@ test.describe("Out of office", () => {
     test("Default date range filter set to `Last 7 Days`", async ({ page, users }) => {
       const user = await users.create({ name: `userOne=${Date.now()}` });
       await user.apiLogin();
-      await page.goto("/settings/my-account/out-of-office");
-      await page.waitForLoadState("domcontentloaded");
-      await page.waitForResponse(
+      const responsePromise = page.waitForResponse(
         (response) => response.url().includes("outOfOfficeEntriesList") && response.status() === 200
       );
+      await page.goto("/settings/my-account/out-of-office");
+      await page.waitForLoadState("domcontentloaded");
+      await responsePromise;
       await addFilter(page, "dateRange");
       await expect(
         page.locator('[data-testid="filter-popover-trigger-dateRange"]', { hasText: "Last 7 Days" }).first()
@@ -667,11 +668,12 @@ test.describe("Out of office", () => {
     test("Can choose date range presets", async ({ page, users }) => {
       const user = await users.create({ name: `userOne=${Date.now()}` });
       await user.apiLogin();
-      await page.goto("/settings/my-account/out-of-office");
-      await page.waitForLoadState("domcontentloaded");
-      await page.waitForResponse(
+      const responsePromise = page.waitForResponse(
         (response) => response.url().includes("outOfOfficeEntriesList") && response.status() === 200
       );
+      await page.goto("/settings/my-account/out-of-office");
+      await page.waitForLoadState("domcontentloaded");
+      await responsePromise;
       await addFilter(page, "dateRange");
 
       await expect(page.locator('[data-testid="date-range-options-tdy"]')).toBeVisible(); //Today

apps/web/playwright/payment-apps.e2e.ts

@@ -1,13 +1,19 @@
 import { expect } from "@playwright/test";
 
 import prisma from "@calcom/prisma";
+import type { Page } from "@playwright/test";
 
 import { test } from "./lib/fixtures";
 import { selectFirstAvailableTimeSlotNextMonth, submitAndWaitForResponse } from "./lib/testUtils";
 
 test.describe.configure({ mode: "parallel" });
 test.afterEach(({ users }) => users.deleteAll());
 
+async function goToAppsTab(page: Page, eventTypeId?: number) {
+  await page.goto(`event-types/${eventTypeId}?tabName=apps`);
+  await expect(page.getByTestId("vertical-tab-apps")).toHaveAttribute("aria-current", "page");
+}
+
 test.describe("Payment app", () => {
   test("Should be able to edit alby price, currency", async ({ page, users }) => {
     const user = await users.create();
@@ -29,7 +35,7 @@ test.describe("Payment app", () => {
       },
     });
 
-    await page.goto(`event-types/${paymentEvent?.id}?tabName=apps`);
+    await goToAppsTab(page, paymentEvent?.id);
 
     await page.locator("#event-type-form").getByRole("switch").click();
     await page.getByPlaceholder("Price").click();
@@ -75,7 +81,7 @@ test.describe("Payment app", () => {
       },
     });
 
-    await page.goto(`event-types/${paymentEvent?.id}?tabName=apps`);
+    await goToAppsTab(page, paymentEvent?.id);
     await page.locator("#event-type-form").getByRole("switch").click();
     await page.getByTestId("stripe-currency-select").click();
     await page.getByTestId("select-option-usd").click();
@@ -115,7 +121,7 @@ test.describe("Payment app", () => {
       },
     });
 
-    await page.goto(`event-types/${paymentEvent?.id}?tabName=apps`);
+    await goToAppsTab(page, paymentEvent?.id);
 
     await page.locator("#event-type-form").getByRole("switch").click();
 
@@ -158,7 +164,7 @@ test.describe("Payment app", () => {
       },
     });
 
-    await page.goto(`event-types/${paymentEvent?.id}?tabName=apps`);
+    await goToAppsTab(page, paymentEvent?.id);
 
     await page.locator("#event-type-form").getByRole("switch").click();
 
@@ -185,7 +191,7 @@ test.describe("Payment app", () => {
       },
     });
 
-    await page.goto(`event-types/${paymentEvent?.id}?tabName=apps`);
+    await goToAppsTab(page, paymentEvent?.id);
 
     await page.locator("#event-type-form").getByRole("switch").click();
 
@@ -220,7 +226,7 @@ test.describe("Payment app", () => {
       },
     });
 
-    await page.goto(`event-types/${paymentEvent?.id}?tabName=apps`);
+    await goToAppsTab(page, paymentEvent?.id);
 
     await page.locator("#event-type-form").getByRole("switch").click();
     // make sure Tracking ID is displayed
@@ -267,7 +273,7 @@ test.describe("Payment app", () => {
       ],
     });
 
-    await page.goto(`event-types/${paymentEvent.id}?tabName=apps`);
+    await goToAppsTab(page, paymentEvent?.id);
 
     await page.locator("[data-testid='paypal-app-switch']").click();
     await page.locator("[data-testid='stripe-app-switch']").isDisabled();
@@ -314,7 +320,7 @@ test.describe("Payment app", () => {
       ],
     });
 
-    await page.goto(`event-types/${paymentEvent.id}?tabName=apps`);
+    await goToAppsTab(page, paymentEvent?.id);
 
     await page.getByTestId("paypal-app-switch").click();
     await page.getByTestId("paypal-price-input").fill("100");