Feat cy port

.github/workflows/cypress.yml

@@ -0,0 +1,89 @@
+# This workflow runs Cypress tests in Firefox against a running eXist-db instance.
+# It mirrors the build workflow structure but executes Cypress tests instead of smoke tests.
+
+name: Cypress Tests
+
+on: [push]
+
+jobs:
+  cypress-tests:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        # Test against different eXist-db versions
+        img-version: [latest]
+        java-version: [11]
+
+
+    steps:
+      # Checkout code
+      - uses: actions/checkout@v6
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # Setup Node.js
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          cache: npm
+          node-version: lts/*
+
+      # Install dependencies
+      - name: Install dependencies
+        run: npm ci --no-optional
+
+      # Build
+      - name: Setup Java
+        uses: actions/setup-java@v5
+        with:
+          distribution: 'temurin'
+          java-version: ${{ matrix.java-version }}
+
+      - name: Build Expath Package
+        run: ant -Dapp.version=1.0.0-SNAPSHOT
+
+      # TODO(DP): cache image
+      - name: Pull Dev Image
+        run: docker pull joewiz/hsg-project:${{ matrix.img-version }}
+
+      # Install and start eXist-db
+      - name: Start exist-ci containers
+        timeout-minutes: 20
+        run: |
+          docker run -dit -p 8080:8080 -v ${{ github.workspace }}/build:/exist/autodeploy \
+          --name exist --rm --health-interval=2s --health-start-period=4s \
+          joewiz/hsg-project:${{ matrix.img-version }}
+
+      - name: Wait for eXist-db to start
+        timeout-minutes: 10
+        run: |
+          while ! docker logs exist | grep -q "Server has started"; \
+          do sleep 2s; \
+          done
+
+      # Run Cypress tests in Firefox
+      - name: Run Cypress tests in Firefox
+        uses: cypress-io/github-action@v7
+        with:
+          install: false
+          browser: firefox
+
+
+      # Upload test results
+      - name: Upload Cypress screenshots
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots-${{ matrix.img-version }}-${{ matrix.java-version }}
+          path: tests/cypress/screenshots
+          retention-days: 7
+
+      - name: Upload Cypress videos
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: cypress-videos-${{ matrix.img-version }}-${{ matrix.java-version }}
+          path: tests/cypress/videos
+          retention-days: 7

.gitignore

@@ -11,6 +11,14 @@ resources/scripts/app.min.js
 tests/reports/errorShots/*
 tests/reports/junit-reports/*
 
+tests/cypress/screenshots/
+tests/cypress/videos/
+tests/cypress/downloads/
+
+.DS_Store
+
+plans/
+
 # local properties
 local.node-exist.json
 

README.md

@@ -60,7 +60,7 @@ A new `package-lock.json` file will be created, which should be added to version
 
 ### Check currently installed versions
 
-1. node: `node -v` => Should output `v18.18.2`
+1. node: `node -v` => Should satisfy `package.json` engines (e.g. `>=18.0.0`; the asdf example uses 18.18.2).
 2. npm: `npm -v` => Should output at least `v9.8.1`
 3. gulp: `npx gulp -v` => Should output at least `CLI version: 2.3.0, Local version: 4.0.2`
 
@@ -136,110 +136,67 @@ To deploy a full XAR file make sure you build the latest version by callling `an
 
 ## 4. Web Tests
 
-Verify you have a local hsg-project running at localhost:8080/exist/apps/hsg-shell. See the Docker section for easy installation.  
+Verify you have a local hsg-project running at `http://localhost:8080/exist/apps/hsg-shell`. See the Docker section for easy installation.
 
 ### How to run local web tests
 
-#### 1. Install Chrome
+#### 1. Install Dependencies
 
-Make sure you have Google Chrome >= 110 and all required node_modules installed (`npm install`).
+Make sure you have all required node_modules installed (`npm install`). Cypress is included in devDependencies.
 
-##### Troubleshooting Chromedriver Problems
+#### 2. Configuration
 
-If you have problems with installing or running Chromedriver, have a look at these resources: [webdriver.io/docs/wdio-chromedriver-service.html](https://webdriver.io/docs/wdio-chromedriver-service.html), [stackoverflow](https://stackoverflow.com/questions/54940853/chrome-version-must-be-between-71-and-75-error-after-updating-to-chromedriver-2)
+Test configuration is in `cypress.config.cjs`. The baseUrl is `http://localhost:8080/exist/apps/hsg-shell`. All specs under `tests/cypress/e2e/**/*.cy.js` are run (see `specPattern` in the config). Legacy monolithic specs named `prod_*.cy.js` are kept for reference alongside the refactored per-page specs.
 
-It might be helpful to run
+#### 3. Run the tests
 
-```shell
-npm install chromedriver --detect_chromedriver_version
-```
-
-All available chromedriver versions are listed here: [https://chromedriver.storage.googleapis.com/](https://chromedriver.storage.googleapis.com/).
-
-If your current Chrome version doesn't match the required one.
-This command will check the required version and install a suitable Chromedriver for you.
-
-Note: If you are using an Apple M1 computer, the filename for chromedriver has been changed by Chrome between version 105 and 106 [See fix for node_chromedriver: https://github.com/giggio/node-chromedriver/pull/386/](https://github.com/giggio/node-chromedriver/pull/386/commits/7bc8dc46583ca484ca17707d9d98f8a1f98b9be4#).
-When running this project's ant script on an M1 with a Chrome version <=105, you should either update Chrome to 110 like defined in file `package.json`, or change the chromedriver version to your current Chrome version to match the expected chromedriver filename.
-
-#### 2. Optional: Edit configuration
-
-* Optional: Edit which test files or suites you would like to run.
-  Here is the part where to define the test suites:
-    ```
-      suites: {
-        dev: [
-          './tests/specs/**/dev_*.js'
-        ],
-        prod: [
-          './tests/specs/**/prod_*.js'
-        ]
-      }
-    ```
-
-#### 3. Run the web test
-
-Basic syntax of starting an entire test suite is
+**Open Cypress Test Runner (interactive):**
 ```bash
