refactor(tests): update viewport page object usage to async and update all effected tests (#5927)

tests/ContourSegmentToggleVisibility.spec.ts

@@ -2,46 +2,48 @@ import { expect, test, visitStudy, getSvgPath, navigateWithViewportArrow } from
 
 const studyInstanceUID = '1.2.840.113619.2.290.3.3767434740.226.1600859119.501';
 
-test.beforeEach(async ({
-  page,
-  leftPanelPageObject,
-  DOMOverlayPageObject,
-  rightPanelPageObject
-}) => {
-  const mode = 'segmentation';
-  await visitStudy(page, studyInstanceUID, mode, 2000);
-  await leftPanelPageObject.loadSeriesByModality('RTSTRUCT');
-  await page.waitForTimeout(5000);
-  await DOMOverlayPageObject.viewport.segmentationHydration.yes.click();
-  await rightPanelPageObject.contourSegmentationPanel.panel.nthSegment(0).click();
-  await page.waitForTimeout(1000);
-});
+test.beforeEach(
+  async ({ page, leftPanelPageObject, DOMOverlayPageObject, rightPanelPageObject }) => {
+    const mode = 'segmentation';
+    await visitStudy(page, studyInstanceUID, mode, 2000);
+    await leftPanelPageObject.loadSeriesByModality('RTSTRUCT');
+    await page.waitForTimeout(5000);
+    await DOMOverlayPageObject.viewport.segmentationHydration.yes.click();
+    await rightPanelPageObject.contourSegmentationPanel.panel.nthSegment(0).click();
+    await page.waitForTimeout(1000);
+  }
+);
 
 test('should toggle all segments visibility - on/off', async ({
   rightPanelPageObject,
   viewportPageObject,
 }) => {
-  const svgPathLocator = viewportPageObject.getById('default').svg('path');
+  const svgPathLocator = (await viewportPageObject.getById('default')).svg('path');
 
   await expect(svgPathLocator, 'Expected first segment SVG paths to be visible').toHaveCount(2);
 
   await rightPanelPageObject.contourSegmentationPanel.segmentsVisibilityToggle.click();
 
-  await expect(svgPathLocator, 'Expected no SVG paths after toggling all visibility off').toHaveCount(0);
+  await expect(
+    svgPathLocator,
+    'Expected no SVG paths after toggling all visibility off'
+  ).toHaveCount(0);
 
   await rightPanelPageObject.contourSegmentationPanel.segmentsVisibilityToggle.click();
 
-  await expect(svgPathLocator, 'Expected SVG path count to match initial after toggling all back on').toHaveCount(2);
+  await expect(
+    svgPathLocator,
+    'Expected SVG path count to match initial after toggling all back on'
+  ).toHaveCount(2);
 });
 
-
 test('when segment visibility is off it is not shown when clicked on', async ({
   rightPanelPageObject,
   viewportPageObject,
 }) => {
   await rightPanelPageObject.contourSegmentationPanel.segmentsVisibilityToggle.click();
 
-  const svgPathLocator = viewportPageObject.getById('default').svg('path');
+  const svgPathLocator = (await viewportPageObject.getById('default')).svg('path');
   await expect(svgPathLocator, 'All segments to be hidden').toHaveCount(0);
 
   await rightPanelPageObject.contourSegmentationPanel.panel.nthSegment(1).click();
@@ -51,14 +53,13 @@ test('when segment visibility is off it is not shown when clicked on', async ({
   await expect(svgPathLocator, 'All segments to remain hidden').toHaveCount(0);
 });
 
-
 test('when segment visibility is off it is not shown when viewport contour navigation is used', async ({
   rightPanelPageObject,
   viewportPageObject,
 }) => {
   await rightPanelPageObject.contourSegmentationPanel.segmentsVisibilityToggle.click();
 
-  const svgPathLocator = viewportPageObject.getById('default').svg('path');
+  const svgPathLocator = (await viewportPageObject.getById('default')).svg('path');
   await expect(svgPathLocator, 'All segments to be hidden').toHaveCount(0);
 
   await navigateWithViewportArrow(viewportPageObject, 'next');
@@ -71,7 +72,7 @@ test('when segment visibility is off it is not shown when viewport contour navig
 test('should restore svg paths when segment visibility is toggled on/off', async ({
   rightPanelPageObject,
   viewportPageObject,
-  page
+  page,
 }) => {
   await rightPanelPageObject.contourSegmentationPanel.segmentsVisibilityToggle.click();
 
@@ -81,11 +82,16 @@ test('should restore svg paths when segment visibility is toggled on/off', async
   expect(svgPathBefore, 'Expected a visible SVG path for segment 0').not.toBeNull();
 
   await segment0.toggleVisibility();
-  await expect(viewportPageObject.getById('default').svg('path'), 'No segment to be displayed').toHaveCount(0);
+  await expect(
+    (await viewportPageObject.getById('default')).svg('path'),
+    'No segment to be displayed'
+  ).toHaveCount(0);
 
   await segment0.toggleVisibility();
   const svgPathAfter = await getSvgPath(viewportPageObject);
-  expect(svgPathAfter, 'Expected SVG path to be restored after toggling visibility back on').toBe(svgPathBefore);
+  expect(svgPathAfter, 'Expected SVG path to be restored after toggling visibility back on').toBe(
+    svgPathBefore
+  );
 });
 
 test('should toggle an individual segment visibility - on/off', async ({
@@ -94,7 +100,7 @@ test('should toggle an individual segment visibility - on/off', async ({
 }) => {
   // Establish known state by selecting segment 1
   await rightPanelPageObject.contourSegmentationPanel.panel.nthSegment(1).click();
-  const svgPathLocator = viewportPageObject.getById('default').svg('path');
+  const svgPathLocator = (await viewportPageObject.getById('default')).svg('path');
   await expect(svgPathLocator, 'Expected first segment SVG paths to be visible').toHaveCount(4);
 
   const segment0 = rightPanelPageObject.contourSegmentationPanel.panel.nthSegment(0);