Merge pull request #6304 from Sage/FE-6102_card-pw-refactor

test(card): migrate tests from cypress to playwright - FE-6102

playwright/components/card/index.ts

@@ -0,0 +1,22 @@
+import type { Page } from "@playwright/test";
+import {
+  CARD,
+  CARD_COLUMN,
+  CARD_DRAGGABLE_ELEMENT,
+  CARD_FOOTER,
+  DRAGGABLE_CARD_AT_IDEX,
+  DRAGGABLE_CONTAINER_AT_INDEX,
+} from "./locators";
+
+// component preview locators
+export const card = (page: Page) => page.locator(CARD);
+
+export const draggableCard = (page: Page, index: number) =>
+  page.locator(DRAGGABLE_CARD_AT_IDEX(index)).locator(CARD_DRAGGABLE_ELEMENT);
+
+export const draggableContainer = (page: Page, index: number) =>
+  page.locator(DRAGGABLE_CONTAINER_AT_INDEX(index));
+
+export const columnCard = (page: Page) => page.locator(CARD_COLUMN);
+
+export const footerCard = (page: Page) => page.locator(CARD_FOOTER);

playwright/components/card/locators.ts

@@ -0,0 +1,11 @@
+// component preview locators
+export const CARD = '[data-component="card"]';
+export const CARD_DRAGGABLE_ELEMENT = '[data-element="drag"]';
+export const CARD_COLUMN = '[data-element="card-column"]';
+export const CARD_FOOTER = '[data-element="card-footer"]';
+
+export const DRAGGABLE_CARD_AT_IDEX = (index: number) =>
+  `[data-element="draggable-card-${index}"]`;
+
+export const DRAGGABLE_CONTAINER_AT_INDEX = (index: number) =>
+  `[data-element="draggable-container-${index}"]`;

playwright/components/index.ts

@@ -57,4 +57,4 @@ export const label = (page: Page) => {
 
 export const legendSpan = (page: Page) => {
   return page.locator("legend > span");
-};
+};