tests(Playwright): Full implementation of Page Object Models (POMs) to Playwright tests

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/untrackSeriesModal.tsx

@@ -12,8 +12,14 @@ export function UntrackSeriesModal({ hide, onConfirm, message }) {
       </div>
       <FooterAction className="mt-4">
         <FooterAction.Right>
-          <FooterAction.Secondary onClick={hide}>Cancel</FooterAction.Secondary>
+          <FooterAction.Secondary
+            dataCY="cancel-button"
+            onClick={hide}
+          >
+            Cancel
+          </FooterAction.Secondary>
           <FooterAction.Primary
+            dataCY="confirm-button"
             onClick={() => {
               onConfirm();
               hide();

platform/ui-next/src/components/DataRow/DataRow.tsx

@@ -313,6 +313,7 @@ const DataRowComponent = React.forwardRef<HTMLDivElement, DataRowProps>(
                 isSelected || !isVisible ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
               }`}
               aria-label={isVisible ? 'Hide' : 'Show'}
+              dataCY="visibilityToggle"
               onClick={e => {
                 e.stopPropagation();
                 onToggleVisibility(e);

platform/ui-next/src/components/FooterAction/FooterAction.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Button } from '../Button/Button';
+import { Button, ButtonProps } from '../Button/Button';
 import { cn } from '../../lib/utils';
 
 interface FooterActionProps {
   children: React.ReactNode;
   className?: string;
 }
 
-interface ActionProps extends FooterActionProps {
+interface ActionProps extends ButtonProps {
   onClick: () => void;
   className?: string;
 }
@@ -60,12 +60,18 @@ FooterAction.Right = ({ children }: FooterActionProps) => {
 FooterAction.Right.displayName = 'FooterAction.Right';
 
 // Primary action: Solid button (default)
-FooterAction.Primary = ({ children, onClick, className = 'min-w-[80px]' }: ActionProps) => {
+FooterAction.Primary = ({
+  children,
+  onClick,
+  className = 'min-w-[80px]',
+  ...rest
+}: ActionProps) => {
   return (
     <Button
       variant="default"
       onClick={onClick}
       className={className}
+      {...rest}
     >
       {children}
     </Button>
@@ -74,12 +80,18 @@ FooterAction.Primary = ({ children, onClick, className = 'min-w-[80px]' }: Actio
 FooterAction.Primary.displayName = 'FooterAction.Primary';
 
 // Secondary action: Ghost button
-FooterAction.Secondary = ({ children, onClick, className = 'min-w-[80px]' }: ActionProps) => {
+FooterAction.Secondary = ({
+  children,
+  onClick,
+  className = 'min-w-[80px]',
+  ...rest
+}: ActionProps) => {
   return (
     <Button
       variant="secondary"
       onClick={onClick}
       className={className}
+      {...rest}
     >
       {children}
     </Button>
@@ -88,12 +100,13 @@ FooterAction.Secondary = ({ children, onClick, className = 'min-w-[80px]' }: Act
 FooterAction.Secondary.displayName = 'FooterAction.Secondary';
 
 // Tertiary action: Ghost button with different styling
-FooterAction.Auxiliary = ({ children, onClick, className }: ActionProps) => {
+FooterAction.Auxiliary = ({ children, onClick, className, ...rest }: ActionProps) => {
   return (
     <Button
       variant="ghost"
       onClick={onClick}
       className={className}
+      {...rest}
     >
       {children}
     </Button>

platform/ui-next/src/components/Thumbnail/Thumbnail.tsx

@@ -88,7 +88,12 @@ const Thumbnail = ({
                   loadingProgress && loadingProgress < 1 && 'bg-primary/25'
                 )}
               ></div>
-              <div className="text-[11px] font-semibold text-white">{modality}</div>
+              <div
+                className="text-[11px] font-semibold text-white"
+                data-cy="series-modality-label"
+              >
+                {modality}
+              </div>
             </div>
 
             {/* top right */}
@@ -139,7 +144,10 @@ const Thumbnail = ({
           <Tooltip>
             <TooltipContent>{description}</TooltipContent>
             <TooltipTrigger>
-              <div className="min-h-[18px] w-[128px] overflow-hidden text-ellipsis whitespace-nowrap pb-0.5 pl-1 text-left text-[12px] font-normal leading-4 text-white">
+              <div
+                className="min-h-[18px] w-[128px] overflow-hidden text-ellipsis whitespace-nowrap pb-0.5 pl-1 text-left text-[12px] font-normal leading-4 text-white"
+                data-cy="series-description-label"
+              >
                 {description}
               </div>
             </TooltipTrigger>
@@ -180,11 +188,19 @@ const Thumbnail = ({
           ></div>
           <div className="flex h-full w-[calc(100%-12px)] flex-col justify-start">
             <div className="flex items-center gap-[7px]">
-              <div className="text-[13px] font-semibold text-white">{modality}</div>
+              <div
+                className="text-[13px] font-semibold text-white"
+                data-cy="series-modality-label"
+              >
+                {modality}
+              </div>
               <Tooltip>
                 <TooltipContent>{description}</TooltipContent>
                 <TooltipTrigger className="w-full overflow-hidden">
-                  <div className="max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-left text-[13px] font-normal text-white">
+                  <div
+                    className="max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-left text-[13px] font-normal text-white"
+                    data-cy="series-description-label"
+                  >
                     {description}
                   </div>
                 </TooltipTrigger>

tests/Angle.spec.ts

@@ -9,6 +9,7 @@ test.beforeEach(async ({ page }) => {
 test('should display the angle tool', async ({
   page,
   mainToolbarPageObject,
+  overlayPageObject,
   viewportPageObject,
 }) => {
   await mainToolbarPageObject.moreTools.angle.click();
@@ -17,6 +18,6 @@ test('should display the angle tool', async ({
     { x: 450, y: 250 },
     { x: 550, y: 300 },
   ]);
-  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await overlayPageObject.viewport.measurementTracking.confirm.click();
   await checkForScreenshot(page, page, screenShotPaths.angle.angleDisplayedCorrectly);
 });

tests/ArrowAnnotate.spec.ts

@@ -9,9 +9,11 @@ test.beforeEach(async ({ page }) => {
 test('should display the arrow tool and allow free-form text to be entered', async ({
   page,
   mainToolbarPageObject,
+  overlayPageObject,
+  rightPanelPageObject,
   viewportPageObject,
 }) => {
-  await page.getByTestId('trackedMeasurements-btn').click();
+  await rightPanelPageObject.measurementsPanel.menuButton.click();
 
   await mainToolbarPageObject.measurementTools.arrowAnnotate.click();
 
@@ -20,10 +22,9 @@ test('should display the arrow tool and allow free-form text to be entered', asy
     { x: 344, y: 232 },
   ]);
 
-  await page.getByTestId('dialog-input').fill('Ringo Starr was the drummer for The Beatles');
-  await page.getByTestId('input-dialog-save-button').click();
+  await overlayPageObject.dialog.input.fillAndSave('Ringo Starr was the drummer for The Beatles');
 
-  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await overlayPageObject.viewport.measurementTracking.confirm.click();
 
   await page.waitForTimeout(2000);
 
@@ -37,8 +38,7 @@ test('should display the arrow tool and allow free-form text to be entered', asy
 
   await viewportPageObject.active.doubleClickAt({ x: 164, y: 234 });
 
-  await page.getByTestId('dialog-input').fill('Neil Peart was the drummer for Rush');
-  await page.getByTestId('input-dialog-save-button').click();
+  await overlayPageObject.dialog.input.fillAndSave('Neil Peart was the drummer for Rush');
 
   await page.waitForTimeout(2000);
 
@@ -50,11 +50,9 @@ test('should display the arrow tool and allow free-form text to be entered', asy
 
   // Now edit the label and the text should not change.
 
-  await page.getByTestId('actionsMenuTrigger').click();
-  await page.getByTestId('Rename').click();
-
-  await page.getByTestId('dialog-input').fill('Drummer annotation arrow');
-  await page.getByTestId('input-dialog-save-button').click();
+  await rightPanelPageObject.measurementsPanel.panel
+    .nthMeasurement(0)
+    .actions.rename('Drummer annotation arrow');
 
   await page.waitForTimeout(2000);
 

tests/Bidirectional.spec.ts

@@ -9,14 +9,15 @@ test.beforeEach(async ({ page }) => {
 test('should display the bidirectional tool', async ({
   page,
   mainToolbarPageObject,
+  overlayPageObject,
   viewportPageObject,
 }) => {
   await mainToolbarPageObject.measurementTools.bidirectional.click();
   await viewportPageObject.active.clickAt([
     { x: 405, y: 277 },
     { x: 515, y: 339 },
   ]);
-  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await overlayPageObject.viewport.measurementTracking.confirm.click();
   await checkForScreenshot(
     page,
     page,

tests/Circle.spec.ts

@@ -9,13 +9,14 @@ test.beforeEach(async ({ page }) => {
 test('should display the circle tool', async ({
   page,
   mainToolbarPageObject,
+  overlayPageObject,
   viewportPageObject,
 }) => {
   await mainToolbarPageObject.measurementTools.circleROI.click();
   await viewportPageObject.active.clickAt([
     { x: 480, y: 205 },
     { x: 488, y: 247 },
   ]);
-  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await overlayPageObject.viewport.measurementTracking.confirm.click();
   await checkForScreenshot(page, page, screenShotPaths.circle.circleDisplayedCorrectly);
 });

tests/CobbAngle.spec.ts

@@ -9,6 +9,7 @@ test.beforeEach(async ({ page }) => {
 test('should display the cobb angle tool', async ({
   page,
   mainToolbarPageObject,
+  overlayPageObject,
   viewportPageObject,
 }) => {
   await mainToolbarPageObject.moreTools.cobbAngle.click();
@@ -18,6 +19,6 @@ test('should display the cobb angle tool', async ({
     { x: 527, y: 293 },
     { x: 625, y: 291 },
   ]);
-  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await overlayPageObject.viewport.measurementTracking.confirm.click();
   await checkForScreenshot(page, page, screenShotPaths.cobbangle.cobbangleDisplayedCorrectly);
 });

tests/ContextMenu.spec.ts

@@ -9,6 +9,7 @@ test.beforeEach(async ({ page }) => {
 test('should the context menu completely on screen and is not clipped for a point near the bottom edge of the screen', async ({
   page,
   mainToolbarPageObject,
+  overlayPageObject,
   viewportPageObject,
 }) => {
   await mainToolbarPageObject.measurementTools.length.click();
@@ -17,7 +18,7 @@ test('should the context menu completely on screen and is not clipped for a poin
     { x: 0.55, y: 0.98 },
   ]);
 
-  await page.getByTestId('prompt-begin-tracking-yes-btn').click();
+  await overlayPageObject.viewport.measurementTracking.confirm.click();
 
   await checkForScreenshot(page, page, screenShotPaths.contextMenu.preContextMenuNearBottomEdge);
 

tests/ContourSegLocking.spec.ts

@@ -5,17 +5,20 @@ const studyInstanceUID = '1.2.840.113619.2.290.3.3767434740.226.1600859119.501';
 
 test('should not allow contours to be edited in basic viewer mode', async ({
   page,
+  leftPanelPageObject,
+  rightPanelPageObject,
+  overlayPageObject,
   viewportPageObject,
 }) => {
   const mode = 'viewer';
   await visitStudy(page, studyInstanceUID, mode, 2000);
 
-  await page.getByTestId('side-panel-header-right').click();
-  await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
+  await rightPanelPageObject.toggle();
+  await leftPanelPageObject.loadSeriesByModality('RTSTRUCT');
   // Wait for the segmentation to be loaded.
   await page.waitForTimeout(5000);
 
-  await page.getByTestId('yes-hydrate-btn').click();
+  await overlayPageObject.viewport.segmentationHydration.yes.click();
 
   // Wait for the segmentation to hydrate.
   await page.waitForTimeout(5000);
@@ -46,13 +49,16 @@ test('should not allow contours to be edited in basic viewer mode', async ({
 
 test('should not allow contours to be edited when panelSegmentation.disableEditing is true', async ({
   page,
+  leftPanelPageObject,
+  rightPanelPageObject,
+  overlayPageObject,
   viewportPageObject,
 }) => {
   const mode = 'segmentation';
   await visitStudy(page, studyInstanceUID, mode, 2000);
 
-  await page.getByTestId('side-panel-header-right').click();
-  await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
+  await rightPanelPageObject.toggle();
+  await leftPanelPageObject.loadSeriesByModality('RTSTRUCT');
   // Wait for the segmentation to be loaded.
   await page.waitForTimeout(5000);
 
@@ -66,7 +72,7 @@ test('should not allow contours to be edited when panelSegmentation.disableEditi
     );
   });
 
-  await page.getByTestId('yes-hydrate-btn').click();
+  await overlayPageObject.viewport.segmentationHydration.yes.click();
 
   // Wait for the segmentation to hydrate.
   await page.waitForTimeout(5000);
@@ -97,13 +103,16 @@ test('should not allow contours to be edited when panelSegmentation.disableEditi
 
 test('should allow contours to be edited when panelSegmentation.disableEditing is false', async ({
   page,
+  leftPanelPageObject,
+  rightPanelPageObject,
+  overlayPageObject,
   viewportPageObject,
 }) => {
   const mode = 'segmentation';
   await visitStudy(page, studyInstanceUID, mode, 2000);
 
-  await page.getByTestId('side-panel-header-right').click();
-  await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
+  await rightPanelPageObject.toggle();
+  await leftPanelPageObject.loadSeriesByModality('RTSTRUCT');
   // Wait for the segmentation to be loaded.
   await page.waitForTimeout(5000);
 
@@ -117,7 +126,7 @@ test('should allow contours to be edited when panelSegmentation.disableEditing i
     );
   });
 
-  await page.getByTestId('yes-hydrate-btn').click();
+  await overlayPageObject.viewport.segmentationHydration.yes.click();
 
   // Wait for the segmentation to hydrate.
   await page.waitForTimeout(5000);