feat(test): Playwright testing integration #4146
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 StudyInstanceUID2.16.840.1.114362.1.11972228.22789312658.616067305.306.2
and the modeBasic Viewer
, you can use the following code snippet: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 intests/utils/checkForScreenshot.ts
to capture screenshots. You should also plan your screenshots in advance, screenshots need to be defined in thetests/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: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: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, underchromium/your-test.spec.js/measurementAdded.png
,firefox/your-test.spec.js/measurementAdded.png
andwebkit/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 intests/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 thecornerstone-canvas
element, you can use the following code snippet: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:
If you want to use headed mode, you can use the following command:
You will see the test results in your terminal, if you want an indepth report, you can use the following command:
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 athttp://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. The below recording is for CornestoneJS, but the same principles apply to OHIF Viewer.