fix: Few flaky e2e test (calcom#21818)

* fix: delete dilog button not visible

* fix: flaky e2e tests

* Update booking.e2e.ts

* update

* Update booking.e2e.ts

* update

* Update booking.e2e.ts

* Update booking.e2e.ts

Author: anikdhabal

apps/web/playwright/fixtures/users.ts

@@ -768,6 +768,13 @@ const createUserFixture = (user: UserWithIncludes, page: Page) => {
      * @deprecated use apiLogin instead
      */
     login: async () => login({ ...(await self()), password: user.username }, store.page),
+    loginOnNewBrowser: async (browser: Browser) => {
+      const newContext = await browser.newContext();
+      const newPage = await newContext.newPage();
+      await login({ ...(await self()), password: user.username }, newPage);
+      // Don't forget to: newContext.close();
+      return [newContext, newPage] as const;
+    },
     logout: async () => {
       await page.goto("/auth/logout");
     },
@@ -1074,9 +1081,11 @@ export async function apiLogin(
     json: "true",
     csrfToken,
   };
-  return page.context().request.post("/api/auth/callback/credentials", {
+  const response = await page.context().request.post("/api/auth/callback/credentials", {
     data,
   });
+  expect(response.status()).toBe(200);
+  return response;
 }
 
 export async function setupEventWithPrice(eventType: Pick<Prisma.EventType, "id">, slug: string, page: Page) {

apps/web/playwright/login.2fa.e2e.ts

@@ -18,7 +18,7 @@ test.describe("2FA Tests", async () => {
   test.afterEach(async ({ users }) => {
     await users.deleteAll();
   });
-  test("should allow a user to enable 2FA and login using 2FA", async ({ page, users }) => {
+  test("should allow a user to enable 2FA and login using 2FA", async ({ page, users, browser }) => {
     // log in trail user
     const user = await test.step("Enable 2FA", async () => {
       const user = await users.create();
@@ -60,7 +60,7 @@ test.describe("2FA Tests", async () => {
     });
 
     await test.step("Login with 2FA enabled", async () => {
-      await user.login();
+      const [secondContext, secondPage] = await user.loginOnNewBrowser(browser);
       const userWith2FaSecret = await prisma.user.findFirst({
         where: {
           id: user.id,
@@ -74,13 +74,14 @@ test.describe("2FA Tests", async () => {
         process.env.CALENDSO_ENCRYPTION_KEY!
       );
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      await fillOtp({ page, secret: secret! });
+      await fillOtp({ page: secondPage, secret: secret! });
       await Promise.all([
-        page.press('input[name="2fa6"]', "Enter"),
-        page.waitForResponse("**/api/auth/callback/credentials**"),
+        secondPage.press('input[name="2fa6"]', "Enter"),
+        secondPage.waitForResponse("**/api/auth/callback/credentials**"),
       ]);
-      const shellLocator = page.locator(`[data-testid=dashboard-shell]`);
+      const shellLocator = secondPage.locator(`[data-testid=dashboard-shell]`);
       await expect(shellLocator).toBeVisible();
+      await secondContext.close();
     });
   });
 

apps/web/playwright/organization/booking.e2e.ts

@@ -368,10 +368,11 @@ test.describe("Bookings", () => {
       );
     });
 
-    test("Round robin event type with confirmation required handles cancellation and rebooking correctly with the same details and slot", async ({
+    test("Round robin event type with confirmation required handles rejection and rebooking correctly with the same details and slot", async ({
       page,
       users,
       orgs,
+      browser,
     }) => {
       const org = await orgs.create({
         name: "TestOrg",
@@ -421,38 +422,41 @@ test.describe("Bookings", () => {
           const bookingUid = page.url().split("/booking/")[1];
           expect(bookingUid).not.toBeNull();
 
-          // Login as the host to cancel the booking
           await page.goto("/auth/logout");
-          const allUsers = await users.get();
+
+          const allUsers = users.get();
           const hostUser = allUsers.find((mate) => mate.name === firstHost);
           if (!hostUser) throw new Error("Host not found");
 
           await hostUser.apiLogin();
+          const [secondContext, secondPage] = await hostUser.apiLoginOnNewBrowser(browser);
 
-          // Cancel the booking
-          await page.goto(`/booking/${bookingUid}`);
-          await page.getByTestId("cancel").click();
-          await page.getByTestId("confirm_cancel").click();
-          await page.waitForResponse((response) => response.url().includes("/api/cancel"));
+          // Reject the booking
+          await secondPage.goto("/bookings/upcoming");
+          await secondPage.click('[data-testid="reject"]');
+          await submitAndWaitForResponse(secondPage, "/api/trpc/bookings/confirm?batch=1", {
+            action: () => secondPage.click('[data-testid="rejection-confirm"]'),
+          });
 
           // Logout and go back to booking page
-          await page.goto("/auth/logout");
-          await page.goto(`/org/${org.slug}/${team.slug}/${teamEvent.slug}`);
+          await secondPage.goto("/auth/logout");
+          await secondPage.goto(`/org/${org.slug}/${team.slug}/${teamEvent.slug}`);
 
           // Rebook with the same details
-          await selectFirstAvailableTimeSlotNextMonth(page);
-          await bookTimeSlot(page);
-          await expect(page.getByTestId("success-page")).toBeVisible();
+          await selectFirstAvailableTimeSlotNextMonth(secondPage);
+          await bookTimeSlot(secondPage);
+          await expect(secondPage.getByTestId("success-page")).toBeVisible();
 
           // Verify a new host is assigned
-          const newHost = await page.getByTestId("booking-host-name").textContent();
+          const newHost = await secondPage.getByTestId("booking-host-name").textContent();
           expect(newHost).not.toBeNull();
           expect(newHost).toBe(firstHost);
 
           // Verify the booking was successful by checking the new booking UID
-          const newBookingUid = page.url().split("/booking/")[1];
+          const newBookingUid = secondPage.url().split("/booking/")[1];
           expect(newBookingUid).not.toBeNull();
           expect(newBookingUid).not.toBe(bookingUid);
+          await secondContext.close();
         }
       );
     });