Playwright POM (#8109)

Related to #6641

packages/twenty-e2e-testing/lib/pom/settings/experienceSection.ts

@@ -0,0 +1,55 @@
+import { Locator, Page } from '@playwright/test';
+
+export class ExperienceSection {
+  private readonly lightThemeButton: Locator;
+  private readonly darkThemeButton: Locator;
+  private readonly timezoneDropdown: Locator;
+  private readonly dateFormatDropdown: Locator;
+  private readonly timeFormatDropdown: Locator;
+  private readonly searchInput: Locator;
+
+  constructor(public readonly page: Page) {
+    this.page = page;
+    this.lightThemeButton = page.getByText('AaLight'); // it works
+    this.darkThemeButton = page.getByText('AaDark');
+    this.timezoneDropdown = page.locator(
+      '//span[contains(., "Time zone")]/../div/div/div',
+    );
+    this.dateFormatDropdown = page.locator(
+      '//span[contains(., "Date format")]/../div/div/div',
+    );
+    this.timeFormatDropdown = page.locator(
+      '//span[contains(., "Time format")]/../div/div/div',
+    );
+    this.searchInput = page.getByPlaceholder('Search');
+  }
+
+  async changeThemeToLight() {
+    await this.lightThemeButton.click();
+  }
+
+  async changeThemeToDark() {
+    await this.darkThemeButton.click();
+  }
+
+  async selectTimeZone(timezone: string) {
+    await this.timezoneDropdown.click();
+    await this.page.getByText(timezone, { exact: true }).click();
+  }
+
+  async selectTimeZoneWithSearch(timezone: string) {
+    await this.timezoneDropdown.click();
+    await this.searchInput.fill(timezone);
+    await this.page.getByText(timezone, { exact: true }).click();
+  }
+
+  async selectDateFormat(dateFormat: string) {
+    await this.dateFormatDropdown.click();
+    await this.page.getByText(dateFormat, { exact: true }).click();
+  }
+
+  async selectTimeFormat(timeFormat: string) {
+    await this.timeFormatDropdown.click();
+    await this.page.getByText(timeFormat, { exact: true }).click();
+  }
+}