docs(testing): align guides with the current Playwright workflow

Dockerfile

@@ -42,7 +42,7 @@
 # Stage 1: Build the application
 # docker build -t ohif/viewer:latest .
 # Copy Files
-FROM node:20.18.1-slim as builder
+FROM node:20.19.0-slim as builder
 
 RUN apt-get update && apt-get install -y build-essential python3
 

README.md

@@ -16,9 +16,6 @@ provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF
 <div align="center">
   📰 <a href="https://ohif.org/news/"><strong>Join OHIF Newsletter</strong></a> 📰
 </div>
-<div align="center">
-  📰 <a href="https://ohif.org/news/"><strong>Join OHIF Newsletter</strong></a> 📰
-</div>
 
 
 
@@ -98,7 +95,7 @@ forking).
 
 - [Report a Bug 🐛](https://github.com/OHIF/Viewers/issues/new?assignees=&labels=Community%3A+Report+%3Abug%3A%2CAwaiting+Reproduction&projects=&template=bug-report.yml&title=%5BBug%5D+)
 - [Request a Feature 🚀](https://github.com/OHIF/Viewers/issues/new?assignees=&labels=Community%3A+Request+%3Ahand%3A&projects=&template=feature-request.yml&title=%5BFeature+Request%5D+)
-- [Ask a Question 🤗](community.ohif.org)
+- [Ask a Question 🤗](https://community.ohif.org)
 - [Slack Channel](https://join.slack.com/t/cornerstonejs/shared_invite/zt-1r8xb2zau-dOxlD6jit3TN0Uwf928w9Q)
 
 For commercial support, academic collaborations, and answers to common
@@ -196,40 +193,35 @@ you'll see the following:
 
 ```bash
 .
-├── extensions               #
-│   ├── _example             # Skeleton of example extension
-│   ├── default              # basic set of useful functionalities (datasources, panels, etc)
-│   ├── cornerstone       # image rendering and tools w/ Cornerstone3D
-│   ├── cornerstone-dicom-sr # DICOM Structured Report rendering and export
-│   ├── cornerstone-dicom-sr # DICOM Structured Report rendering and export
-│   ├── cornerstone-dicom-seg # DICOM Segmentation rendering and export
-│   ├── cornerstone-dicom-rt # DICOM RTSTRUCT rendering
-│   ├── cornerstone-microscopy # Whole Slide Microscopy rendering
-│   ├── dicom-pdf # PDF rendering
-│   ├── dicom-video # DICOM RESTful Services
-│   ├── measurement-tracking # Longitudinal measurement tracking
-│   ├── tmtv # Total Metabolic Tumor Volume (TMTV) calculation
-|
-
-│
-├── modes                    #
-│   ├── _example             # Skeleton of example mode
-│   ├── basic-dev-mode       # Basic development mode
-│   ├── longitudinal         # Longitudinal mode (measurement tracking)
-│   ├── tmtv       # Total Metabolic Tumor Volume (TMTV) calculation mode
-│   └── microscopy          # Whole Slide Microscopy mode
-│
-├── platform                 #
-│   ├── core                 # Business Logic
-│   ├── i18n                 # Internationalization Support
-│   ├── ui                   # React component library
-│   ├── docs                 # Documentation
-│   └── viewer               # Connects platform and extension projects
-│
-├── ...                      # misc. shared configuration
-├── lerna.json               # MonoRepo (Lerna) settings
-├── package.json             # Shared devDependencies and commands
-└── README.md                # This file
+├── extensions
+│   ├── cornerstone              # Cornerstone3D rendering and tools
+│   ├── cornerstone-dicom-rt     # DICOM RTSTRUCT rendering
+│   ├── cornerstone-dicom-seg    # DICOM segmentation rendering
+│   ├── cornerstone-dicom-sr     # DICOM structured report support
+│   ├── default                  # Data sources, panels, and default layout
+│   ├── dicom-microscopy         # Whole slide microscopy
+│   ├── dicom-pdf                # PDF rendering
+│   ├── dicom-video              # DICOM video support
+│   ├── measurement-tracking     # Measurement tracking workflow pieces
+│   └── ...
+├── modes
+│   ├── basic                    # General-purpose viewer mode
+│   ├── basic-dev-mode           # Development-focused mode
+│   ├── longitudinal             # Measurement tracking mode
+│   ├── microscopy               # Whole slide microscopy mode
+│   ├── segmentation             # Segmentation-focused mode
+│   └── ...
+├── platform
+│   ├── app                      # App shell, routes, and runtime wiring
+│   ├── cli                      # Extension and mode scaffolding tools
+│   ├── core                     # Shared services and business logic
+│   ├── docs                     # Documentation site
+│   ├── i18n                     # Internationalization support
+│   ├── ui                       # Current React component library
+│   └── ui-next                  # Next-generation UI components
+├── tests                        # Playwright end-to-end test suite
+├── testdata                     # DICOMweb test data submodule
+└── package.json                 # Shared scripts and workspace config
 ```
 
 ## Acknowledgments

platform/app/.recipes/Nginx-Dcm4chee-Keycloak/dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Build the application
-FROM node:20.18.1-slim as builder
+FROM node:20.19.0-slim as builder
 
 # Setup the working directory
 RUN mkdir /usr/src/app

platform/app/.recipes/Nginx-Dcm4chee/dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Build the application
-FROM node:20.18.1-slim as builder
+FROM node:20.19.0-slim as builder
 
 # Setup the working directory
 RUN mkdir /usr/src/app

platform/app/.recipes/Nginx-Orthanc-Keycloak/dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Build the application
-FROM node:20.18.1-slim as builder
+FROM node:20.19.0-slim as builder
 
 # Setup the working directory
 RUN mkdir /usr/src/app

platform/app/.recipes/Nginx-Orthanc/dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Build the application
-FROM node:20.18.1-slim as builder
+FROM node:20.19.0-slim as builder
 
 # Setup the working directory
 RUN mkdir /usr/src/app

platform/docs/docs/development/playwright-testing.md

@@ -8,19 +8,18 @@ summary: Guide to writing and running end-to-end tests for OHIF Viewer using Pla
 
 
 :::note
-You might need to run the `bun playwright install ` for the first time if you have not
+You might need to run `npx playwright install` the first time you set up
+Playwright locally.
 :::
 
 # Running the tests
 
 ```bash
-#
-# run the tests
-bun test:e2e:ui
+yarn test:e2e:ui
 ```
 
 
-# Writing PlayWright Tests
+# 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.
 
@@ -91,7 +90,14 @@ test.describe('Some test', async () => {
 });
 ```
 
-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.
+The test will automatically fail the first time you run it, but it will also
+generate the missing screenshot for you. In the current default configuration,
+that snapshot will be written under
+`tests/screenshots/chromium/your-test.spec.ts/measurementAdded.png`. If you
+enable additional browser projects in `playwright.config.ts`, Playwright will
+create matching snapshots for those projects as well. Please verify that the
+ground-truth screenshots are correct before committing them or testing against
+them.
 
 ## Simulating mouse drags
 
@@ -125,7 +131,8 @@ Our simulate drag utility can simulate a drag on any element, and avoid going ou
 
 ## Running the tests
 
-After you have wrote your tests, you can run them by using the following command:
+After you have written your tests, you can run them by using the following
+command:
 
 ```bash
 yarn test:e2e:ci
@@ -137,15 +144,26 @@ If you want to use headed mode, you can use the following command:
 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:
+You will see the test results in your terminal. If you want a more detailed
+report, you can use the following command:
 
 ```bash
-yarn playwright show-report tests/playwright-report
+npx 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.
+By default, Playwright starts the viewer for you using the e2e configuration in
+`playwright.config.ts`. If you would like to serve the viewer manually while you
+iterate on a test, run:
+
+```bash
+npx cross-env APP_CONFIG=config/e2e.js OHIF_PORT=3335 yarn start
+```
+
+The viewer will then be available at `http://localhost:3335`, which matches the
+default Playwright base URL. When that server is already running, Playwright
+will reuse it instead of starting a new one.
 
 ## Accessing services, managers, configs and cornerstone in your tests
 

platform/docs/docs/development/testing.md

@@ -26,65 +26,69 @@ Running unit test will generate a report at the end showing the successful and
 unsuccessful tests with detailed explanations.
 
 ## End-to-end test
-For running the OHIF e2e test you need to run the following steps:
+OHIF's primary end-to-end suite now runs with Playwright from the repository
+root.
 
-- Open a new terminal, and from the root of the OHIF mono repo, run the following command:
+Start by checking out the test data:
 
-  ```bash
-  yarn test:data
-  ```
+```bash
+yarn test:data
+```
 
-  This will download the required data to run the e2e tests (it might take a while).
-  The `test:data` only needs to be run once and checks the data out. Read more about
-  test data [below](#test-data).
+Then run one of the Playwright workflows:
 
-- Run the viewer with e2e config
+```bash
+yarn test:e2e:ci
+```
 
-  ```bash
-  APP_CONFIG=config/e2e.js yarn start
-  ```
+For interactive local work, the following commands are often more convenient:
 
-  You should be able to see test studies in the study list
+```bash
+yarn test:e2e:ui
+yarn test:e2e:headed
+yarn test:e2e:debug
+```
 
-  ![OHIF-e2e-test-studies](../assets/img/OHIF-e2e-test-studies.png)
+If you prefer to keep the viewer running in a separate terminal while iterating
+on tests, start it with the same configuration used by Playwright:
 
-- Open a new terminal inside the OHIF project, and run the e2e cypress test
+```bash
+npx cross-env APP_CONFIG=config/e2e.js OHIF_PORT=3335 yarn start
+```
+
+New end-to-end coverage should be added under the repository-level `tests/`
+directory and documented in the dedicated [Playwright guide](./playwright-testing.md).
+Legacy Cypress commands still exist in `platform/app/package.json` for older
+package-local workflows, but Playwright is the default path for new regression
+coverage.
 
-  ```bash
-  yarn test:e2e
-  ```
+## Test Data
 
-  You should be able to see the cypress window open
+The testing data is stored in two OHIF repositories. The first contains the
+binary DICOM data, at [viewer-testdata](https://github.com/OHIF/viewer-testdata.git)
+while the second module contains data in the DICOMweb format, installed as a
+submodule into OHIF in the `testdata` directory. This is retrieved via the
+command
 
-  ![e2e-cypress](../assets/img/e2e-cypress.png)
+```bash
+yarn test:data
+```
 
-  Run the tests by clicking on the `Run #number integration tests` .
+or the equivalent command `git submodule update --init`.
 
-  A new window will open, and you will see e2e tests being executed one after
-  each other.
+When adding new data, run:
 
-  ![e2e-cypress-final](../assets/img/e2e-cypress-final.png)
+```bash
+npm install -g dicom10-to-dicomweb
+mkdicomweb -d dicomweb dcm
+```
 
-  ## Test Data
-  The testing data is stored in two OHIF repositories.  The first contains the
-  binary DICOM data, at [viewer-testdata](https://github.com/OHIF/viewer-testdata.git)
-  while the second module contains data in the DICOMweb format, installed as a submodule
-  into OHIF in the `testdata` directory.  This is retrieved via the command
-  ```bash
-  yarn test:data
-  ```
-  or the equivalent command `git submodule update --init`
-  When adding new data, run:
-  ```
-  npm install -g dicomp10-to-dicomweb
-  mkdicomweb -d dicomweb dcm
-  ```
-  to update the local dicomweb submodule in viewer-testdata.  Then, commit
-  that data and update the submodules used in OHIF and in the viewer-testdata
-  parent modules.
+to update the local dicomweb submodule in viewer-testdata. Then commit that
+data and update the submodules used in OHIF and in the viewer-testdata parent
+modules.
 
-  All data MUST be fully anonymized and allowed to be used for open access.
-  Any attributions should be included in the DCM directory.
+All data MUST be fully anonymized and allowed to be used for open access. Any
+attributions should be included in the DCM directory.
 
 ## Testing Philosophy