From cc01d114e6d4d1c89f2a34d516ad2673e5a8bb3a Mon Sep 17 00:00:00 2001
From: Romit <85230081+romitg2@users.noreply.github.com>
Date: Sun, 8 Mar 2026 13:11:45 +0530
Subject: [PATCH] fix: replace fragile CSS selector with data-testid in locale
 E2E tests (#28329)

The locale E2E tests (de->ar and de->pt-BR) were flaky because they used
a brittle CSS selector (.bg-default > div > div:nth-child(2)) to click
the language dropdown. This selector was susceptible to react-select's
internal Input wrapper element intercepting pointer events.

Changes:
- Add data-testid='locale-select' to the language Select in general settings
- Replace CSS path selectors with getByTestId('locale-select') in tests
- Replace text selector for pt-BR with getByTestId('select-option-pt-BR')

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../settings/my-account/general-view.tsx      | 22 ++++++++-----------
 apps/web/playwright/locale.e2e.ts             |  7 +++---
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/apps/web/modules/settings/my-account/general-view.tsx b/apps/web/modules/settings/my-account/general-view.tsx
index 7426eca149..27eae60915 100644
--- a/apps/web/modules/settings/my-account/general-view.tsx
+++ b/apps/web/modules/settings/my-account/general-view.tsx
@@ -1,13 +1,7 @@
 "use client";
 
-import { revalidateSettingsGeneral } from "app/(use-page-wrapper)/settings/(settings-layout)/my-account/general/actions";
-import { useSession } from "next-auth/react";
-import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-
-import { TimezoneSelect } from "@calcom/web/modules/timezone/components/TimezoneSelect";
-import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import { formatLocalizedDateTime } from "@calcom/lib/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localeOptions } from "@calcom/lib/i18n";
@@ -16,15 +10,16 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
-import { Form } from "@calcom/ui/components/form";
-import { Label } from "@calcom/ui/components/form";
-import { Select } from "@calcom/ui/components/form";
-import { SettingsToggle } from "@calcom/ui/components/form";
+import { Form, Label, Select, SettingsToggle } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
 import { revalidateTravelSchedules } from "@calcom/web/app/cache/travelSchedule";
-
+import { TimezoneSelect } from "@calcom/web/modules/timezone/components/TimezoneSelect";
 import TravelScheduleModal from "@components/settings/TravelScheduleModal";
-import { Icon } from "@calcom/ui/components/icon";
+import { revalidateSettingsGeneral } from "app/(use-page-wrapper)/settings/(settings-layout)/my-account/general/actions";
+import { useSession } from "next-auth/react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
 
 export type FormValues = {
   locale: {
@@ -181,6 +176,7 @@ const GeneralView = ({ user, travelSchedules }: GeneralViewProps) => {
                     options={localeOptions}
                     value={value}
                     onChange={onChange}
+                    data-testid="locale-select"
                   />
                 </>
               )}
diff --git a/apps/web/playwright/locale.e2e.ts b/apps/web/playwright/locale.e2e.ts
index c916091f20..2aa427ae6f 100644
--- a/apps/web/playwright/locale.e2e.ts
+++ b/apps/web/playwright/locale.e2e.ts
@@ -1,5 +1,4 @@
 import { expect } from "@playwright/test";
-
 import { test } from "./lib/fixtures";
 import { submitAndWaitForResponse } from "./lib/testUtils";
 
@@ -405,7 +404,7 @@ test.describe("authorized user sees changed translations (de->ar)", async () =>
 
       await page.waitForLoadState("domcontentloaded");
 
-      await page.locator(".bg-default > div > div:nth-child(2)").first().click();
+      await page.getByTestId("locale-select").click();
       await page.getByTestId("select-option-ar").click();
 
       await submitAndWaitForResponse(page, "/api/trpc/me/updateProfile?batch=1", {
@@ -465,8 +464,8 @@ test.describe("authorized user sees changed translations (de->pt-BR) [locale1]",
       await page.goto("/settings/my-account/general");
       await page.waitForLoadState("domcontentloaded");
 
-      await page.locator(".bg-default > div > div:nth-child(2)").first().click();
-      await page.locator("text=Português (Brasil)").click();
+      await page.getByTestId("locale-select").click();
+      await page.getByTestId("select-option-pt-BR").click();
 
       await submitAndWaitForResponse(page, "/api/trpc/me/updateProfile?batch=1", {
         action: () => page.click("[data-testid=general-submit-button]"),