test(e2e): replace waitForVolumeLoad with viewport render waits (#6000)

tests/3DFourUp.spec.ts

@@ -5,6 +5,7 @@ import {
   screenShotPaths,
   test,
   visitStudy,
+  waitForViewportsRendered,
 } from './utils';
 
 test.beforeEach(async ({ page }) => {
@@ -19,7 +20,7 @@ test.describe('3D four up Test', async () => {
 
     await attemptAction(() => reduce3DViewportSize(page), 10, 100);
 
-    await mainToolbarPageObject.waitForVolumeLoad();
+    await waitForViewportsRendered(page);
 
     await checkForScreenshot(
       page,

tests/3DMain.spec.ts

@@ -5,6 +5,7 @@ import {
   screenShotPaths,
   test,
   visitStudy,
+  waitForViewportsRendered,
 } from './utils';
 
 test.beforeEach(async ({ page }) => {
@@ -17,7 +18,7 @@ test.describe('3D main Test', async () => {
   test('should render 3D main correctly.', async ({ page, mainToolbarPageObject }) => {
     await mainToolbarPageObject.layoutSelection.threeDMain.click();
     await attemptAction(() => reduce3DViewportSize(page), 10, 100);
-    await mainToolbarPageObject.waitForVolumeLoad();
+    await waitForViewportsRendered(page);
     await checkForScreenshot(page, page, screenShotPaths.threeDMain.threeDMainDisplayedCorrectly);
   });
 });

tests/3DOnly.spec.ts

@@ -5,6 +5,7 @@ import {
   screenShotPaths,
   test,
   visitStudy,
+  waitForViewportsRendered,
 } from './utils';
 
 test.beforeEach(async ({ page }) => {
@@ -17,7 +18,7 @@ test.describe('3D only Test', async () => {
   test('should render 3D only correctly.', async ({ page, mainToolbarPageObject }) => {
     await mainToolbarPageObject.layoutSelection.threeDOnly.click();
     await attemptAction(() => reduce3DViewportSize(page), 10, 100);
-    await mainToolbarPageObject.waitForVolumeLoad();
+    await waitForViewportsRendered(page);
     // Use a 4 percent diff pixel ratio to account for slight color differences in the 3D viewport
     await checkForScreenshot({
       page,

tests/3DPrimary.spec.ts

@@ -5,6 +5,7 @@ import {
   screenShotPaths,
   test,
   visitStudy,
+  waitForViewportsRendered,
 } from './utils';
 
 test.beforeEach(async ({ page }) => {
@@ -18,7 +19,7 @@ test.describe('3D primary Test', async () => {
     await mainToolbarPageObject.layoutSelection.threeDPrimary.click();
 
     await attemptAction(() => reduce3DViewportSize(page), 10, 100);
-    await mainToolbarPageObject.waitForVolumeLoad();
+    await waitForViewportsRendered(page);
     await checkForScreenshot(
       page,
       page,

tests/ArrowAnnotate.spec.ts

@@ -1,4 +1,10 @@
-import { checkForScreenshot, screenShotPaths, test, visitStudy } from './utils';
+import {
+  checkForScreenshot,
+  screenShotPaths,
+  test,
+  visitStudy,
+  waitForViewportRenderCycle,
+} from './utils';
 
 test.beforeEach(async ({ page }) => {
   const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
@@ -27,9 +33,11 @@ test('should display the arrow tool and allow free-form text to be entered', asy
     'Ringo Starr was the drummer for The Beatles'
   );
 
+  const viewportRenderCycle = waitForViewportRenderCycle(page);
+
   await DOMOverlayPageObject.viewport.measurementTracking.confirm.click();
 
-  await mainToolbarPageObject.waitForVolumeLoad();
+  await viewportRenderCycle;
 
   await checkForScreenshot({
     page,
@@ -43,8 +51,6 @@ test('should display the arrow tool and allow free-form text to be entered', asy
 
   await DOMOverlayPageObject.dialog.input.fillAndSave('Neil Peart was the drummer for Rush');
 
-  await mainToolbarPageObject.waitForVolumeLoad();
-
   await checkForScreenshot({
     page,
     maxDiffPixelRatio: 0.0075,
@@ -57,8 +63,6 @@ test('should display the arrow tool and allow free-form text to be entered', asy
     .nthMeasurement(0)
     .actions.rename('Drummer annotation arrow');
 
-  await mainToolbarPageObject.waitForVolumeLoad();
-
   await checkForScreenshot({
     page,
     maxDiffPixelRatio: 0.0075,

tests/DicomTagBrowser.spec.ts

@@ -1,4 +1,11 @@
-import { checkForScreenshot, screenShotPaths, test, visitStudy, expect } from './utils';
+import {
+  checkForScreenshot,
+  screenShotPaths,
+  test,
+  visitStudy,
+  expect,
+  waitForViewportsRendered,
+} from './utils';
 import { assertBoundingBoxIsContainedWithin } from './utils/assertions';
 
 async function expectSelectedSeriesExistsInOptions(seriesSelect) {
@@ -23,7 +30,6 @@ test('should display the dicom tag browser', async ({ page, mainToolbarPageObjec
   const mode = 'viewer';
   await visitStudy(page, studyInstanceUID, mode, 2000);
 
-  await mainToolbarPageObject.waitForVolumeLoad();
   await mainToolbarPageObject.moreTools.tagBrowser.click();
   await checkForScreenshot(
     page,
@@ -40,7 +46,6 @@ test('should render the scroll bar with the correct look-and-feel', async ({
   const mode = 'viewer';
   await visitStudy(page, studyInstanceUID, mode, 2000);
 
-  await mainToolbarPageObject.waitForVolumeLoad();
   await mainToolbarPageObject.moreTools.tagBrowser.click();
   await checkForScreenshot({
     page,
@@ -58,7 +63,6 @@ test('should display the long series name properly within the series select butt
   const mode = 'viewer';
   await visitStudy(page, studyInstanceUID, mode, 2000);
 
-  await mainToolbarPageObject.waitForVolumeLoad();
   await mainToolbarPageObject.moreTools.tagBrowser.click();
   const dicomTagBrowser = DOMOverlayPageObject.dialog.dicomTagBrowser;
 
@@ -94,7 +98,8 @@ test('should open DICOM Tag Browser from empty viewport and show default series'
   // Switch to 3x3 layout
   await mainToolbarPageObject.layoutSelection.click();
   await page.getByTestId('Layout-2-2').click();
-  await mainToolbarPageObject.waitForVolumeLoad();
+
+  await waitForViewportsRendered(page);
 
   await viewportPageObject.getNthLocator(6).click();
 
@@ -119,7 +124,8 @@ test('should open DICOM Tag Browser with active viewport series when viewport ha
 
   await mainToolbarPageObject.layoutSelection.click();
   await page.getByTestId('Layout-2-2').click();
-  await mainToolbarPageObject.waitForVolumeLoad();
+
+  await waitForViewportsRendered(page);
 
   await (await viewportPageObject.getNth(2)).pane.click();
 

tests/Invert.spec.ts

@@ -1,4 +1,10 @@
-import { checkForScreenshot, screenShotPaths, test, visitStudy } from './utils';
+import {
+  checkForScreenshot,
+  screenShotPaths,
+  test,
+  visitStudy,
+  waitForViewportsRendered,
+} from './utils';
 
 test.beforeEach(async ({ page }) => {
   const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
@@ -8,6 +14,6 @@ test.beforeEach(async ({ page }) => {
 
 test('should invert the image', async ({ page, mainToolbarPageObject }) => {
   await mainToolbarPageObject.moreTools.invert.click();
-  await mainToolbarPageObject.waitForVolumeLoad();
+  await waitForViewportsRendered(page);
   await checkForScreenshot(page, page, screenShotPaths.invert.invertDisplayedCorrectly);
 });

tests/MPRThenRTOverlayNoHydration.spec.ts

@@ -1,4 +1,11 @@
-import { checkForScreenshot, screenShotPaths, test, visitStudy } from './utils';
+import {
+  checkForScreenshot,
+  screenShotPaths,
+  test,
+  visitStudy,
+  waitForViewportRenderCycle,
+  waitForViewportsRendered,
+} from './utils';
 import { assertNumberOfModalityLoadBadges } from './utils/assertions';
 
 test.beforeEach(async ({ page }) => {
@@ -14,7 +21,7 @@ test('should launch MPR with unhydrated RTSTRUCT chosen from the data overlay me
 }) => {
   await mainToolbarPageObject.layoutSelection.MPR.click();
 
-  await mainToolbarPageObject.waitForVolumeLoad();
+  await waitForViewportsRendered(page);
 
   await checkForScreenshot(
     page,
@@ -27,6 +34,8 @@ test('should launch MPR with unhydrated RTSTRUCT chosen from the data overlay me
   await sagittalViewport.pane.hover();
   const dataOverlayPageObject = sagittalViewport.overlayMenu.dataOverlay;
   await dataOverlayPageObject.toggle();
+
+  const viewportRenderCycle = waitForViewportRenderCycle(page);
   await dataOverlayPageObject.addSegmentation('ARIA RadOnc Structure Sets');
 
   // Hide the overlay menu.
@@ -35,7 +44,7 @@ test('should launch MPR with unhydrated RTSTRUCT chosen from the data overlay me
   // Adding an overlay should not show the LOAD button.
   await assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
 
-  await mainToolbarPageObject.waitForVolumeLoad();
+  await viewportRenderCycle;
 
   await checkForScreenshot({
     page,

tests/MultipleSegmentationDataOverlays.spec.ts

@@ -1,4 +1,11 @@
-import { checkForScreenshot, screenShotPaths, test, visitStudy } from './utils';
+import {
+  checkForScreenshot,
+  screenShotPaths,
+  test,
+  visitStudy,
+  waitForViewportRenderCycle,
+  waitForViewportsRendered,
+} from './utils';
 import { press } from './utils/keyboardUtils';
 import { assertNumberOfModalityLoadBadges } from './utils/assertions';
 
@@ -10,35 +17,35 @@ test.beforeEach(async ({ page }) => {
 
 test('should display multiple segmentation overlays (both SEG and RT)', async ({
   page,
-  mainToolbarPageObject,
   rightPanelPageObject,
   viewportPageObject,
 }) => {
   await rightPanelPageObject.toggle();
 
   // Add multiple segmentation overlays and ensure the overlay menu reflects this change.
-  const dataOverlayPageObject = (await viewportPageObject.getById('default')).overlayMenu.dataOverlay;
+  const dataOverlayPageObject = (await viewportPageObject.getById('default')).overlayMenu
+    .dataOverlay;
   await dataOverlayPageObject.toggle();
+  let viewportRenderCycle = waitForViewportRenderCycle(page);
   await dataOverlayPageObject.addSegmentation('2d-tta_nnU-Net_Segmentation');
-
+  await viewportRenderCycle;
-  await mainToolbarPageObject.waitForVolumeLoad();
 
   // Adding an overlay should not show the LOAD button.
-  assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
+  await assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
 
+  viewportRenderCycle = waitForViewportRenderCycle(page);
   await dataOverlayPageObject.addSegmentation('Segmentation');
-
+  await viewportRenderCycle;
-  await mainToolbarPageObject.waitForVolumeLoad();
 
   // Adding an overlay should not show the LOAD button.
-  assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
+  await assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
 
+  viewportRenderCycle = waitForViewportRenderCycle(page);
   await dataOverlayPageObject.addSegmentation('3d_lowres-tta_nnU-Net_Segmentation');
-
+  await viewportRenderCycle;
-  await mainToolbarPageObject.waitForVolumeLoad();
 
   // Adding an overlay should not show the LOAD button.
-  assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
+  await assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
 
   await checkForScreenshot({
     page,
@@ -59,7 +66,7 @@ test('should display multiple segmentation overlays (both SEG and RT)', async ({
   // Navigate to image 56.
   await press({ page, key: 'ArrowDown', nTimes: 55 });
 
-  await mainToolbarPageObject.waitForVolumeLoad();
+  await waitForViewportsRendered(page);
 
   await checkForScreenshot({
     page,
@@ -69,12 +76,12 @@ test('should display multiple segmentation overlays (both SEG and RT)', async ({
   // Now add the RT overlay
   await dataOverlayPageObject.toggle();
 
+  viewportRenderCycle = waitForViewportRenderCycle(page);
   await dataOverlayPageObject.addSegmentation('Series 3 - RTSTRUCT');
-
+  await viewportRenderCycle;
-  await mainToolbarPageObject.waitForVolumeLoad();
 
   // Adding an overlay should not show the LOAD button.
-  assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
+  await assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
 
   await checkForScreenshot({
     page,

tests/RTDataOverlayNoHydrationThenMPR.spec.ts

@@ -1,4 +1,11 @@
-import { checkForScreenshot, screenShotPaths, test, visitStudy } from './utils';
+import {
+  checkForScreenshot,
+  screenShotPaths,
+  test,
+  visitStudy,
+  waitForViewportRenderCycle,
+  waitForViewportsRendered,
+} from './utils';
 import { assertNumberOfModalityLoadBadges } from './utils/assertions';
 
 test.beforeEach(async ({ page }) => {
@@ -14,17 +21,19 @@ test('should launch MPR with unhydrated RTSTRUCT chosen from the data overlay me
   viewportPageObject,
 }) => {
   await rightPanelPageObject.toggle();
-  const dataOverlayPageObject = (await viewportPageObject.getById('default')).overlayMenu.dataOverlay;
+  const dataOverlayPageObject = (await viewportPageObject.getById('default')).overlayMenu
+    .dataOverlay;
   await dataOverlayPageObject.toggle();
+  const viewportRenderCycle = waitForViewportRenderCycle(page);
   await dataOverlayPageObject.addSegmentation('ARIA RadOnc Structure Sets');
 
   // Adding an overlay should not show the LOAD button.
-  assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
+  await assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
 
   // Hide the overlay menu.
   await dataOverlayPageObject.toggle();
 
-  await mainToolbarPageObject.waitForVolumeLoad();
+  await viewportRenderCycle;
 
   await checkForScreenshot(
     page,
@@ -34,7 +43,7 @@ test('should launch MPR with unhydrated RTSTRUCT chosen from the data overlay me
 
   await mainToolbarPageObject.layoutSelection.MPR.click();
 
-  await mainToolbarPageObject.waitForVolumeLoad();
+  await waitForViewportsRendered(page, { timeout: 40000 });
 
   await checkForScreenshot(
     page,
@@ -43,5 +52,5 @@ test('should launch MPR with unhydrated RTSTRUCT chosen from the data overlay me
   );
 
   // Adding an overlay should not show the LOAD button.
-  assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
+  await assertNumberOfModalityLoadBadges({ page, expectedCount: 0 });
 });

tests/mpr2.spec.ts

@@ -1,4 +1,10 @@
-import { test, visitStudy, checkForScreenshot, screenShotPaths } from './utils';
+import {
+  test,
+  visitStudy,
+  checkForScreenshot,
+  screenShotPaths,
+  waitForViewportsRendered,
+} from './utils';
 
 test.beforeEach(async ({ page }) => {
   const studyInstanceUID =
@@ -7,12 +13,7 @@ test.beforeEach(async ({ page }) => {
   await visitStudy(page, studyInstanceUID, mode, 10000);
 });
 
-test('should properly display MPR for MR', async ({
+test('should properly display MPR for MR', async ({ page, viewportPageObject }) => {
-  page,
-  mainToolbarPageObject,
-  viewportPageObject,
-}) => {
-  await mainToolbarPageObject.waitForVolumeLoad();
   await page.getByTestId('side-panel-header-right').click();
   // await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
   await checkForScreenshot({
@@ -43,6 +44,8 @@ test('should properly display MPR for MR', async ({
     }
   });
 
+  await waitForViewportsRendered(page);
+
   await checkForScreenshot({
     page,
     locator: viewportPageObject.grid,

tests/pages/MainToolbarPageObject.ts

@@ -52,7 +52,6 @@ export class MainToolbarPageObject {
           async click() {
             await layoutSelection.click();
             await button.click();
-            await self.waitForVolumeLoad();
           },
         };
       },
@@ -63,7 +62,6 @@ export class MainToolbarPageObject {
           async click() {
             await layoutSelection.click();
             await button.click();
-            await self.waitForVolumeLoad();
           },
         };
       },
@@ -74,7 +72,6 @@ export class MainToolbarPageObject {
           async click() {
             await layoutSelection.click();
             await button.click();
-            await self.waitForVolumeLoad();
           },
         };
       },
@@ -85,7 +82,6 @@ export class MainToolbarPageObject {
           async click() {
             await layoutSelection.click();
             await button.click();
-            await self.waitForVolumeLoad();
           },
         };
       },
@@ -96,7 +92,6 @@ export class MainToolbarPageObject {
           async click() {
             await layoutSelection.click();
             await button.click();
-            await self.waitForVolumeLoad();
           },
         };
       },