fix: some flaky e2e tests (#19648)

* fix: some flaky e2e tests

* update

* update

apps/web/modules/settings/my-account/general-view.tsx

@@ -343,7 +343,12 @@ const GeneralView = ({ localeProp, user, travelSchedules, revalidatePage }: Gene
         </div>
 
         <SectionBottomActions align="end">
-          <Button loading={isUpdateBtnLoading} disabled={isDisabled} color="primary" type="submit">
+          <Button
+            loading={isUpdateBtnLoading}
+            disabled={isDisabled}
+            color="primary"
+            type="submit"
+            data-testid="general-submit-button">
             <>{t("update")}</>
           </Button>
         </SectionBottomActions>

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

@@ -525,6 +525,7 @@ test.describe("Booking round robin event", () => {
     );
     const team = await testUser.getFirstTeamMembership();
     await page.goto(`/team/${team.team.slug}`);
+    await page.waitForLoadState("domcontentloaded");
   });
 
   test("Does not book seated round robin host outside availability with date override", async ({

apps/web/playwright/change-theme.e2e.ts

@@ -79,6 +79,8 @@ test.describe("Change Booking Page Theme Test", () => {
     expect(toast).toBeTruthy();
     //Go to the profile page and check if the theme is dark
     await page.goto(`/${pro.username}`);
+    await page.reload();
+    await page.waitForLoadState("domcontentloaded"); // Fix the race condition
     const htmlClass = await page.getAttribute("html", "class");
     expect(htmlClass).toContain("dark");
   });

apps/web/playwright/locale.e2e.ts

@@ -1,6 +1,7 @@
 import { expect } from "@playwright/test";
 
 import { test } from "./lib/fixtures";
+import { submitAndWaitForResponse } from "./lib/testUtils";
 
 test.describe.configure({ mode: "serial" });
 
@@ -439,11 +440,9 @@ test.describe("authorized user sees changed translations (de->ar)", async () =>
       await page.locator(".bg-default > div > div:nth-child(2)").first().click();
       await page.getByTestId("select-option-ar").click();
 
-      await page.getByRole("button", { name: "Aktualisieren" }).click();
-
-      await page
-        .getByRole("button", { name: "Einstellungen erfolgreich aktualisiert" })
-        .waitFor({ state: "visible" });
+      await submitAndWaitForResponse(page, "/api/trpc/viewer/updateProfile?batch=1", {
+        action: () => page.click("[data-testid=general-submit-button]"),
+      });
 
       await page.locator("html[lang=ar]").waitFor({ state: "attached" });
       await page.locator("html[dir=rtl]").waitFor({ state: "attached" });
@@ -501,11 +500,9 @@ test.describe("authorized user sees changed translations (de->pt-BR) [locale1]",
       await page.locator(".bg-default > div > div:nth-child(2)").first().click();
       await page.locator("text=Português (Brasil)").click();
 
-      await page.getByRole("button", { name: "Aktualisieren" }).click();
-
-      await page
-        .getByRole("button", { name: "Einstellungen erfolgreich aktualisiert" })
-        .waitFor({ state: "visible" });
+      await submitAndWaitForResponse(page, "/api/trpc/viewer/updateProfile?batch=1", {
+        action: () => page.click("[data-testid=general-submit-button]"),
+      });
 
       await page.locator("html[lang=pt-BR]").waitFor({ state: "attached" });
       await page.locator("html[dir=ltr]").waitFor({ state: "attached" });

apps/web/playwright/manage-booking-questions.e2e.ts

@@ -70,6 +70,10 @@ test.describe("Manage Booking Questions", () => {
         const firstEventTypeElement = $eventTypes.first();
 
         await firstEventTypeElement.click();
+        await expect(page.getByTestId("vertical-tab-event_setup_tab_title")).toHaveAttribute(
+          "aria-current",
+          "page"
+        );
         await page.getByTestId("vertical-tab-event_advanced_tab_title").click();
       });
 
@@ -113,6 +117,10 @@ test.describe("Manage Booking Questions", () => {
         const firstEventTypeElement = $eventTypes.first();
 
         await firstEventTypeElement.click();
+        await expect(page.getByTestId("vertical-tab-event_setup_tab_title")).toHaveAttribute(
+          "aria-current",
+          "page"
+        );
       });
 
       await test.step("Open the 'Name' field dialog", async () => {
@@ -746,6 +754,10 @@ test.describe("Text area min and max characters text", () => {
     await page.waitForSelector('[data-testid="event-types"]');
     await createNewEventType(page, { eventTitle });
     await page.waitForSelector('[data-testid="event-title"]');
+    await expect(page.getByTestId("vertical-tab-event_setup_tab_title")).toHaveAttribute(
+      "aria-current",
+      "page"
+    );
     await page.getByTestId("vertical-tab-event_advanced_tab_title").click();
     const insertQuestion = async (questionName: string) => {
       const element = page.locator('[data-testid="add-field"]');

packages/app-store/routing-forms/playwright/tests/basic.e2e.ts

@@ -152,6 +152,7 @@ test.describe("Routing Forms", () => {
         const form2Id = await addForm(page, { name: "F2" });
 
         await addOneFieldAndDescriptionAndSaveForm(form1Id, page, {
+          name: "F1",
           description: "Form 1 Description",
           field: {
             label: "F1 Field1",
@@ -160,6 +161,7 @@ test.describe("Routing Forms", () => {
         });
 
         const { types } = await addOneFieldAndDescriptionAndSaveForm(form2Id, page, {
+          name: "F2",
           description: "Form 2 Description",
           field: {
             label: "F2 Field1",
@@ -185,6 +187,7 @@ test.describe("Routing Forms", () => {
         await expectCurrentFormToHaveFields(page, { 1: { label: "F1 Field1", typeIndex: 1 } }, types);
         // Add 1 more field in F1
         await addOneFieldAndDescriptionAndSaveForm(form1Id, page, {
+          name: "F1",
           field: {
             label: "F1 Field2",
             typeIndex: 1,

packages/app-store/routing-forms/playwright/tests/testUtils.ts

@@ -34,9 +34,10 @@ export async function addForm(
 export async function addOneFieldAndDescriptionAndSaveForm(
   formId: string,
   page: Page,
-  form: { description?: string; field?: { typeIndex: number; label: string } }
+  form: { name: string; description?: string; field?: { typeIndex: number; label: string } }
 ) {
   await page.goto(`apps/routing-forms/form-edit/${formId}`);
+  await expect(page.locator('[name="name"]')).toHaveValue(form.name);
   await page.click('[data-testid="add-field"]');
   if (form.description) {
     await page.fill('[data-testid="description"]', form.description);

packages/app-store/typeform/playwright/tests/basic.e2e.ts

@@ -35,8 +35,9 @@ test.describe("Typeform App", () => {
       context.grantPermissions(["clipboard-read", "clipboard-write"]);
 
       await page.goto(`/routing-forms/forms`);
-      const formId = await addRoutingForm(page);
+      const formId = await addRoutingForm(page, { name: "test form" });
       await addOneFieldAndDescriptionAndSaveForm(formId, page, {
+        name: "test form",
         description: "",
         field: { label: "test", typeIndex: 1 },
       });
@@ -54,8 +55,9 @@ test.describe("Typeform App", () => {
       context.grantPermissions(["clipboard-read", "clipboard-write"]);
 
       await page.goto("/routing-forms/forms");
-      const formId = await addRoutingForm(page);
+      const formId = await addRoutingForm(page, { name: "test form" });
       await addOneFieldAndDescriptionAndSaveForm(formId, page, {
+        name: "test form",
         description: "",
         field: { label: "test", typeIndex: 1 },
       });