diff --git a/tests/Angle.spec.ts b/tests/Angle.spec.ts new file mode 100644 index 00000000000..88ef1c4591a --- /dev/null +++ b/tests/Angle.spec.ts @@ -0,0 +1,33 @@ +import { test } from '@playwright/test'; +import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils'; + +test.beforeEach(async ({ page }) => { + const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5'; + const mode = 'Basic Viewer'; + await visitStudy(page, studyInstanceUID, mode, 2000); +}); + +test('should display the angle tool', async ({ page }) => { + await page.getByTestId('MoreTools-split-button-secondary').click(); + await page.getByTestId('Angle').click(); + const locator = page.getByTestId('viewport-pane').locator('canvas'); + await simulateClicksOnElement({ + locator, + points: [ + { + x: 550, + y: 200, + }, + { + x: 450, + y: 250, + }, + { + x: 550, + y: 300, + }, + ], + }); + await page.getByTestId('prompt-begin-tracking-yes-btn').click(); + await checkForScreenshot(page, page, screenShotPaths.angle.angleDisplayedCorrectly); +}); diff --git a/tests/Bidirectional.spec.ts b/tests/Bidirectional.spec.ts new file mode 100644 index 00000000000..68268480a69 --- /dev/null +++ b/tests/Bidirectional.spec.ts @@ -0,0 +1,34 @@ +import { test } from '@playwright/test'; +import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils'; + +test.beforeEach(async ({ page }) => { + const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5'; + const mode = 'Basic Viewer'; + await visitStudy(page, studyInstanceUID, mode, 2000); +}); + +test('should display the bidirectional tool', async ({ page }) => { + await page.getByTestId('MeasurementTools-split-button-secondary').click(); + await page.getByTestId('Bidirectional').click(); + const locator = page.getByTestId('viewport-pane').locator('canvas'); + + await simulateClicksOnElement({ + locator, + points: [ + { + x: 405, + y: 277, + }, + { + x: 515, + y: 339, + }, + ], + }); + await page.getByTestId('prompt-begin-tracking-yes-btn').click(); + await checkForScreenshot( + page, + page, + screenShotPaths.bidirectional.bidirectionalDisplayedCorrectly + ); +}); diff --git a/tests/Circle.spec.ts b/tests/Circle.spec.ts new file mode 100644 index 00000000000..c3505f5e01c --- /dev/null +++ b/tests/Circle.spec.ts @@ -0,0 +1,29 @@ +import { test } from '@playwright/test'; +import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils'; + +test.beforeEach(async ({ page }) => { + const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5'; + const mode = 'Basic Viewer'; + await visitStudy(page, studyInstanceUID, mode, 2000); +}); + +test('should display the circle tool', async ({ page }) => { + await page.getByTestId('MeasurementTools-split-button-secondary').click(); + await page.getByTestId('CircleROI').click(); + const locator = page.getByTestId('viewport-pane').locator('canvas'); + await simulateClicksOnElement({ + locator, + points: [ + { + x: 480, + y: 205, + }, + { + x: 488, + y: 247, + }, + ], + }); + await page.getByTestId('prompt-begin-tracking-yes-btn').click(); + await checkForScreenshot(page, page, screenShotPaths.circle.circleDisplayedCorrectly); +}); diff --git a/tests/CobbAngle.spec.ts b/tests/CobbAngle.spec.ts new file mode 100644 index 00000000000..d142535c294 --- /dev/null +++ b/tests/CobbAngle.spec.ts @@ -0,0 +1,37 @@ +import { test } from '@playwright/test'; +import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils'; + +test.beforeEach(async ({ page }) => { + const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5'; + const mode = 'Basic Viewer'; + await visitStudy(page, studyInstanceUID, mode, 2000); +}); + +test('should display the cobb angle tool', async ({ page }) => { + await page.getByTestId('MoreTools-split-button-secondary').click(); + await page.getByTestId('CobbAngle').click(); + const locator = page.getByTestId('viewport-pane').locator('canvas'); + await simulateClicksOnElement({ + locator, + points: [ + { + x: 515, + y: 212, + }, + { + x: 616, + y: 207, + }, + { + x: 527, + y: 293, + }, + { + x: 625, + y: 291, + }, + ], + }); + await page.getByTestId('prompt-begin-tracking-yes-btn').click(); + await checkForScreenshot(page, page, screenShotPaths.cobbangle.cobbangleDisplayedCorrectly); +}); diff --git a/tests/Ellipse.spec.ts b/tests/Ellipse.spec.ts new file mode 100644 index 00000000000..3dca6cdd355 --- /dev/null +++ b/tests/Ellipse.spec.ts @@ -0,0 +1,29 @@ +import { test } from '@playwright/test'; +import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils'; + +test.beforeEach(async ({ page }) => { + const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5'; + const mode = 'Basic Viewer'; + await visitStudy(page, studyInstanceUID, mode, 2000); +}); + +test('should display the ellipse tool', async ({ page }) => { + await page.getByTestId('MeasurementTools-split-button-secondary').click(); + await page.getByTestId('EllipticalROI').click(); + const locator = page.getByTestId('viewport-pane').locator('canvas'); + await simulateClicksOnElement({ + locator, + points: [ + { + x: 446, + y: 245, + }, + { + x: 508, + y: 281, + }, + ], + }); + await page.getByTestId('prompt-begin-tracking-yes-btn').click(); + await checkForScreenshot(page, page, screenShotPaths.ellipse.ellipseDisplayedCorrectly); +}); diff --git a/tests/Length.spec.ts b/tests/Length.spec.ts index 7a8e08ce984..8b6c51f301c 100644 --- a/tests/Length.spec.ts +++ b/tests/Length.spec.ts @@ -1,15 +1,28 @@ import { test } from '@playwright/test'; -import { visitStudy, checkForScreenshot, screenShotPaths, simulateDrag } from './utils'; +import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils'; test.beforeEach(async ({ page }) => { const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5'; const mode = 'Basic Viewer'; - await visitStudy(page, studyInstanceUID, mode); + await visitStudy(page, studyInstanceUID, mode, 2000); }); test('should display the length tool', async ({ page }) => { await page.getByTestId('MeasurementTools-split-button-primary').click(); - const locator = page.locator('.cornerstone-canvas'); - await simulateDrag(page, locator); + const locator = page.getByTestId('viewport-pane').locator('canvas'); + await simulateClicksOnElement({ + locator, + points: [ + { + x: 364, + y: 234, + }, + { + x: 544, + y: 232, + }, + ], + }); + await page.getByTestId('prompt-begin-tracking-yes-btn').click(); await checkForScreenshot(page, page, screenShotPaths.length.lengthDisplayedCorrectly); }); diff --git a/tests/Livewire.spec.ts b/tests/Livewire.spec.ts new file mode 100644 index 00000000000..dae68b4498f --- /dev/null +++ b/tests/Livewire.spec.ts @@ -0,0 +1,45 @@ +import { test } from '@playwright/test'; +import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils'; + +test.beforeEach(async ({ page }) => { + const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5'; + const mode = 'Basic Viewer'; + await visitStudy(page, studyInstanceUID, mode, 2000); +}); + +test('should display the livewire tool', async ({ page }) => { + await page.getByTestId('MeasurementTools-split-button-secondary').click(); + await page.getByTestId('LivewireContour').click(); + const locator = page.getByTestId('viewport-pane').locator('canvas'); + await simulateClicksOnElement({ + locator, + points: [ + { + x: 380, + y: 459, + }, + { + x: 420, + y: 396, + }, + { + x: 523, + y: 392, + }, + { + x: 581, + y: 447, + }, + { + x: 482, + y: 493, + }, + { + x: 383, + y: 461, + }, + ], + }); + await page.getByTestId('prompt-begin-tracking-yes-btn').click(); + await checkForScreenshot(page, page, screenShotPaths.livewire.livewireDisplayedCorrectly); +}); diff --git a/tests/MPR.spec.ts b/tests/MPR.spec.ts index 88afe61c8fc..57eb3068e07 100644 --- a/tests/MPR.spec.ts +++ b/tests/MPR.spec.ts @@ -4,7 +4,7 @@ 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); + await visitStudy(page, studyInstanceUID, mode, 2000); }); test.describe('MPR Test', async () => { diff --git a/tests/Probe.spec.ts b/tests/Probe.spec.ts new file mode 100644 index 00000000000..1a4fac22fec --- /dev/null +++ b/tests/Probe.spec.ts @@ -0,0 +1,25 @@ +import { test } from '@playwright/test'; +import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils'; + +test.beforeEach(async ({ page }) => { + const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5'; + const mode = 'Basic Viewer'; + await visitStudy(page, studyInstanceUID, mode, 2000); +}); + +test('should display the probe tool', async ({ page }) => { + await page.getByTestId('MoreTools-split-button-secondary').click(); + await page.getByTestId('Probe').click(); + const locator = page.getByTestId('viewport-pane').locator('canvas'); + await simulateClicksOnElement({ + locator, + points: [ + { + x: 550, + y: 200, + }, + ], + }); + await page.getByTestId('prompt-begin-tracking-yes-btn').click(); + await checkForScreenshot(page, page, screenShotPaths.probe.probeDisplayedCorrectly); +}); diff --git a/tests/Rectangle.spec.ts b/tests/Rectangle.spec.ts new file mode 100644 index 00000000000..904e27a3524 --- /dev/null +++ b/tests/Rectangle.spec.ts @@ -0,0 +1,29 @@ +import { test } from '@playwright/test'; +import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils'; + +test.beforeEach(async ({ page }) => { + const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5'; + const mode = 'Basic Viewer'; + await visitStudy(page, studyInstanceUID, mode, 2000); +}); + +test('should display the rectangle tool', async ({ page }) => { + await page.getByTestId('MeasurementTools-split-button-secondary').click(); + await page.getByTestId('RectangleROI').click(); + const locator = page.getByTestId('viewport-pane').locator('canvas'); + await simulateClicksOnElement({ + locator, + points: [ + { + x: 476, + y: 159, + }, + { + x: 591, + y: 217, + }, + ], + }); + await page.getByTestId('prompt-begin-tracking-yes-btn').click(); + await checkForScreenshot(page, page, screenShotPaths.rectangle.rectangleDisplayedCorrectly); +}); diff --git a/tests/Spline.spec.ts b/tests/Spline.spec.ts new file mode 100644 index 00000000000..acd4adf6a28 --- /dev/null +++ b/tests/Spline.spec.ts @@ -0,0 +1,45 @@ +import { test } from '@playwright/test'; +import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils'; + +test.beforeEach(async ({ page }) => { + const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5'; + const mode = 'Basic Viewer'; + await visitStudy(page, studyInstanceUID, mode, 2000); +}); + +test('should display the spline tool', async ({ page }) => { + await page.getByTestId('MeasurementTools-split-button-secondary').click(); + await page.getByTestId('SplineROI').click(); + const locator = page.getByTestId('viewport-pane').locator('canvas'); + await simulateClicksOnElement({ + locator, + points: [ + { + x: 380, + y: 459, + }, + { + x: 420, + y: 396, + }, + { + x: 523, + y: 392, + }, + { + x: 581, + y: 447, + }, + { + x: 482, + y: 493, + }, + { + x: 383, + y: 461, + }, + ], + }); + await page.getByTestId('prompt-begin-tracking-yes-btn').click(); + await checkForScreenshot(page, page, screenShotPaths.spline.splineDisplayedCorrectly); +}); diff --git a/tests/screenshots/chromium/Angle.spec.ts/angleDisplayedCorrectly.png b/tests/screenshots/chromium/Angle.spec.ts/angleDisplayedCorrectly.png new file mode 100644 index 00000000000..4e279090ce1 Binary files /dev/null and b/tests/screenshots/chromium/Angle.spec.ts/angleDisplayedCorrectly.png differ diff --git a/tests/screenshots/chromium/Bidirectional.spec.ts/bidirectionalDisplayedCorrectly.png b/tests/screenshots/chromium/Bidirectional.spec.ts/bidirectionalDisplayedCorrectly.png new file mode 100644 index 00000000000..6a0e8742c78 Binary files /dev/null and b/tests/screenshots/chromium/Bidirectional.spec.ts/bidirectionalDisplayedCorrectly.png differ diff --git a/tests/screenshots/chromium/Circle.spec.ts/circleDisplayedCorrectly.png b/tests/screenshots/chromium/Circle.spec.ts/circleDisplayedCorrectly.png new file mode 100644 index 00000000000..a19d65fa60b Binary files /dev/null and b/tests/screenshots/chromium/Circle.spec.ts/circleDisplayedCorrectly.png differ diff --git a/tests/screenshots/chromium/CobbAngle.spec.ts/cobbangleDisplayedCorrectly.png b/tests/screenshots/chromium/CobbAngle.spec.ts/cobbangleDisplayedCorrectly.png new file mode 100644 index 00000000000..1e457ea099e Binary files /dev/null and b/tests/screenshots/chromium/CobbAngle.spec.ts/cobbangleDisplayedCorrectly.png differ diff --git a/tests/screenshots/chromium/Ellipse.spec.ts/ellipseDisplayedCorrectly.png b/tests/screenshots/chromium/Ellipse.spec.ts/ellipseDisplayedCorrectly.png new file mode 100644 index 00000000000..a1bc4b7c446 Binary files /dev/null and b/tests/screenshots/chromium/Ellipse.spec.ts/ellipseDisplayedCorrectly.png differ diff --git a/tests/screenshots/chromium/Length.spec.ts/lengthDisplayedCorrectly.png b/tests/screenshots/chromium/Length.spec.ts/lengthDisplayedCorrectly.png index e4a657c076b..76c7e9ead04 100644 Binary files a/tests/screenshots/chromium/Length.spec.ts/lengthDisplayedCorrectly.png and b/tests/screenshots/chromium/Length.spec.ts/lengthDisplayedCorrectly.png differ diff --git a/tests/screenshots/chromium/Livewire.spec.ts/livewireDisplayedCorrectly.png b/tests/screenshots/chromium/Livewire.spec.ts/livewireDisplayedCorrectly.png new file mode 100644 index 00000000000..9308f5c727a Binary files /dev/null and b/tests/screenshots/chromium/Livewire.spec.ts/livewireDisplayedCorrectly.png differ diff --git a/tests/screenshots/chromium/MPR.spec.ts/mprDisplayedCorrectly.png b/tests/screenshots/chromium/MPR.spec.ts/mprDisplayedCorrectly.png index c6581fd7741..52cadb0afc0 100644 Binary files a/tests/screenshots/chromium/MPR.spec.ts/mprDisplayedCorrectly.png and b/tests/screenshots/chromium/MPR.spec.ts/mprDisplayedCorrectly.png differ diff --git a/tests/screenshots/chromium/Probe.spec.ts/probeDisplayedCorrectly.png b/tests/screenshots/chromium/Probe.spec.ts/probeDisplayedCorrectly.png new file mode 100644 index 00000000000..eff69051a73 Binary files /dev/null and b/tests/screenshots/chromium/Probe.spec.ts/probeDisplayedCorrectly.png differ diff --git a/tests/screenshots/chromium/Rectangle.spec.ts/rectangleDisplayedCorrectly.png b/tests/screenshots/chromium/Rectangle.spec.ts/rectangleDisplayedCorrectly.png new file mode 100644 index 00000000000..1d93b6be54b Binary files /dev/null and b/tests/screenshots/chromium/Rectangle.spec.ts/rectangleDisplayedCorrectly.png differ diff --git a/tests/screenshots/chromium/Spline.spec.ts/splineDisplayedCorrectly.png b/tests/screenshots/chromium/Spline.spec.ts/splineDisplayedCorrectly.png new file mode 100644 index 00000000000..f9215f275c8 Binary files /dev/null and b/tests/screenshots/chromium/Spline.spec.ts/splineDisplayedCorrectly.png differ diff --git a/tests/utils/index.ts b/tests/utils/index.ts index f2e971a2297..f9ee5a7a0e8 100644 --- a/tests/utils/index.ts +++ b/tests/utils/index.ts @@ -1,6 +1,6 @@ import { visitStudy } from './visitStudy'; import { checkForScreenshot } from './checkForScreenshot'; import { screenShotPaths } from './screenShotPaths'; -import { simulateDrag } from './simulateDrag'; +import { simulateClicksOnElement } from './simulateClicksOnElement'; -export { visitStudy, checkForScreenshot, screenShotPaths, simulateDrag }; +export { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement }; diff --git a/tests/utils/screenShotPaths.ts b/tests/utils/screenShotPaths.ts index d72f80542c6..05c27842619 100644 --- a/tests/utils/screenShotPaths.ts +++ b/tests/utils/screenShotPaths.ts @@ -2,12 +2,39 @@ * Paths to the screenshots of the tests. */ const screenShotPaths = { - mpr: { - mprDisplayedCorrectly: 'mprDisplayedCorrectly.png', + angle: { + angleDisplayedCorrectly: 'angleDisplayedCorrectly.png', + }, + bidirectional: { + bidirectionalDisplayedCorrectly: 'bidirectionalDisplayedCorrectly.png', + }, + circle: { + circleDisplayedCorrectly: 'circleDisplayedCorrectly.png', + }, + cobbangle: { + cobbangleDisplayedCorrectly: 'cobbangleDisplayedCorrectly.png', + }, + ellipse: { + ellipseDisplayedCorrectly: 'ellipseDisplayedCorrectly.png', }, length: { lengthDisplayedCorrectly: 'lengthDisplayedCorrectly.png', }, + livewire: { + livewireDisplayedCorrectly: 'livewireDisplayedCorrectly.png', + }, + mpr: { + mprDisplayedCorrectly: 'mprDisplayedCorrectly.png', + }, + probe: { + probeDisplayedCorrectly: 'probeDisplayedCorrectly.png', + }, + rectangle: { + rectangleDisplayedCorrectly: 'rectangleDisplayedCorrectly.png', + }, + spline: { + splineDisplayedCorrectly: 'splineDisplayedCorrectly.png', + }, }; export { screenShotPaths }; diff --git a/tests/utils/simulateClicksOnElement.ts b/tests/utils/simulateClicksOnElement.ts new file mode 100644 index 00000000000..d1932faa059 --- /dev/null +++ b/tests/utils/simulateClicksOnElement.ts @@ -0,0 +1,19 @@ +import { Locator } from 'playwright'; + +/** + * + * @parm locator - The locator to click on + * @param points - The points to click on + * @returns Promise + */ +export async function simulateClicksOnElement({ + locator, + points, +}: { + locator: Locator; + points: { x: number; y: number }[]; +}) { + for (const { x, y } of points) { + await locator.click({ delay: 100, position: { x, y } }); + } +} diff --git a/tests/utils/simulateDrag.ts b/tests/utils/simulateDrag.ts deleted file mode 100644 index 6d7530b43c2..00000000000 --- a/tests/utils/simulateDrag.ts +++ /dev/null @@ -1,29 +0,0 @@ -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(); -} diff --git a/tests/utils/visitStudy.ts b/tests/utils/visitStudy.ts index 62cc7423302..f36fe2d9945 100644 --- a/tests/utils/visitStudy.ts +++ b/tests/utils/visitStudy.ts @@ -5,12 +5,19 @@ import { Page } from '@playwright/test'; * @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 + * @param delay - The delay to wait after visiting the study */ -export async function visitStudy(page: Page, studyInstanceUID: string, mode: string) { +export async function visitStudy( + page: Page, + studyInstanceUID: string, + mode: string, + delay: number = 0 +) { 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'); + await page.waitForTimeout(delay); }