test(playwright-integration): Improve checkForScreenshot util, Add volume example, and comment out webkit until proper support is added for SharedArrayBuffer

packages/docs/docs/contribute/playwright-tests.md

@@ -100,6 +100,7 @@ test.describe('Your Example Name', async () => {
     // Your test code here to add a measurement
     const locator = page.locator('.cornerstone-canvas');
     await checkForScreenshot(
+      page,
       locator,
       screenshotPath.your_example_name.measurementAdded
     );
@@ -133,6 +134,7 @@ test.describe('Basic Stack Manipulation', async () => {
     const locator = page.locator('.cornerstone-canvas');
     await simulateDrag(page, locator);
     await checkForScreenshot(
+      page,
       locator,
       screenShotPaths.stackManipulationTools.windowLevel
     );

playwright.config.ts

@@ -25,10 +25,12 @@ export default defineConfig({
       name: 'firefox',
       use: { ...devices['Desktop Firefox'], deviceScaleFactor: 1 },
     },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'], deviceScaleFactor: 1 },
-    },
+    // This is commented out until SharedArrayBuffer is enabled in WebKit
+    // See: https://github.com/microsoft/playwright/issues/14043
+    //{
+    //  name: 'webkit',
+    //  use: { ...devices['Desktop Safari'], deviceScaleFactor: 1 },
+    //},
   ],
   webServer: {
     command: 'yarn build-and-serve-static-examples',

tests/stackAPI.spec.js

@@ -13,51 +13,64 @@ test.describe('Stack Viewport API', async () => {
   test('should set VOI range correctly', async ({ page }) => {
     await page.getByRole('button', { name: 'Set VOI Range' }).click();
     const locator = page.locator('.cornerstone-canvas');
-    await checkForScreenshot(locator, screenShotPaths.stackAPI.setVoiRange);
+    await checkForScreenshot(
+      page,
+      locator,
+      screenShotPaths.stackAPI.setVoiRange
+    );
   });
   test('should move to next image', async ({ page }) => {
     await page.getByRole('button', { name: 'Next Image' }).click();
     const locator = page.locator('.cornerstone-canvas');
-    await checkForScreenshot(locator, screenShotPaths.stackAPI.nextImage);
+    await checkForScreenshot(page, locator, screenShotPaths.stackAPI.nextImage);
   });
   test('should move to previous image', async ({ page }) => {
     await page.getByRole('button', { name: 'Next Image' }).click();
     await page.getByRole('button', { name: 'Previous Image' }).click();
     const locator = page.locator('.cornerstone-canvas');
-    await checkForScreenshot(locator, screenShotPaths.stackAPI.previousImage);
+    await checkForScreenshot(
+      page,
+      locator,
+      screenShotPaths.stackAPI.previousImage
+    );
   });
   test('should flip horizontally ', async ({ page }) => {
     await page.getByRole('button', { name: 'Flip H' }).click();
     const locator = page.locator('.cornerstone-canvas');
-    await checkForScreenshot(locator, screenShotPaths.stackAPI.flipH);
+    await checkForScreenshot(page, locator, screenShotPaths.stackAPI.flipH);
   });
   test('should flip vertically ', async ({ page }) => {
     await page.getByRole('button', { name: 'Flip V' }).click();
     const locator = page.locator('.cornerstone-canvas');
-    await checkForScreenshot(locator, screenShotPaths.stackAPI.flipV);
+    await checkForScreenshot(page, locator, screenShotPaths.stackAPI.flipV);
   });
   test('should rotate absolute 150 degrees', async ({ page }) => {
     await page.getByRole('button', { name: 'Rotate Absolute 150' }).click();
     const locator = page.locator('.cornerstone-canvas');
     await checkForScreenshot(
+      page,
       locator,
       screenShotPaths.stackAPI.rotateAbsolute150
     );
   });
   test('should rotate delta 30 degrees', async ({ page }) => {
     await page.getByRole('button', { name: 'Rotate Delta 30' }).click();
     const locator = page.locator('.cornerstone-canvas');
-    await checkForScreenshot(locator, screenShotPaths.stackAPI.rotateDelta30);
+    await checkForScreenshot(
+      page,
+      locator,
+      screenShotPaths.stackAPI.rotateDelta30
+    );
   });
   test('should invert', async ({ page }) => {
     await page.getByRole('button', { name: 'Invert' }).click();
     const locator = page.locator('.cornerstone-canvas');
-    await checkForScreenshot(locator, screenShotPaths.stackAPI.invert);
+    await checkForScreenshot(page, locator, screenShotPaths.stackAPI.invert);
   });
   test('should apply colormap', async ({ page }) => {
     await page.getByRole('button', { name: 'Apply Colormap' }).click();
     const locator = page.locator('.cornerstone-canvas');
-    await checkForScreenshot(locator, screenShotPaths.stackAPI.colormap);
+    await checkForScreenshot(page, locator, screenShotPaths.stackAPI.colormap);
   });
 
   test('should reset', async ({ page }) => {
@@ -67,6 +80,10 @@ test.describe('Stack Viewport API', async () => {
     await page.getByRole('button', { name: 'Rotate Random' }).click();
     await page.getByRole('button', { name: 'Reset Viewport' }).click();
     const locator = page.locator('.cornerstone-canvas');
-    await checkForScreenshot(locator, screenShotPaths.stackAPI.resetViewport);
+    await checkForScreenshot(
+      page,
+      locator,
+      screenShotPaths.stackAPI.resetViewport
+    );
   });
 });

tests/stackBasic.spec.ts

@@ -14,6 +14,10 @@ test.describe('Basic Stack', async () => {
     page,
   }) => {
     const locator = page.locator('.cornerstone-canvas');
-    await checkForScreenshot(locator, screenShotPaths.stackBasic.viewport);
+    await checkForScreenshot(
+      page,
+      locator,
+      screenShotPaths.stackBasic.viewport
+    );
   });
 });

tests/stackManipulationTools.spec.js

@@ -18,6 +18,7 @@ test.describe('Basic Stack Manipulation', async () => {
     const locator = page.locator('.cornerstone-canvas');
     await simulateDrag(page, locator);
     await checkForScreenshot(
+      page,
       locator,
       screenShotPaths.stackManipulationTools.windowLevel
     );
@@ -29,6 +30,7 @@ test.describe('Basic Stack Manipulation', async () => {
     const locator = page.locator('.cornerstone-canvas');
     await simulateDrag(page, locator);
     await checkForScreenshot(
+      page,
       locator,
       screenShotPaths.stackManipulationTools.planarRotate
     );

tests/stackProperties.spec.js

@@ -14,6 +14,7 @@ test.describe('Stack Properties', async () => {
     await page.getByRole('button', { name: 'Next Image' }).click();
     const locator = page.locator('.cornerstone-canvas');
     await checkForScreenshot(
+      page,
       locator,
       screenShotPaths.stackProperties.nextImage
     );
@@ -24,6 +25,7 @@ test.describe('Stack Properties', async () => {
     await page.getByRole('button', { name: 'Previous Image' }).click();
     const locator = page.locator('.cornerstone-canvas');
     await checkForScreenshot(
+      page,
       locator,
       screenShotPaths.stackProperties.previousImage
     );
@@ -37,11 +39,13 @@ test.describe('Stack Properties', async () => {
       .click();
     const locator = page.locator('.cornerstone-canvas');
     await checkForScreenshot(
+      page,
       locator,
       screenShotPaths.stackProperties.propertiesAddedForCurrentImage
     );
     await page.getByRole('button', { name: 'Next Image' }).click();
     await checkForScreenshot(
+      page,
       locator,
       screenShotPaths.stackProperties.propertiesAreSameForNextImage
     );
@@ -60,11 +64,13 @@ test.describe('Stack Properties', async () => {
       .click();
     const locator = page.locator('.cornerstone-canvas');
     await checkForScreenshot(
+      page,
       locator,
       screenShotPaths.stackProperties.propertiesRemovedForCurrentImage
     );
     await page.getByRole('button', { name: 'Previous Image' }).click();
     await checkForScreenshot(
+      page,
       locator,
       screenShotPaths.stackProperties.propertiesAreSameForPreviousImage
     );
@@ -80,6 +86,7 @@ test.describe('Stack Properties', async () => {
       .click();
     const locator = page.locator('.cornerstone-canvas');
     await checkForScreenshot(
+      page,
       locator,
       screenShotPaths.stackProperties.resetToDefaultViewportProperties
     );
@@ -92,6 +99,7 @@ test.describe('Stack Properties', async () => {
     await page.getByRole('button', { name: 'Reset to metadata' }).click();
     const locator = page.locator('.cornerstone-canvas');
     await checkForScreenshot(
+      page,
       locator,
       screenShotPaths.stackProperties.resetMetadata
     );

tests/utils/checkForScreenshot.ts

@@ -1,19 +1,21 @@
 import { expect } from '@playwright/test';
 
 /**
- *
+ * @param page - The page to interact with
  * @param locator - The element to check for screenshot
  * @param screenshotPath - The path to save the screenshot
  * @param attempts - The number of attempts to check for screenshot
  * @param delay - The delay between attempts
  * @returns  True if the screenshot matches, otherwise throws an error
  */
 const checkForScreenshot = async (
+  page,
   locator,
   screenshotPath,
   attempts = 10,
   delay = 100
 ) => {
+  await page.waitForLoadState('networkidle');
   for (let i = 1; i < attempts; i++) {
     try {
       await expect(locator).toHaveScreenshot(screenshotPath, {

tests/utils/screenShotPaths.ts

@@ -33,6 +33,9 @@ const screenShotPaths = {
     resetToDefaultViewportProperties: 'resetToDefaultViewportProperties.png',
     resetMetadata: 'resetMetadata.png',
   },
+  volumeBasic: {
+    viewport: 'viewport.png',
+  },
 };
 
 export { screenShotPaths };

tests/volumeBasic.spec.js

@@ -0,0 +1,23 @@
+import { test } from '@playwright/test';
+import {
+  visitExample,
+  checkForScreenshot,
+  screenShotPaths,
+} from './utils/index';
+
+test.beforeEach(async ({ page }) => {
+  await visitExample(page, 'volumeBasic');
+});
+
+test.describe('Basic Volume', async () => {
+  test('should display a single DICOM series in a Volume viewport.', async ({
+    page,
+  }) => {
+    const locator = page.locator('.cornerstone-canvas');
+    await checkForScreenshot(
+      page,
+      locator,
+      screenShotPaths.volumeBasic.viewport
+    );
+  });
+});