tests(Playwright): Full implementation of Page Object Models (POMs) to Playwright tests (#5608)

tests/Scoord3dProbe.spec.ts

@@ -21,17 +21,20 @@ test.beforeEach(async ({ page }) => {
 
 test('should hydrate SCOORD3D probe measurements correctly', async ({
   page,
+  DOMOverlayPageObject,
+  leftPanelPageObject,
+  rightPanelPageObject,
   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();
+  await rightPanelPageObject.toggle();
+  await rightPanelPageObject.measurementsPanel.select();
 
   // Double-click on the study browser thumbnail to load the SR
-  await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
+  await leftPanelPageObject.loadSeriesByModality('SR');
   await page.waitForTimeout(2000);
 
   // Wait for the SR to load and stabilize before taking screenshot
@@ -68,10 +71,13 @@ test('should hydrate SCOORD3D probe measurements correctly', async ({
   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 });
+  await DOMOverlayPageObject.viewport.segmentationHydration.yes.button.waitFor({
+    state: 'visible',
+    timeout: 15000,
+  });
 
   // Click the hydrate button to load the SCOORD3D probe measurements
-  await page.getByTestId('yes-hydrate-btn').click();
+  await DOMOverlayPageObject.viewport.segmentationHydration.yes.click();
 
   // Wait for hydration to complete and rendering to stabilize
   await page.waitForTimeout(3000);
@@ -86,14 +92,17 @@ test('should hydrate SCOORD3D probe measurements correctly', async ({
   // Verify the measurements list has the correct probe measurements
   const measurementRows = page.getByTestId('data-row');
   const rowCount = await measurementRows.count();
-  expect(rowCount).toBeGreaterThan(0);
+  expect(await rightPanelPageObject.measurementsPanel.panel.getMeasurementCount()).toBeGreaterThan(
+    0
+  );
 
   // Verify that the measurements are probe measurements (not other types)
   for (let i = 0; i < rowCount; i++) {
-    const row = measurementRows.nth(i);
-    const rowText = await row.textContent();
+    const measurementText = await rightPanelPageObject.measurementsPanel.panel
+      .nthMeasurement(i)
+      .locator.textContent();
     // Probe measurements should be present, verify they're not other measurement types
-    expect(rowText).toBeTruthy();
+    expect(measurementText).toBeTruthy();
   }
 
   // Test jumping to a specific measurement by scrolling and clicking
@@ -117,7 +126,7 @@ test('should hydrate SCOORD3D probe measurements correctly', async ({
   });
 
   // Click on a data row to jump to the measurement
-  await page.getByTestId('data-row').first().click();
+  await rightPanelPageObject.measurementsPanel.panel.nthMeasurement(0).click();
 
   // Take screenshot showing the jump to measurement functionality - use viewport locator
   await checkForScreenshot(
@@ -129,20 +138,26 @@ test('should hydrate SCOORD3D probe measurements correctly', async ({
 
 test('should display SCOORD3D probe measurements correctly', async ({
   page,
+  DOMOverlayPageObject,
+  leftPanelPageObject,
+  rightPanelPageObject,
   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 rightPanelPageObject.toggle();
+  await rightPanelPageObject.measurementsPanel.select();
+  await leftPanelPageObject.loadSeriesByModality('SR');
   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();
+  await DOMOverlayPageObject.viewport.segmentationHydration.yes.button.waitFor({
+    state: 'visible',
+    timeout: 15000,
+  });
+  await DOMOverlayPageObject.viewport.segmentationHydration.yes.click();
   await page.waitForTimeout(2000);
 
   // Zoom to show the probe measurements clearly
@@ -175,15 +190,15 @@ test('should display SCOORD3D probe measurements correctly', async ({
   );
 
   // Verify the measurements list has the correct probe measurements and not others
-  const measurementRows = page.getByTestId('data-row');
-  const rowCount = await measurementRows.count();
+  const rowCount = await rightPanelPageObject.measurementsPanel.panel.getMeasurementCount();
   expect(rowCount).toBeGreaterThan(0);
 
   // Verify that the measurements are probe measurements (not other types like rectangle)
   for (let i = 0; i < rowCount; i++) {
-    const row = measurementRows.nth(i);
-    const rowText = await row.textContent();
+    const measurementText = await rightPanelPageObject.measurementsPanel.panel
+      .nthMeasurement(i)
+      .locator.textContent();
     // Probe measurements should be present, verify they're not other measurement types
-    expect(rowText).toBeTruthy();
+    expect(measurementText).toBeTruthy();
   }
 });