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>

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

@@ -182,6 +182,7 @@ const DataRowComponent = React.forwardRef<HTMLDivElement, DataRowProps>(
           <div
             key={`empty-${indent}`}
             className="h-2"
+            data-cy="data-row-detail-line-empty"
           ></div>
         );
       }
@@ -190,6 +191,7 @@ const DataRowComponent = React.forwardRef<HTMLDivElement, DataRowProps>(
         <div
           key={cleanText}
           className="whitespace-pre-wrap"
+          data-cy="data-row-detail-line"
         >
           {indentation}
           <span className="font-medium">{cleanText}</span>
@@ -197,14 +199,17 @@ const DataRowComponent = React.forwardRef<HTMLDivElement, DataRowProps>(
       );
     };
 
-    const renderDetails = (details: string[]) => {
+    const renderDetails = (details: string[], variant: 'primary' | 'secondary') => {
       const visibleLines = details.slice(0, 4);
       const hiddenLines = details.slice(4);
 
       return (
         <Tooltip>
           <TooltipTrigger asChild>
-            <div className="cursor-help">
+            <div
+              className="cursor-help"
+              data-cy={`data-row-details-${variant}`}
+            >
               <div className="flex flex-col space-y-1">
                 {visibleLines.map((line, lineIndex) =>
                   renderDetailText(line, line.startsWith('  ') ? 1 : 0)
@@ -418,12 +423,15 @@ const DataRowComponent = React.forwardRef<HTMLDivElement, DataRowProps>(
 
         {/* Details Section */}
         {details && (details.primary?.length > 0 || details.secondary?.length > 0) && (
-          <div className="ml-7 px-2 py-2">
+          <div
+            className="ml-7 px-2 py-2"
+            data-cy="data-row-details"
+          >
             <div className="text-secondary-foreground flex items-center gap-1 text-base leading-normal">
-              {details.primary?.length > 0 && renderDetails(details.primary)}
+              {details.primary?.length > 0 && renderDetails(details.primary, 'primary')}
               {details.secondary?.length > 0 && (
                 <div className="text-muted-foreground ml-auto text-sm">
-                  {renderDetails(details.secondary)}
+                  {renderDetails(details.secondary, 'secondary')}
                 </div>
               )}
             </div>

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

@@ -107,26 +107,28 @@ const Row = ({ item, index }: RowProps) => {
 
   const { uid } = item;
   return (
-    <DataRow
-      key={item.uid}
-      description={item.label}
-      number={index + 1}
-      title={item.label}
-      colorHex={item.colorHex}
-      isSelected={item.isSelected}
-      details={item.displayText}
-      onDelete={e => onAction(e, 'removeMeasurement', uid)}
-      onSelect={e => onAction(e, 'jumpToMeasurement', uid)}
-      onRename={e => onAction(e, 'renameMeasurement', uid)}
-      onToggleVisibility={e => onAction(e, 'toggleVisibilityMeasurement', uid)}
-      onToggleLocked={e => onAction(e, 'toggleLockMeasurement', uid)}
-      onColor={e => onAction(e, 'changeMeasurementColor', uid)}
-      disableEditing={disableEditing}
-      isVisible={item.isVisible}
-      isLocked={item.isLocked}
-    >
-      {item.isUnmapped && <DataRow.Status.Warning tooltip={item.statusTooltip} />}
-    </DataRow>
+    <div data-cy={`measurement-table-row-${index}`}>
+      <DataRow
+        key={item.uid}
+        description={item.label}
+        number={index + 1}
+        title={item.label}
+        colorHex={item.colorHex}
+        isSelected={item.isSelected}
+        details={item.displayText}
+        onDelete={e => onAction(e, 'removeMeasurement', uid)}
+        onSelect={e => onAction(e, 'jumpToMeasurement', uid)}
+        onRename={e => onAction(e, 'renameMeasurement', uid)}
+        onToggleVisibility={e => onAction(e, 'toggleVisibilityMeasurement', uid)}
+        onToggleLocked={e => onAction(e, 'toggleLockMeasurement', uid)}
+        onColor={e => onAction(e, 'changeMeasurementColor', uid)}
+        disableEditing={disableEditing}
+        isVisible={item.isVisible}
+        isLocked={item.isLocked}
+      >
+        {item.isUnmapped && <DataRow.Status.Warning tooltip={item.statusTooltip} />}
+      </DataRow>
+    </div>
   );
 };