Add codecept UI tests

.example.env

@@ -1,3 +1,4 @@
+COMPOSE_PROJECT_NAME=osl-1
 MW_HOST_PORT=8081
 MW_SITE_SERVER=http://localhost:80
 MW_SITE_NAME=Wiki

.gitignore

@@ -6,3 +6,4 @@ mediawiki/config/favicon.ico
 mediawiki/config/logo*
 mediawiki/data/*
 mysql/data/*
+tests/codecept/output/*

README.md

@@ -99,9 +99,7 @@ tar -zcf backup/file_backup_$(date +"%Y%m%d_%H%M%S").tar mediawiki/data
 ## Restore
 cleanup old data
 ```bash
-rm -r mediawiki/data
-rm -r mysql/data
-rm -r blazegraph/data
+docker compose down -v && sudo rm -r mediawiki/data && sudo rm -r blazegraph/data && sudo rm -r mysql/data
 ```
 import
 ```bash
@@ -150,3 +148,65 @@ triggers CI/CD workflow and pushes image with tags to docker registry (see also
 git tag <tag>
 git push --atomic origin main --tags
 ```
+
+### Testing
+Note: You may have to wait 15 - 30 min for all page packages to be installed on the first run
+
+Pull reqired images (see `./tests/codecept/browsers.json`) from docker registry before running `codeceptjs`:
+
+manually
+```sh
+docker pull selenoid/video-recorder:latest-release;
+docker pull selenoid/firefox:latest;
+...
+```
+automated by parsing `./tests/codecept/browsers.json` (replace `docker run --rm -i imega/jq` with `jq` if installed on your host), see [docs](https://aerokube.com/selenoid/latest/#_syncing_browser_images_from_existing_file)
+```sh
+docker pull selenoid/video-recorder:latest-release && cat ./tests/codecept/browsers.json | docker run --rm -i imega/jq -r '..|.image?|strings' | xargs -I{} docker pull {}
+```
+
+Note: use kiosk mode for demo video recording
+
+Run all tests with a single browser
+```sh
+docker compose run --rm codeceptjs
+```
+
+Run only test with tag `@<tag>` a single browser
+```sh
+docker compose run --rm codeceptjs codeceptjs run --grep "@<tag>"
+```
+
+Run only test with without `@<tag>` a single browser
+```sh
+docker compose run --rm codeceptjs codeceptjs run --grep "@<tag>" --invert
+```
+
+Run multi-browser tests
+```sh
+docker compose run --rm codeceptjs codeceptjs run-multiple --all
+```
+
+More options: https://codecept.io/commands/
+
+
+You can follow the test execution on selenoid-ui at "http://localhost:8080".
+Run with autopause to interact with the browser in a state where test have failed
+
+1. codeceptjs: container name
+2. codeceptjs: shell command inside container
+
+```sh
+docker compose run --rm codeceptjs codeceptjs run -p pauseOnFail
+```
+
+### Create Testcases
+
+Create a new file ./tests/codecept/tests/<name>_test.js
+
+Follow the existing examples or https://codecept.io/tutorial/
+
+To find XPath expressions and test them in the browser:
+https://stackoverflow.com/questions/41857614/how-to-find-xpath-of-an-element-in-firefox-inspector
+
+To compare / assert values: https://github.com/SitamJana/codeceptjs-chai

docker-compose.yaml

@@ -3,7 +3,6 @@
 #   mkdir -p mediawiki/data && chown www-data:www-data mediawiki/data
 #   mkdir -p blazegraph/data
 
-version: '3.8'
 services:
     db:
         image: mysql:8.0.17
@@ -105,6 +104,48 @@ services:
         ports:
             - "${DRAWIO_HOST_PORT}:8080"
 
+    codeceptjs:
+        #image: codeceptjs/codeceptjs
+        build: ./tests/codecept
+        profiles: [testing]
+        depends_on:
+            #- firefox
+            #- chrome
+            - selenoid
+            - selenoid-ui
+        environment:
+            - MW_SITE_SERVER=${MW_SITE_SERVER}
+            - MW_ADMIN_USER=admin
+            - MW_ADMIN_PASS=${MW_ADMIN_PASS}
+        volumes:
+            - /var/run/docker.sock:/var/run/docker.sock
+            - ./tests/codecept:/tests
+        #command: codeceptjs run --config=codecept.json osl-testing-codecept/tests/codecept/codecept.conf.js
+
+    selenoid:
+        image: aerokube/selenoid:latest-release
+        container_name: selenoid
+        profiles: [testing]
+        ports:
+            - '4444:4444'
+        volumes:
+            - /var/run/docker.sock:/var/run/docker.sock
+            #- ./tests/selenoid:/etc/selenoid/:ro
+            #- ./tests/selenoid/output/video/:/opt/selenoid/video/
+            - ./tests/codecept:/etc/selenoid/:ro
+            - ./tests/codecept/output/video/:/opt/selenoid/video/
+        environment:
+            - OVERRIDE_VIDEO_OUTPUT_DIR=$PWD/tests/codecept/output/video
+        # see: https://aerokube.com/selenoid/1.6.0/#_selenoid_with_docker_compose
+        command: ["-container-network", "${COMPOSE_PROJECT_NAME}_default"]
+
+    selenoid-ui:
+        image: aerokube/selenoid-ui:latest-release
+        profiles: [testing]
+        command: --selenoid-uri http://selenoid:4444
+        ports:
+            - 8080:8080
+
 #for internal connections, e. g. non public dockered email server
 #networks:
 #    default:

tests/codecept/Dockerfile

@@ -0,0 +1,4 @@
+FROM codeceptjs/codeceptjs
+#ENV NODE_PATH=/codecept/node_modules
+RUN npm i "codeceptjs-chai" --force --prefix /codecept
+RUN curl -fsSL https://get.docker.com -o get-docker.sh && sh get-docker.sh

tests/codecept/browsers.json

@@ -0,0 +1 @@
+{"chrome":{"default":"latest","versions":{"latest":{"image":"docker.io/selenoid/chrome:latest","port":"4444","path":"/"}}},"firefox":{"default":"latest","versions":{"latest":{"image":"docker.io/selenoid/firefox:latest","port":"4444","path":"/wd/hub"}}}}

tests/codecept/codecept.conf.js

@@ -0,0 +1,105 @@
+exports.config = {
+  "tests": "./tests/*_test.js",
+  "timeout": 6000,
+  "output": "./output",
+  "plugins": {
+    "pauseOnFail": {
+      "enabled": false,
+    },
+    "autoDelay": {
+      "enabled": true
+    },
+    "selenoid": {
+      "name": 'selenoid',
+      "enabled": true,
+      "deletePassed": false,
+      "autoCreate": false,
+      "autoStart": false,
+      "sessionTimeout": '60m',
+      "enableVideo": true,
+      "enableLog": true,
+      "enableVNC": true,
+      "screenResolution": "1280x1024x24",
+    },
+  },
+  "helpers": {
+    "WebDriver": {
+      "url": process.env.MW_SITE_SERVER,
+      "browser": "firefox",
+      //"restart": false, // video renaming of selenoid does not work if false
+      //"host": "firefox",
+      "host": "selenoid", //'selenoid' does not work here
+      "port": 4444,
+      "keepCookies": true,
+      "smartWait": 10000,
+      desiredCapabilities: {
+        // https://stackoverflow.com/questions/24507078/how-to-deal-with-certificates-using-selenium
+        acceptInsecureCerts: true,
+        chromeOptions: {
+          // args: ["--kiosk"] // note: use kiosk mode for demo videos
+        },
+        firefoxOptions: {
+          // args: ["--kiosk"] // note: use kiosk mode for demo videos
+        }
+      }
+      //"windowSize": "1280x1024",
+      //"video": true,
+      //"keepVideoForPassedTests": true,
+      //"recordVideo": {},
+      //"trace": true,
+      //"keepTraceForPassedTests": false,
+      //"selenoid:options": {
+      //  "enableVNC": true,
+      //  "screenResolution": "1280x1024x24"
+      //"videoName": "Test"
+      //}
+    },
+    "ChaiWrapper": {
+      "require": "codeceptjs-chai"
+    },
+    "customHelpers": {
+      "require": "./helpers.js"
+    }
+  },
+  "include": {
+    "I": "./steps.js"
+  },
+  "bootstrap": false,
+  "mocha": {},
+  "name": "codeceptjs",
+  "multiple": {
+    "parallel": {
+      "chunks": 2
+    },
+    "basic": {
+      "browsers": [
+        {
+          "url": process.env.MW_SITE_SERVER,
+          "browser": "firefox",
+          "host": "localhost", //'selenoid' does not work here
+          "port": 4444,
+          "keepCookies": true,
+          "smartWait": 10000,
+          desiredCapabilities: {
+            firefoxOptions: {
+              // args: ["--kiosk"]
+            }
+          }
+        },
+        {
+          "url": process.env.MW_SITE_SERVER,
+          "browser": "chrome",
+          "host": "localhost", //'selenoid' does not work here
+          "port": 4444,
+          "keepCookies": true,
+          "smartWait": 10000,
+          desiredCapabilities: {
+            chromeOptions: {
+              args: ["--kiosk"]
+            }
+          }
+        },
+      ]
+    }
+  }
+}

tests/codecept/config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    DEFAULT_WAIT_TIME: 10
+}