fix: don't use CSS selectors in Playwright tests

prismicio · Dec 26, 2023 · 6eb0bc4 · 6eb0bc4
1 parent 21fcbc7
commit 6eb0bc4
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 20 deletions.
diff --git a/packages/slice-machine/components/AppLayout/index.tsx b/packages/slice-machine/components/AppLayout/index.tsx
@@ -43,12 +43,16 @@ const PageLayoutWithActiveEnvironment: FC<PropsWithChildren> = ({
 }) => {
   const { activeEnvironment } = useActiveEnvironment();
 
-  const maybeBorderColor = activeEnvironment
+  const borderTopColor = activeEnvironment
     ? environmentTopBorderColorMap[activeEnvironment.kind]
-    : undefined;
+    : "purple";
 
   return (
-    <PageLayout borderTopColor={maybeBorderColor} {...otherProps}>
+    <PageLayout
+      borderTopColor={borderTopColor}
+      data-cy={`app-layout-top-border-color-${borderTopColor}`}
+      {...otherProps}
+    >
       {children}
     </PageLayout>
   );

diff --git a/packages/slice-machine/src/components/PageLayout/PageLayout.tsx b/packages/slice-machine/src/components/PageLayout/PageLayout.tsx
@@ -4,11 +4,11 @@ import clsx from "clsx";
 import * as styles from "./PageLayout.css";
 
 type PageLayoutProps = PropsWithChildren<{
-  borderTopColor?: keyof typeof styles.borderTopColor;
+  borderTopColor: keyof typeof styles.borderTopColor;
 }>;
 
 export const PageLayout: FC<PageLayoutProps> = ({
-  borderTopColor = "purple",
+  borderTopColor,
   children,
   ...otherProps
 }) => (

diff --git a/packages/slice-machine/src/features/customTypes/customTypesTable/CustomTypesTablePage.tsx b/packages/slice-machine/src/features/customTypes/customTypesTable/CustomTypesTablePage.tsx
@@ -89,7 +89,7 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
             </AppLayout>
           }
         >
-          <AppLayout data-cy="app-layout">
+          <AppLayout>
             <AppLayoutHeader>
               <AppLayoutBreadcrumb
                 folder={customTypesMessages.name({

diff --git a/playwright/pages/SliceMachinePage.ts b/playwright/pages/SliceMachinePage.ts
@@ -6,7 +6,6 @@ import { LoginDialog } from "./components/LoginDialog";
 
 export class SliceMachinePage {
   readonly page: Page;
-  readonly appLayout: Locator;
   readonly menu: Menu;
   readonly inAppGuideDialog: InAppGuideDialog;
   readonly loginDialog: LoginDialog;
@@ -26,7 +25,6 @@ export class SliceMachinePage {
      * Static locators
      */
     this.body = page.getByRole("main");
-    this.appLayout = page.getByTestId("app-layout");
     this.breadcrumb = page.getByLabel("Breadcrumb");
   }
 
@@ -37,6 +35,10 @@ export class SliceMachinePage {
     return this.breadcrumb.getByText(name, { exact: true });
   }
 
+  getPageLayoutByTopBorderColor(color: string) {
+    return this.page.getByTestId(`app-layout-top-border-color-${color}`);
+  }
+
   /**
    * Actions
    */

diff --git a/playwright/tests/common/environment.spec.ts b/playwright/tests/common/environment.spec.ts
@@ -205,10 +205,9 @@ test.describe("Environment", () => {
       await sliceMachinePage.menu.environmentSelector.selectEnvironment(
         environments[0].name,
       );
-      await expect(sliceMachinePage.appLayout).toHaveCSS(
-        "border-top-color",
-        "rgb(109, 84, 207)",
-      );
+      await expect(
+        sliceMachinePage.getPageLayoutByTopBorderColor("purple"),
+      ).toBeVisible();
 
       procedures.mock(
         "project.fetchActiveEnvironment",
@@ -218,10 +217,9 @@ test.describe("Environment", () => {
       await sliceMachinePage.menu.environmentSelector.selectEnvironment(
         environments[1].name,
       );
-      await expect(sliceMachinePage.appLayout).toHaveCSS(
-        "border-top-color",
-        "rgb(56, 91, 204)",
-      );
+      await expect(
+        sliceMachinePage.getPageLayoutByTopBorderColor("indigo"),
+      ).toBeVisible();
 
       procedures.mock(
         "project.fetchActiveEnvironment",
@@ -231,10 +229,9 @@ test.describe("Environment", () => {
       await sliceMachinePage.menu.environmentSelector.selectEnvironment(
         environments[2].name,
       );
-      await expect(sliceMachinePage.appLayout).toHaveCSS(
-        "border-top-color",
-        "rgb(255, 159, 26)",
-      );
+      await expect(
+        sliceMachinePage.getPageLayoutByTopBorderColor("amber"),
+      ).toBeVisible();
     },
   );
 });