test(e2e): update Playwright screenshots and add better tests and assertions for area calculations (#6022)

* Add (better) assertions for area calculation fixes.
* Add SVG and measurement side panel area for freehand ROI test.
* Add Playwright viewport screenshot scope migration guide.
* Update cornerstonjs dependencies to 4.22.8. Ensure all versions of @babel/preset-env are 7.29.5.

---------

Co-authored-by: Ghadeer Albattarni <165973963+GhadeerAlbattarni@users.noreply.github.com>

tests/pages/RightPanelPageObject.ts

@@ -112,30 +112,58 @@ export class RightPanelPageObject {
 
   get measurementsPanel() {
     const page = this.page;
-    const getMeasurementByIdx = (index: number) => this.getPanelRowByIdx(index);
-    const getMeasurementByText = (text: string) => this.getPanelRowByText(text);
-    const menuButton = page.getByTestId('trackedMeasurements-btn');
+    const trackedMeasurementsPanel = page.getByTestId('trackedMeasurements-panel').last();
+    const measurementTableRows = trackedMeasurementsPanel.locator(
+      '[data-cy^="measurement-table-row-"]'
+    );
+    const getMeasurementStatsAt = (index: number) => {
+      const dataRow = trackedMeasurementsPanel
+        .getByTestId(`measurement-table-row-${index}`)
+        .getByTestId('data-row');
+      const locator = dataRow.locator('..').getByTestId('data-row-details');
+      const primaryLocator = locator.getByTestId('data-row-details-primary');
+      const secondaryLocator = locator.getByTestId('data-row-details-secondary');
+      return {
+        locator,
+        primary: {
+          locator: primaryLocator,
+          lines: primaryLocator.getByTestId('data-row-detail-line'),
+        },
+        secondary: {
+          locator: secondaryLocator,
+          lines: secondaryLocator.getByTestId('data-row-detail-line'),
+        },
+      };
+    };
+    const getMeasurementDataRowAt = (index: number) => {
+      const rowWrapper = trackedMeasurementsPanel.getByTestId(`measurement-table-row-${index}`);
+      const dataRow = rowWrapper.getByTestId('data-row');
+      const row = this.getPanelRowDataObject(rowWrapper);
+      // Selection highlight (bg-popover) is on the inner DataRow, not the measurement-table-row wrapper
+      return {
+        ...row,
+        locator: dataRow,
+        stats: getMeasurementStatsAt(index),
+      };
+    };
+    const trackedMeasurementsMenu = page.getByTestId('trackedMeasurements-btn');
 
     return {
-      menuButton,
       panel: {
         deleteAll: async () => {
           await page.getByRole('button', { name: 'Delete' }).click();
         },
         getMeasurementCount: async () => {
-          return await page.getByTestId('data-row').count();
+          return await measurementTableRows.count();
         },
-        rows: page.getByTestId('data-row'),
-        locator: page.getByTestId('trackedMeasurements-panel').last(),
+        rows: measurementTableRows,
+        locator: trackedMeasurementsPanel,
         nthMeasurement(index: number) {
-          return getMeasurementByIdx(index);
-        },
-        measurementByText(text: string) {
-          return getMeasurementByText(text);
+          return getMeasurementDataRowAt(index);
         },
       },
       select: async () => {
-        await menuButton.click();
+        await trackedMeasurementsMenu.click();
       },
     };
   }
@@ -414,7 +442,6 @@ export class RightPanelPageObject {
   get microscopyPanel() {
     const page = this.page;
     const getMeasurementByIdx = (index: number) => this.getPanelRowByIdx(index);
-    const getMeasurementByText = (text: string) => this.getPanelRowByText(text);
 
     return {
       locator: page.getByTestId('measurements-panel'),
@@ -424,9 +451,6 @@ export class RightPanelPageObject {
       nthMeasurement(index: number) {
         return getMeasurementByIdx(index);
       },
-      measurementByText(text: string) {
-        return getMeasurementByText(text);
-      },
     };
   }
 }

tests/pages/ViewportPageObject.ts

@@ -5,12 +5,13 @@ import {
   simulateDoubleClickOnElement,
   simulateNormalizedClicksOnElement,
   simulateNormalizedDragOnElement,
+  simulateNormalizedPathDragOnElement,
 } from '../utils';
 import { DataOverlayPageObject } from './DataOverlayPageObject';
 import { DOMOverlayPageObject } from './DOMOverlayPageObject';
 import { MagnifyGlassPageObject } from './MagnifyGlassPageObject';
 
-type SvgInnerElement = 'circle' | 'path' | 'd' | 'line';
+type SvgInnerElement = 'circle' | 'path' | 'd' | 'line' | 'g';
 
 type NormalizedDragParams = {
   start: { x: number; y: number };
@@ -18,6 +19,11 @@ type NormalizedDragParams = {
   config?: { button?: 'left' | 'right' | 'middle'; delay?: number; steps?: number };
 };
 
+type NormalizedPathDragParams = {
+  path: { x: number; y: number }[];
+  config?: { button?: 'left' | 'right' | 'middle'; delay?: number; steps?: number };
+};
+
 export interface IOverlayText {
   get windowLevel(): Locator;
   get instanceNumber(): Locator;
@@ -56,6 +62,7 @@ export interface IViewportPageObject {
     button?: 'left' | 'right' | 'middle'
   ) => Promise<void>;
   normalizedDragAt: (params: NormalizedDragParams) => Promise<void>;
+  normalizedPathDragAt: (params: NormalizedPathDragParams) => Promise<void>;
   orientationMarkers: {
     topMid: Locator;
     leftMid: Locator;
@@ -81,6 +88,7 @@ export interface IViewportPageObject {
   };
   pane: Locator;
   svg: (innerElement?: SvgInnerElement) => Locator;
+  getSvgAnnotationStatTextLines: (uid: string) => Locator;
   navigationArrows: {
     locator: Locator;
     prev: {
@@ -297,6 +305,15 @@ export class ViewportPageObject {
           steps: params.config?.steps,
         });
       },
+      normalizedPathDragAt: async (params: NormalizedPathDragParams) => {
+        await simulateNormalizedPathDragOnElement({
+          locator: viewport,
+          path: params.path,
+          button: params.config?.button,
+          delay: params.config?.delay,
+          steps: params.config?.steps,
+        });
+      },
       orientationMarkers: this.getOrientationMarkers(viewport),
       overlayText: this.getOverlayText(viewport),
       overlayMenu: await this.getOverlayMenu(viewport),
@@ -304,6 +321,11 @@ export class ViewportPageObject {
       svg: (innerElement?: SvgInnerElement) => {
         return this.getSvg(viewport, innerElement);
       },
+      getSvgAnnotationStatTextLines: (uid: string) => {
+        return this.getSvg(viewport)
+          .locator(`g[data-annotation-uid="${uid}"]`)
+          .locator('tspan');
+      },
       navigationArrows: this.getNavigationArrows(viewport),
       sliceNavigation: this.getSliceNavigation(viewport),
       magnifyGlass: new MagnifyGlassPageObject(this.page, viewport),