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/RTHydrationFromMPR.spec.ts

@@ -12,6 +12,7 @@ test('should hydrate an RTSTRUCT from MPR', async ({
   leftPanelPageObject,
   mainToolbarPageObject,
   rightPanelPageObject,
+  viewportPageObject,
 }) => {
   await rightPanelPageObject.toggle();
 
@@ -19,25 +20,37 @@ test('should hydrate an RTSTRUCT from MPR', async ({
 
   await page.waitForTimeout(10000);
 
-  await checkForScreenshot(page, page, screenShotPaths.rtHydrationFromMPR.mprBeforeRT);
+  await checkForScreenshot(
+    page,
+    viewportPageObject.grid,
+    screenShotPaths.rtHydrationFromMPR.mprBeforeRT
+  );
 
   await leftPanelPageObject.loadSeriesByModality('RTSTRUCT');
 
   await page.waitForTimeout(5000);
 
-  await checkForScreenshot(page, page, screenShotPaths.rtHydrationFromMPR.mprAfterRT);
+  await checkForScreenshot(
+    page,
+    viewportPageObject.grid,
+    screenShotPaths.rtHydrationFromMPR.mprAfterRT
+  );
 
   await DOMOverlayPageObject.viewport.segmentationHydration.yes.click();
 
   await page.waitForTimeout(5000);
 
-  await checkForScreenshot(page, page, screenShotPaths.rtHydrationFromMPR.mprAfterRTHydrated);
+  await checkForScreenshot(
+    page,
+    viewportPageObject.grid,
+    screenShotPaths.rtHydrationFromMPR.mprAfterRTHydrated
+  );
 
   await mainToolbarPageObject.layoutSelection.axialPrimary.click();
 
   await checkForScreenshot(
     page,
-    page,
+    viewportPageObject.grid,
     screenShotPaths.rtHydrationFromMPR.mprAfterRTHydratedAfterLayoutChange
   );
 });