-npm test
+npm run cy:open
 ```
 
-Use `npx` to execute different test suites 
-
+**Run all tests (headless):**
 ```bash
-npx wdio wdio.conf.js --suite <name-of-the-testsuite>
+npm run cy:run
 ```
-for example (runs all development environment test that have been listed in the wdio configuration in `suites: {prod : ...}`):
 
+**Run a specific file or folder:**
 ```bash
-npx wdio wdio.conf.js --suite test-prod
+npx cypress run --spec "tests/cypress/e2e/landing/title.cy.js"
+npx cypress run --spec "tests/cypress/e2e/conferences/**/*.cy.js"
 ```
 
-and for a single test it is
-```bash
-npx wdio wdio.conf.js --spec path-to-the-testspec
-```
-for example:
-```bash
-npx wdio wdio.conf.js --spec tests/specs/error/prod_404.spec.js
-```
+#### 4. Test structure
 
-In addition, you can define running the test commands in `package.json`
-within the `scripts` key, for example:
-```json
-"test": "./node_modules/.bin/wdio wdio.conf.js --suite test-prod"
-```
-and run this command with
-```shell
-npm run-script test-prod
-```
+Specs live under `tests/cypress/e2e/` by feature; many areas use subfolders (e.g. conferences by year, countries/archives, departmenthistory/buildings) so each spec can run in parallel:
 
-This test runs in "headless" mode. It means the test will run in the background without opening a browser window.
-If you want to observe all actions in the web test in a browser, just comment out the `headless` argument in the `wdio.conf.js`:
+- `conferences/` – main page and year subfolders (2006–2012)
+- `countries/` – landing, main, `archives/`
+- `departmenthistory/` – index, `buildings/`, `people/`, `travels/`, `short-history/`, etc.
+- `developer/` – main, catalog
+- `education/` – main, modules, `modules/*-intro`
+- `error/` – 404
+- `historical-documents/` – landing, FRUS subpages, `volume/`
+- `iiif-images/` – IIIF viewer
+- `landing/` – title, twitter
+- `milestones/` – main, all, `1750-1775/`, `chapter/`
+- `open/` – main, frus-metadata, frus-latest
+- `search/` – search-form, search-results, filter-results, new-indexes
+- `tags/` – main and tag subpages
+- `ui-components/` – breadcrumb
 
-```
-chromeOptions: {
-  args: [
-  //'headless',
-    'disable-gpu',
-    '--window-size=1280,1024',
-    'ignore-certificate-errors',
-    'ignore-urlfetcher-cert-requests'
-  ],
-  binary: process.env.WDIO_CHROME_BINARY
-},
-```
+Custom Cypress commands (e.g. `normalizeHeadlineText` for headline assertions) are in `tests/cypress/support/commands.js`.
 
-#### 4. Further documentation
+#### 5. Further documentation
 
-This web test is configured to use the framework `Mocha` with `Chai` and activated Chai plugin `assert` (`global.assert = chai.assert;`) for assertions.
+The suite uses Cypress with Mocha and Chai. The `assert` global is available for compatibility.
 
-Have a look at the documentation:
+Documentation:
 
-* General overview about "webdriver.io": [webdriver.io/docs/gettingstarted](https://webdriver.io/docs/gettingstarted.html)
-* Webdriver.io functions: [webdriver.io/docs/api](https://webdriver.io/docs/api.html)
-* List of all functions in the Chai Assertion library: [chaijs.com/api/assert](https://www.chaijs.com/api/assert/)
-* Overview about mocha.js: [mochajs.org](https://mochajs.org/)
+* Cypress documentation: [docs.cypress.io](https://docs.cypress.io/)
+* Cypress API: [docs.cypress.io/api](https://docs.cypress.io/api)
+* Chai Assertion library: [chaijs.com/api/assert](https://www.chaijs.com/api/assert/)
+* Mocha documentation: [mochajs.org](https://mochajs.org/)
 
 ## Release
 

build.xml

@@ -94,11 +94,14 @@
             <exclude name="package-lock.json"/>
             <exclude name=".idea/**"/>
             <exclude name=".vscode/**"/>
+            <exclude name="plans/**"/>
             <exclude name="tests/reports/**"/>
+            <exclude name="tests/cypress/**"/>
             <exclude name="npm-shrinkwrap.json"/>
             <exclude name="build.properties.local.xml"/>
             <exclude name="local.node-exist.json"/>   
             <exclude name="wdio*"/>
+            <exclude name="cypress.config.cjs"/>
             <exclude name=".github/**"/>
             <exclude name=".releaserc"/>
             <exclude name="commitlint.config.cjs"/>

cypress.config.cjs

@@ -0,0 +1,31 @@
+const { defineConfig } = require('cypress');
+const glob = require('glob');
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      on('task', {
+        findFiles({ pattern }) {
+          // Use glob.sync to get the files synchronously
+          return glob.sync(pattern, { nodir: true });
+        }
+      });
+      return config;
+    },
+    baseUrl: 'http://localhost:8080/exist/apps/hsg-shell',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    trashAssetsBeforeRuns: true,
+    includeShadowDom: true,
+    retries: 1,
+    supportFile: 'tests/cypress/support/e2e.js', 
+    specPattern: [
+      'tests/cypress/e2e/**/*.cy.js',
+    ],
+    screenshotsFolder: 'tests/cypress/screenshots',
+    videosFolder: 'tests/cypress/videos',
+    fixturesFolder: 'tests/cypress/fixtures',
+    downloadsFolder: 'tests/cypress/downloads'
+  },
+});
+