Merge pull request #6258 from Sage/playwright_refactor_advancedcolorp…

…icker

test(advanced-color-picker): Playwright refactor

playwright/components/advanced-color-picker/index.ts

@@ -0,0 +1,50 @@
+import type { Page } from "@playwright/test";
+import {
+  ADVANCED_COLOR_PICKER_CELL,
+  CURRENT_COLOR_DESCRIPTION,
+  SIMPLE_COLOR,
+  SIMPLE_COLOR_PICKER,
+  ADVANCED_COLOR_PREVIEW,
+} from "./locators";
+
+const simpleColorPickerInput = (page: Page, index: number) => {
+  return page.locator(SIMPLE_COLOR).locator("input").nth(index);
+};
+
+const simpleColorPicker = (page: Page, index: number) => {
+  return page
+    .locator(SIMPLE_COLOR_PICKER)
+    .locator(SIMPLE_COLOR)
+    .nth(index)
+    .locator("input");
+};
+
+const currentColorDescription = (page: Page) => {
+  return page.locator(CURRENT_COLOR_DESCRIPTION);
+};
+
+const advancedColorPickerCell = (page: Page) => {
+  return page.locator(ADVANCED_COLOR_PICKER_CELL);
+};
+
+const advancedColorPicker = (page: Page, index: number) => {
+  return page.locator(SIMPLE_COLOR).nth(index);
+};
+
+const simpleColorPickerComponent = (page: Page) => {
+  return page.locator(SIMPLE_COLOR_PICKER);
+};
+
+const advancedColorPickerPreview = (page: Page) => {
+  return page.locator(ADVANCED_COLOR_PREVIEW);
+};
+
+export {
+  simpleColorPickerInput,
+  simpleColorPicker,
+  currentColorDescription,
+  advancedColorPickerCell,
+  advancedColorPicker,
+  simpleColorPickerComponent,
+  advancedColorPickerPreview,
+};

playwright/components/advanced-color-picker/locators.ts

@@ -0,0 +1,7 @@
+// component preview locators
+export const ADVANCED_COLOR_PICKER_CELL = '[data-element="color-picker-cell"]';
+export const CURRENT_COLOR_DESCRIPTION =
+  '[data-element="current-color-description"]';
+export const SIMPLE_COLOR = '[data-component="simple-color"]';
+export const SIMPLE_COLOR_PICKER = '[data-component="simple-color-picker"]';
+export const ADVANCED_COLOR_PREVIEW = '[data-element="color-picker-preview"]';