feat(test): Playwright testing integration (#4146)
This commit is contained in:
Ibrahim authored and GitHub committed
1 parent
856cd17531
commit
fe1a706446
26 files changed
+434
-215
No files matched your search
@@ -1 +1,2 @@
|
||||
.vercel
|
||||
test-results
|
||||
@@ -1,25 +0,0 @@
|
||||
import '@percy/cypress';
|
||||
|
||||
describe('OHIF Percy Layout Advanced Presets', () => {
|
||||
beforeEach(() => {
|
||||
cy.openStudyInViewer('1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1');
|
||||
cy.wait(5000);
|
||||
cy.expectMinimumThumbnails(3);
|
||||
});
|
||||
|
||||
it('should display each layout preset correctly', () => {
|
||||
cy.get('[data-cy="study-browser-thumbnail"]').eq(2).dblclick();
|
||||
cy.selectLayoutPreset('MPR', true);
|
||||
cy.percyCanvasSnapshot('MPR Preset');
|
||||
cy.selectLayoutPreset('3D four up');
|
||||
cy.percyCanvasSnapshot('3D four up Preset');
|
||||
cy.selectLayoutPreset('3D main');
|
||||
cy.percyCanvasSnapshot('3D main Preset');
|
||||
cy.selectLayoutPreset('Axial Primary');
|
||||
cy.percyCanvasSnapshot('Axial Primary Preset');
|
||||
cy.selectLayoutPreset('3D only');
|
||||
cy.percyCanvasSnapshot('3D only Preset');
|
||||
cy.selectLayoutPreset('3D primary');
|
||||
cy.percyCanvasSnapshot('3D primary Preset');
|
||||
});
|
||||
});
|
||||
@@ -1,31 +0,0 @@
|
||||
import '@percy/cypress';
|
||||
|
||||
describe('OHIF Percy MPR Crosshairs', () => {
|
||||
beforeEach(() => {
|
||||
cy.openStudyInViewer(
|
||||
'1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463',
|
||||
'&hangingProtocolId=default',
|
||||
'/viewer'
|
||||
);
|
||||
cy.wait(5000);
|
||||
cy.expectMinimumThumbnails(4);
|
||||
});
|
||||
|
||||
it('should enabled crosshairs in MPR and reset them when another series is loaded', () => {
|
||||
cy.get('[data-cy="study-browser-thumbnail"]').eq(2).dblclick();
|
||||
cy.selectLayoutPreset('MPR');
|
||||
cy.get('[data-cy="Crosshairs"]').click();
|
||||
cy.wait(500);
|
||||
cy.percyCanvasSnapshot('Crosshairs enabled');
|
||||
cy.wait(100);
|
||||
cy.get('[data-viewport-uid="mpr-axial"] > .viewport-element > .cornerstone-canvas').click(
|
||||
45,
|
||||
100
|
||||
);
|
||||
cy.wait(200);
|
||||
cy.percyCanvasSnapshot('Crosshairs are moved');
|
||||
cy.get('[data-cy="study-browser-thumbnail"]').eq(0).dblclick();
|
||||
cy.wait(500);
|
||||
cy.percyCanvasSnapshot('Another series dropped, Crosshairs are centered');
|
||||
});
|
||||
});
|
||||
@@ -1,13 +0,0 @@
|
||||
import '@percy/cypress';
|
||||
|
||||
describe('OHIF Percy PDF Display', () => {
|
||||
beforeEach(() => {
|
||||
cy.openStudyInViewer('1.2.826.0.13854362241694438965858641723883466450351448');
|
||||
cy.wait(5000);
|
||||
cy.expectMinimumThumbnails(1);
|
||||
});
|
||||
|
||||
it('should display PDFs correctly', () => {
|
||||
cy.percyCanvasSnapshot('PDF');
|
||||
});
|
||||
});
|
||||
@@ -1,26 +0,0 @@
|
||||
import '@percy/cypress';
|
||||
|
||||
describe('OHIF Percy SR', () => {
|
||||
beforeEach(() => {
|
||||
cy.openStudyInViewer('1.2.840.113619.2.5.1762583153.215519.978957063.78');
|
||||
cy.wait(5000);
|
||||
cy.expectMinimumThumbnails(3);
|
||||
});
|
||||
|
||||
it('should hydrate SR correctly and Jump to Measurements', () => {
|
||||
cy.get('[data-cy="study-browser-thumbnail-no-image"]').first().dblclick();
|
||||
cy.wait(200);
|
||||
cy.percyCanvasSnapshot('SR Preview');
|
||||
cy.get('body').type('{enter}');
|
||||
cy.wait(200);
|
||||
cy.percyCanvasSnapshot('SR Hydrated');
|
||||
cy.get('[data-cy="trackedMeasurements-btn"]').click();
|
||||
cy.percyCanvasSnapshot('Opened Measurement Panel');
|
||||
cy.get('body').type('{downarrow}');
|
||||
cy.get('body').type('{downarrow}');
|
||||
cy.get('body').type('{downarrow}');
|
||||
cy.percyCanvasSnapshot('Scrolled away from measurements');
|
||||
cy.get('[data-cy="measurement-item"]').first().click();
|
||||
cy.percyCanvasSnapshot('Jumped to Measurement');
|
||||
});
|
||||
});
|
||||
@@ -1,42 +0,0 @@
|
||||
import '@percy/cypress';
|
||||
|
||||
describe('OHIF Percy Segmentation Tools', () => {
|
||||
beforeEach(() => {
|
||||
Cypress.on('uncaught:exception', () => false);
|
||||
cy.openStudyInViewer(
|
||||
'1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1',
|
||||
'&hangingProtocolId=default',
|
||||
'/segmentation'
|
||||
);
|
||||
cy.wait(5000);
|
||||
cy.expectMinimumThumbnails(3);
|
||||
});
|
||||
|
||||
it('should be able to use all segmentation tools and have them render correctly', () => {
|
||||
cy.get('[data-cy="study-browser-thumbnail"]').eq(1).dblclick();
|
||||
cy.percyCanvasSnapshot('Segmentation tools are disabled');
|
||||
cy.get('span').contains('Add segmentation').should('have.css', 'pointer-events', 'none');
|
||||
cy.percyCanvasSnapshot(
|
||||
'Add segmentation button is disabled when the displayset is none reconstructable'
|
||||
);
|
||||
cy.get('[data-cy="study-browser-thumbnail"]').eq(2).dblclick();
|
||||
cy.get('span').contains('Add segmentation').click();
|
||||
cy.wait(500);
|
||||
cy.percyCanvasSnapshot('Segmentation added and tools are enabled');
|
||||
cy.get('[data-cy="Brush"]').click();
|
||||
cy.percyCanvasSnapshot('Brush tool selected');
|
||||
cy.addBrush('.cornerstone-canvas');
|
||||
cy.percyCanvasSnapshot('Brush tool applied');
|
||||
cy.get('[data-cy="Eraser"]').click();
|
||||
cy.percyCanvasSnapshot('Eraser tool selected');
|
||||
cy.addEraser('.cornerstone-canvas');
|
||||
cy.percyCanvasSnapshot('Eraser tool applied');
|
||||
cy.selectLayoutPreset('MPR');
|
||||
cy.get('[data-cy="Brush"]').click();
|
||||
cy.percyCanvasSnapshot('Brush tool selected in MPR');
|
||||
cy.get('button').contains('Sphere').click();
|
||||
cy.percyCanvasSnapshot('Sphere mode for Brush tool selected');
|
||||
cy.addBrush('[data-viewport-uid="mpr-axial"] > .viewport-element > .cornerstone-canvas');
|
||||
cy.percyCanvasSnapshot('Sphere stroke for Brush tool applied');
|
||||
});
|
||||
});
|
||||
@@ -1,38 +0,0 @@
|
||||
import '@percy/cypress';
|
||||
|
||||
describe('OHIF Percy TMTV', () => {
|
||||
beforeEach(() => {
|
||||
cy.openStudyInViewer(
|
||||
'1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463',
|
||||
'',
|
||||
'/tmtv'
|
||||
);
|
||||
cy.wait(10000);
|
||||
});
|
||||
|
||||
it('should maintain VOI when going 1 up and back', () => {
|
||||
cy.percyCanvasSnapshot('TMTV Loaded');
|
||||
cy.get('[data-viewport-uid="mipSagittal"] > .viewport-element > .cornerstone-canvas').dblclick(
|
||||
100,
|
||||
100
|
||||
);
|
||||
cy.wait(500);
|
||||
cy.percyCanvasSnapshot('TMTV One up view loaded');
|
||||
cy.get('[data-viewport-uid="mipSagittal"] > .viewport-element > .cornerstone-canvas').dblclick(
|
||||
100,
|
||||
100
|
||||
);
|
||||
cy.wait(500);
|
||||
cy.percyCanvasSnapshot('TMTV Back to original view');
|
||||
});
|
||||
|
||||
it('should still look fine when changing patient data', () => {
|
||||
cy.get('[data-cy="petSUV-btn"]').click();
|
||||
cy.percyCanvasSnapshot('TMTV Patient Panel Opened');
|
||||
cy.get('[data-cy="input-weight-input"]').type('191');
|
||||
cy.percyCanvasSnapshot('TMTV Patient Panel Weight Changed');
|
||||
cy.get('button').contains('Reload Data').click();
|
||||
cy.wait(5000);
|
||||
cy.percyCanvasSnapshot('TMTV Reloaded Data');
|
||||
});
|
||||
});
|
||||
@@ -1,13 +0,0 @@
|
||||
import '@percy/cypress';
|
||||
|
||||
describe('OHIF Percy Video Display', () => {
|
||||
beforeEach(() => {
|
||||
cy.openStudyInViewer('2.25.96975534054447904995905761963464388233');
|
||||
cy.wait(5000);
|
||||
cy.expectMinimumThumbnails(0);
|
||||
});
|
||||
|
||||
it('should display Videos correctly', () => {
|
||||
cy.percyCanvasSnapshot('Video');
|
||||
});
|
||||
});
|
||||
@@ -36,7 +36,6 @@
|
||||
"dev:viewer": "yarn run dev",
|
||||
"start": "yarn run dev",
|
||||
"test:e2e": "cypress open",
|
||||
"test:e2e:ci": "percy exec -- cypress run --config video=false --browser chrome --spec 'cypress/integration/visual-regression/**/*'",
|
||||
"test:e2e:local": "cypress run --config video=false --browser chrome --spec 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'",
|
||||
"test:e2e:dist": "start-server-and-test test:e2e:serve http://localhost:3000 test:e2e:ci",
|
||||
"test:e2e:serve": "cross-env APP_CONFIG=config/e2e.js yarn start",
|
||||
@@ -99,6 +98,8 @@
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-private-methods": "^7.18.6",
|
||||
"@percy/cypress": "^3.1.1",
|
||||
"@playwright/test": "^1.44.0",
|
||||
"@types/node": "^20.12.12",
|
||||
"cypress": "13.7.2",
|
||||
"cypress-file-upload": "^3.5.3",
|
||||
"glob": "^8.0.3",
|
||||
|
||||
@@ -270,6 +270,7 @@ function WorkList({
|
||||
|
||||
return {
|
||||
dataCY: `studyRow-${studyInstanceUid}`,
|
||||
clickableCY: studyInstanceUid,
|
||||
row: [
|
||||
{
|
||||
key: 'patientName',
|
||||
@@ -630,7 +631,7 @@ function _getQueryFilterValues(params) {
|
||||
sortBy: params.get('sortby'),
|
||||
sortDirection: params.get('sortdirection'),
|
||||
pageNumber: _tryParseInt(params.get('pagenumber'), undefined),
|
||||
resultsPerPage: _tryParseInt(params.get('resultsperpage'), undefined),
|
||||
resultsPerPage: _tryParseInt(params.get('resultsPerPage'), undefined),
|
||||
datasources: params.get('datasources'),
|
||||
configUrl: params.get('configurl'),
|
||||
};
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
---
|
||||
sidebar_position: 12
|
||||
sidebar_label: Testing
|
||||
---
|
||||
|
||||
# Writing PlayWright Tests
|
||||
|
||||
Our Playwright tests are written using the Playwright test framework. We use these tests to test our OHIF Viewer and ensure that it is working as expected.
|
||||
|
||||
In this guide, we will show you how to write Playwright tests for the OHIF Viewer.
|
||||
|
||||
## Using a specific study and mode
|
||||
|
||||
If you would like to use a specific study, you can use the `studyInstanceUID` property to reference the study you would like to visit. for example, if you would like to use the study with StudyInstanceUID `2.16.840.1.114362.1.11972228.22789312658.616067305.306.2` and the mode `Basic Viewer`, you can use the following code snippet:
|
||||
|
||||
```ts
|
||||
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('Some Test', async () => {
|
||||
test('should do something.', async ({ page }) => {
|
||||
// Your test code here...
|
||||
});
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
## Screenshots
|
||||
|
||||
A good way to check your tests is working as expected is to capture screenshots at different stages of the test. You can use our `checkForScreenshot` function located in `tests/utils/checkForScreenshot.ts` to capture screenshots. You should also plan your screenshots in advance, screenshots need to be defined in the `tests/utils/screenshotPaths.ts` file. For example, if you would to capture a screenshot after a measurement is added, you can define a screenshot path like this:
|
||||
|
||||
```ts
|
||||
const screenShotPaths = {
|
||||
your_test_name: {
|
||||
measurementAdded: 'measurementAdded.png',
|
||||
measurementRemoved: 'measurementRemoved.png',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
It's okay if the screenshot doesn't exist yet, this will be dealt with in the next step. Once you have defined your screenshot path, you can use the `checkForScreenshot` function in your test to capture the screenshot. For example, if you would like to capture a screenshot of the page after a measurement is added, you can use the following code snippet:
|
||||
|
||||
```ts
|
||||
import { test } from '@playwright/test';
|
||||
import {
|
||||
visitStudy,
|
||||
checkForScreenshot,
|
||||
screenshotPath,
|
||||
} 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('Some test', async () => {
|
||||
test('should do something', async ({ page }) => {
|
||||
// Your test code here to add a measurement
|
||||
await checkForScreenshot(
|
||||
page,
|
||||
page,
|
||||
screenshotPath.your_test_name.measurementAdded
|
||||
);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
The test will automatically fail the first time you run it, it will however generate the screenshot for you, you will notice 3 new entries in the `tests/screenshots` folder, under `chromium/your-test.spec.js/measurementAdded.png`, `firefox/your-test.spec.js/measurementAdded.png` and `webkit/your-test.spec.js/measurementAdded.png` folders. You can now run the test again and it will use those screenshots to compare against the current state of the example. Please verify that the ground truth screenshots are correct before committing them or testing against them.
|
||||
|
||||
## Simulating mouse drags
|
||||
|
||||
If you would like to simulate a mouse drag, you can use the `simulateDrag` function located in `tests/utils/simulateDrag.ts`. You can use this function to simulate a mouse drag on an element. For example, if you would like to simulate a mouse drag on the `cornerstone-canvas` element, you can use the following code snippet:
|
||||
|
||||
```ts
|
||||
import {
|
||||
visitStudy,
|
||||
checkForScreenshot,
|
||||
screenShotPaths,
|
||||
simulateDrag,
|
||||
} 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('Some Test', async () => {
|
||||
test('should do something..', async ({
|
||||
page,
|
||||
}) => {
|
||||
const locator = page.locator('.cornerstone-canvas');
|
||||
await simulateDrag(page, locator);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Our simulate drag utility can simulate a drag on any element, and avoid going out of bounds. It will calculuate the bounding box of the element and ensure that the drag stays within the bounds of the element. This should be good enough for most tools, and better than providing custom x, and y coordinates which can be error prone and make the code difficult to maintain.
|
||||
|
||||
## Running the tests
|
||||
|
||||
After you have wrote your tests, you can run them by using the following command:
|
||||
|
||||
```bash
|
||||
yarn test:e2e:ci
|
||||
```
|
||||
|
||||
If you want to use headed mode, you can use the following command:
|
||||
|
||||
```bash
|
||||
yarn test:e2e:headed
|
||||
```
|
||||
|
||||
You will see the test results in your terminal, if you want an indepth report, you can use the following command:
|
||||
|
||||
```bash
|
||||
yarn playwright show-report tests/playwright-report
|
||||
```
|
||||
|
||||
## Serving the viewer manually for development
|
||||
|
||||
By default, when you run the tests, it will call the `yarn start` command to serve the viewer first, then run the tests, if you would like to serve the viewer manually, you can use the same command. The viewer will be available at `http://localhost:3000`. This could speed up your development process since playwright will skip this step and use the existing server on port 3000.
|
||||
|
||||
## Playwright VSCode Extension and Recording Tests
|
||||
|
||||
If you are using VSCode, you can use the Playwright extension to help you write your tests. The extension provides a test runner and many great features such as picking a locator using your mouse, recording a new test, and more. You can install the extension by searching for `Playwright` in the extensions tab in VSCode or by visiting the [Playwright extension page](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). The below recording is for CornestoneJS, but the same principles apply to OHIF Viewer.
|
||||
|
||||
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
|
||||
<iframe src="https://player.vimeo.com/video/947471524?h=6720407fef&badge=0&autopause=0&player_id=0&app_id=58479"
|
||||
frameBorder="0" allow="cross-origin-isolated" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Playwright Extension"></iframe>
|
||||
</div>
|
||||
@@ -84,6 +84,7 @@ const InvestigationalUseDialog = ({ dialogConfiguration }) => {
|
||||
type={ButtonEnums.type.primary}
|
||||
onClick={handleConfirmAndHide}
|
||||
className="bg-primary-main"
|
||||
dataCY="confirm-and-hide-button"
|
||||
>
|
||||
Confirm and Hide
|
||||
</Button>
|
||||
|
||||
@@ -7,7 +7,7 @@ import Icon from '../Icon';
|
||||
|
||||
const StudyListTableRow = props => {
|
||||
const { tableData } = props;
|
||||
const { row, expandedContent, onClickRow, isExpanded, dataCY } = tableData;
|
||||
const { row, expandedContent, onClickRow, isExpanded, dataCY, clickableCY } = tableData;
|
||||
return (
|
||||
<>
|
||||
<tr
|
||||
@@ -42,6 +42,7 @@ const StudyListTableRow = props => {
|
||||
{ 'bg-secondary-dark': isExpanded }
|
||||
)}
|
||||
onClick={onClickRow}
|
||||
data-cy={clickableCY}
|
||||
>
|
||||
{row.map((cell, index) => {
|
||||
const { content, title, gridCol } = cell;
|
||||
@@ -108,6 +109,7 @@ StudyListTableRow.propTypes = {
|
||||
onClickRow: PropTypes.func.isRequired,
|
||||
isExpanded: PropTypes.bool.isRequired,
|
||||
dataCY: PropTypes.string,
|
||||
clickableCY: PropTypes.string,
|
||||
}),
|
||||
};
|
||||
|
||||
|
||||
Reference in new issue
Block a user