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>
This commit is contained in:
RomitandDevin AI authored and GitHub committed 2026-03-08 13:11:45 +05:30
1 parent a4621da2be
commit cc01d114e6
2 files changed
+12 -17

No files matched your search

@@ -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"
/>
</>
)}
+3 -4
View File
@@ -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]"),