feat(test): Playwright testing integration (#4146)

tests/MPR.spec.ts

@@ -0,0 +1,16 @@
+import { test } from '@playwright/test';
+import { visitStudy, checkForScreenshot, screenShotPaths } from './utils/index';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '2.16.840.1.114362.1.11972228.22789312658.616067305.306.2';
+  const mode = 'Basic Viewer';
+  await visitStudy(page, studyInstanceUID, mode);
+});
+
+test.describe('MPR Test', async () => {
+  test('should render MPR correctly.', async ({ page }) => {
+    await page.getByTestId('Layout').click();
+    await page.locator('div').filter({ hasText: /^MPR$/ }).first().click();
+    await checkForScreenshot(page, page, screenShotPaths.mpr.mprDisplayedCorrectly);
+  });
+});

tests/utils/checkForScreenshot.ts

@@ -0,0 +1,35 @@
+import { expect } from '@playwright/test';
+import { Locator, Page } from 'playwright';
+
+/**
+ * @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: Page,
+  locator: Locator | Page,
+  screenshotPath: string,
+  attempts = 10,
+  delay = 100
+) => {
+  await page.waitForLoadState('networkidle');
+  for (let i = 1; i < attempts; i++) {
+    try {
+      await expect(locator).toHaveScreenshot(screenshotPath, {
+        maxDiffPixelRatio: 0.1,
+      });
+      return true;
+    } catch (error) {
+      if (i === attempts) {
+        throw new Error('Screenshot does not match.');
+      }
+      await new Promise(resolve => setTimeout(resolve, delay));
+    }
+  }
+};
+
+export { checkForScreenshot };

tests/utils/index.ts

@@ -0,0 +1,6 @@
+import { visitStudy } from './visitStudy';
+import { checkForScreenshot } from './checkForScreenshot';
+import { screenShotPaths } from './screenShotPaths';
+import { simulateDrag } from './simulateDrag';
+
+export { visitStudy, checkForScreenshot, screenShotPaths, simulateDrag };

tests/utils/screenShotPaths.ts

@@ -0,0 +1,10 @@
+/**
+ * Paths to the screenshots of the tests.
+ */
+const screenShotPaths = {
+  mpr: {
+    mprDisplayedCorrectly: 'mprDisplayedCorrectly.png',
+  },
+};
+
+export { screenShotPaths };

tests/utils/simulateDrag.ts

@@ -0,0 +1,29 @@
+import { Locator, Page } from 'playwright';
+
+/**
+ *
+ * @param page - The page to simulate the drag on
+ * @param locator - The locator of the element to perform the drag on
+ */
+
+export async function simulateDrag(page: Page, locator: Locator) {
+  const box = await locator.boundingBox();
+  if (!box) {
+    throw new Error('Element is not visible');
+  }
+  const { x, y, width, height } = box;
+  const centerX = x + width / 2;
+  const centerY = y + height / 2;
+
+  // Calculate the maximum possible movement distances within the element's bounds
+  const maxMoveX = Math.min(100, x + width - centerX);
+  const maxMoveY = Math.min(100, y + height - centerY);
+
+  const newX = centerX + maxMoveX;
+  const newY = centerY + maxMoveY;
+
+  await page.mouse.move(centerX, centerY);
+  await page.mouse.down();
+  await page.mouse.move(newX, newY);
+  await page.mouse.up();
+}

tests/utils/visitStudy.ts

@@ -0,0 +1,16 @@
+import { Page } from '@playwright/test';
+
+/**
+ * Visit the study
+ * @param page - The page to interact with
+ * @param title - The study instance UID of the study to visit
+ * @param mode - The mode to visit the study in
+ */
+export async function visitStudy(page: Page, studyInstanceUID: string, mode: string) {
+  await page.goto('/?resultsPerPage=100');
+  await page.getByTestId('confirm-and-hide-button').click();
+  await page.getByTestId(studyInstanceUID).click();
+  await page.getByRole('button', { name: mode }).click();
+  await page.waitForLoadState('domcontentloaded');
+  await page.waitForLoadState('networkidle');
+}