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

@@ -35,9 +35,10 @@ test.describe('3D four up SEG hydration', async () => {
       screenShotPaths.segHydrationFrom3DFourUp.threeDFourUpBeforeSEG
     );
 
+    let viewportRenderCycle = waitForViewportRenderCycle(page);
     await leftPanelPageObject.loadSeriesByDescription('SEG');
 
-    await waitForViewportsRendered(page);
+    await viewportRenderCycle;
 
     await checkForScreenshot(
       page,
@@ -49,7 +50,7 @@ test.describe('3D four up SEG hydration', async () => {
 
     // High rendered timeout needed: layout has 4 viewports (3D volume + MPR planes + SEG overlays),
     // which can take significantly longer time to fully render
-    const viewportRenderCycle = waitForViewportRenderCycle(page, { renderedTimeout: 180000 });
+    viewportRenderCycle = waitForViewportRenderCycle(page, { renderedTimeout: 180000 });
 
     await DOMOverlayPageObject.viewport.segmentationHydration.yes.click();