tests(Playwright): Introduction of Page Object Models (POMs) to Playwright tests (#5557)

tests/ScoordRectangle.spec.ts

@@ -1,17 +1,15 @@
-import { test, expect } from 'playwright-test-coverage';
-import { visitStudy, checkForScreenshot, screenShotPaths } from './utils';
-import { viewportLocator } from './utils/locators';
+import { checkForScreenshot, expect, screenShotPaths, test, visitStudy } from './utils';
 
 test.beforeEach(async ({ page }) => {
   const studyInstanceUID = '1.2.840.113654.2.55.242841386983064378162007136685545369722';
   const mode = 'viewer';
-  
+
   await visitStudy(page, studyInstanceUID, mode, 5000);
-  
+
   // Log the actual URL that was loaded
   const currentUrl = page.url();
   console.log(`✅ Actual page URL: ${currentUrl}\n`);
-  
+
   // Remove any webpack dev server overlays that might be blocking interactions
   await page.evaluate(() => {
     const overlay = document.getElementById('webpack-dev-server-client-overlay');
@@ -22,23 +20,30 @@ test.beforeEach(async ({ page }) => {
 });
 
 //
-test('should hydrate SCOORD rectangle measurements correctly', async ({ page }) => {
+test('should hydrate SCOORD rectangle measurements correctly', async ({
+  page,
+  viewportPageObject,
+}) => {
   // Wait for the side panel to be visible and clickable
   await page.waitForTimeout(3000);
-  
+
   // Navigate to the tracked measurements panel
   await page.getByTestId('side-panel-header-right').click({ timeout: 15000 });
   await page.getByTestId('trackedMeasurements-btn').click();
-  
+
   // Double-click on the study browser thumbnail to load the SR
   await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
   await page.waitForTimeout(2000);
-  
+
   // Wait for the SR to load and stabilize before taking screenshot
   await page.waitForTimeout(1000);
-  
+
   // Take screenshot before hydration - use viewport locator instead of full page
-  await checkForScreenshot(page, viewportLocator({ page, viewportId: 'default' }), screenShotPaths.scoordRectangle.scoordRectanglePreHydration);
+  await checkForScreenshot(
+    page,
+    viewportPageObject.active.pane,
+    screenShotPaths.scoordRectangle.scoordRectanglePreHydration
+  );
 
   // Zoom in to better see the measurements
   await page.evaluate(() => {
@@ -59,27 +64,31 @@ test('should hydrate SCOORD rectangle measurements correctly', async ({ page })
       viewport.render();
     }
   });
-  
+
   // Wait for rendering to complete
   await page.waitForTimeout(1000);
 
   // Wait for the hydrate button to be visible and clickable
   await page.getByTestId('yes-hydrate-btn').waitFor({ state: 'visible', timeout: 15000 });
-  
+
   // Click the hydrate button to load the SCOORD rectangle measurements
   await page.getByTestId('yes-hydrate-btn').click();
-  
+
   // Wait for hydration to complete and rendering to stabilize
   await page.waitForTimeout(3000);
-  
+
   // Take screenshot after hydration showing the rectangle measurements - use viewport locator
-  await checkForScreenshot(page, viewportLocator({ page, viewportId: 'default' }), screenShotPaths.scoordRectangle.scoordRectanglePostHydration);
-  
+  await checkForScreenshot(
+    page,
+    viewportPageObject.active.pane,
+    screenShotPaths.scoordRectangle.scoordRectanglePostHydration
+  );
+
   // Verify the measurements list has the correct rectangle measurements
   const measurementRows = page.getByTestId('data-row');
   const rowCount = await measurementRows.count();
   expect(rowCount).toBeGreaterThan(0);
-  
+
   // Verify that the measurements are rectangle measurements (not other types)
   for (let i = 0; i < rowCount; i++) {
     const row = measurementRows.nth(i);
@@ -112,19 +121,26 @@ test('should hydrate SCOORD rectangle measurements correctly', async ({ page })
   await page.getByTestId('data-row').first().click();
 
   // Take screenshot showing the jump to measurement functionality - use viewport locator
-  await checkForScreenshot(page, viewportLocator({ page, viewportId: 'default' }), screenShotPaths.scoordRectangle.scoordRectangleJumpToMeasurement);
+  await checkForScreenshot(
+    page,
+    viewportPageObject.active.pane,
+    screenShotPaths.scoordRectangle.scoordRectangleJumpToMeasurement
+  );
 });
 
-test('should display SCOORD rectangle measurements correctly', async ({ page }) => {
+test('should display SCOORD rectangle measurements correctly', async ({
+  page,
+  viewportPageObject,
+}) => {
   // Wait for the side panel to be visible and clickable
   await page.waitForTimeout(3000);
-  
+
   // First hydrate the SR to load the measurements
   await page.getByTestId('side-panel-header-right').click({ timeout: 15000 });
   await page.getByTestId('trackedMeasurements-btn').click();
   await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
   await page.waitForTimeout(2000);
-  
+
   // Wait for the hydrate button to be visible and clickable
   await page.getByTestId('yes-hydrate-btn').waitFor({ state: 'visible', timeout: 15000 });
   await page.getByTestId('yes-hydrate-btn').click();
@@ -148,18 +164,22 @@ test('should display SCOORD rectangle measurements correctly', async ({ page })
       viewport.render();
     }
   });
-  
+
   // Wait for rendering to complete before taking screenshot
   await page.waitForTimeout(2000);
 
   // Take screenshot showing the SCOORD rectangle measurements rendered correctly - use viewport locator
-  await checkForScreenshot(page, viewportLocator({ page, viewportId: 'default' }), screenShotPaths.scoordRectangle.scoordRectangleDisplayedCorrectly);
-  
+  await checkForScreenshot(
+    page,
+    viewportPageObject.active.pane,
+    screenShotPaths.scoordRectangle.scoordRectangleDisplayedCorrectly
+  );
+
   // Verify the measurements list has the correct rectangle measurements and not others
   const measurementRows = page.getByTestId('data-row');
   const rowCount = await measurementRows.count();
   expect(rowCount).toBeGreaterThan(0);
-  
+
   // Verify that the measurements are rectangle measurements (not other types like probe)
   for (let i = 0; i < rowCount; i++) {
     const row = measurementRows.nth(i);