feat: wdio v9 compat

.github/workflows/gh-release.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: "npm"
           cache-dependency-path: "**/package-lock.json"
       - run: npm ci

.github/workflows/lint.yml

@@ -23,13 +23,13 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: "npm"
           cache-dependency-path: "**/package-lock.json"
       - name: tmp install prettier + eslint
         run: npm i prettier eslint
       - name: lint things
         run: |
           node_modules/.bin/prettier --debug-check client-side-js src docs
-          node_modules/.bin/eslint --ext .ts src
+          node_modules/.bin/eslint ./src/**/*.ts
         # TODO: linting rules for client-side-js

.github/workflows/npm-publish.yml

@@ -33,7 +33,7 @@ jobs:
           token: ${{secrets.ADMIN_WDI5}}
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: "npm"
           cache-dependency-path: "**/package-lock.json"
           registry-url: https://registry.npmjs.org/

.github/workflows/wdi5-tests_core.yml

@@ -24,7 +24,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18, 20]
+        node-version: [20, 22]
 
     steps:
       - name: check out repo

.github/workflows/wdi5-tests_fe-app.yml

@@ -24,7 +24,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18, 20]
+        node-version: [20, 22]
 
     steps:
       ### no mas since wdio^8 allows for auto-download of matching chromedriver for the env

.github/workflows/wdi5-tests_js-app.yml

@@ -26,7 +26,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18, 20]
+        node-version: [20, 22]
 
     steps:
       ### no mas since wdio^8 allows for auto-download of matching chromedriver for the env

.github/workflows/wdi5-tests_ts-app.yml

@@ -25,7 +25,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18, 20]
+        node-version: [20, 22]
 
     steps:
       ### no mas since wdio^8 allows for auto-download of matching chromedriver for the env

.husky/commit-msg

@@ -1,4 +1,2 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx --no -- commitlint --edit ""

.husky/pre-commit

@@ -1,4 +1,3 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 
 npx lint-staged

.retrofit-pkg-json.js

@@ -1,6 +1,12 @@
 // transmogrifying wdi5's package.json to a cjs version
 import { promises as fs } from "fs"
-import pkgJson from "./package.json" assert { type: "json" }
+import { readFileSync } from "fs"
+import { dirname, join } from "node:path"
+import { fileURLToPath } from "node:url"
+
+const pkgJsonPath = join(dirname(fileURLToPath(import.meta.url)), "./package.json")
+const pkgJson = JSON.parse(readFileSync(pkgJsonPath, "utf8"))
+
 ;["type", "exports", "types", "files", "workspaces", "scripts", "lint-staged"].forEach((section) => {
     delete pkgJson[section]
 })

client-side-js/_checkForUI5Ready.cjs

@@ -1,14 +1,12 @@
 async function clientSide__checkForUI5Ready(browserInstance) {
-    return await browserInstance.executeAsync((done) => {
-        window.bridge
-            .waitForUI5(window.wdi5.waitForUI5Options)
-            .then(() => {
-                window.wdi5.Log.info("[browser wdi5] UI5 is ready")
-                done(true)
-            })
-            .catch((error) => {
-                console.error(error)
-            })
+    return await browserInstance.execute(async () => {
+        try {
+            await window.wdi5.waitForUI5(window.wdi5.waitForUI5Options)
+        } catch (error) {
+            return window.wdi5.errorHandling(error)
+        }
+        window.wdi5.Log.info("[browser wdi5] UI5 is ready")
+        return true
     })
 }
 

client-side-js/_getAggregation.cjs

@@ -1,25 +1,24 @@
 async function clientSide_getAggregation(webElement, aggregationName, browserInstance) {
     webElement = await Promise.resolve(webElement) // to plug into fluent async api
     browserInstance = await Promise.resolve(browserInstance)
-    return await browserInstance.executeAsync(
-        (webElement, aggregationName, done) => {
-            window.bridge.waitForUI5(window.wdi5.waitForUI5Options).then(() => {
-                // DOM to UI5
-                try {
-                    let oControl = window.wdi5.getUI5CtlForWebObj(webElement)
-                    let cAggregation = oControl.getAggregation(aggregationName)
-                    // if getAggregation retrieves an element only it has to be transformed to an array
-                    if (cAggregation && !Array.isArray(cAggregation)) {
-                        cAggregation = [cAggregation]
-                    }
-                    // read classname eg. sap.m.ComboBox
-                    controlType = oControl.getMetadata()._sClassName
-                    let result = window.wdi5.createControlIdMap(cAggregation, controlType)
-                    done({ status: 0, result: result })
-                } catch (e) {
-                    done({ status: 1, message: e.toString() })
+    return await browserInstance.execute(
+        async (webElement, aggregationName) => {
+            try {
+                await window.bridge.waitForUI5(window.wdi5.waitForUI5Options)
+                let oControl = window.wdi5.getUI5CtlForWebObj(webElement)
+                let cAggregation = oControl.getAggregation(aggregationName)
+                // if getAggregation retrieves an element only it has to be transformed to an array
+                if (cAggregation && !Array.isArray(cAggregation)) {
+                    cAggregation = [cAggregation]
                 }
-            })
+                // read classname eg. sap.m.ComboBox
+                controlType = oControl.getMetadata()._sClassName
+                let result = window.wdi5.createControlIdMap(cAggregation, controlType)
+                return { status: 0, result: result }
+            } catch (error) {
+                // also returns an object with a "status": 1 property
+                return window.wdi5.errorHandling(error)
+            }
         },
         webElement,
         aggregationName

client-side-js/_navTo.cjs

@@ -1,29 +1,39 @@
 async function clientSide__navTo(sComponentId, sName, oParameters, oComponentTargetInfo, bReplace, browserInstance) {
-    return await browserInstance.executeAsync(
-        (sComponentId, sName, oParameters, oComponentTargetInfo, bReplace, done) => {
-            window.bridge.waitForUI5(window.wdi5.waitForUI5Options).then(() => {
-                window.wdi5.Log.info(`[browser wdi5] navigation to ${sName} triggered`)
+    return await browserInstance.execute(
+        async (sComponentId, sName, oParameters, oComponentTargetInfo, bReplace) => {
 
-                const router = sap.ui.getCore().getComponent(sComponentId).getRouter()
-                const hashChanger = window.compareVersions.compare("1.75.0", sap.ui.version, ">")
-                    ? sap.ui.core.routing.HashChanger.getInstance()
-                    : router.getHashChanger()
+            try {
+                await window.bridge.waitForUI5(window.wdi5.waitForUI5Options)
+            } catch (error) {
+                return window.wdi5.errorHandling(error)
+            }
 
-                // on success result is the router
-                // FIXME: should this be changed to attach once?
-                hashChanger.attachEvent("hashChanged", (oEvent) => {
-                    done({
-                        status: 0,
-                        result: window.compareVersions.compare("1.75.0", sap.ui.version, ">")
-                            ? hashChanger.getHash()
-                            : hashChanger.hash
-                    })
-                })
+            window.wdi5.Log.info(`[browser wdi5] navigation to ${sName} triggered`)
+
+            // TODO: get rid of deprectaed function
+            const router = sap.ui.getCore().getComponent(sComponentId).getRouter()
+            const hashChanger = window.compareVersions.compare("1.75.0", sap.ui.version, ">")
+                ? sap.ui.core.routing.HashChanger.getInstance()
+                : router.getHashChanger()
 
-                // get component and trigger router
-                // sName, oParameters?, oComponentTargetInfo?, bReplace?
-                router.navTo(sName, oParameters, oComponentTargetInfo, bReplace)
+            // create hashChanged promise
+            const hashChangedPromise = new Promise((resolve) => {
+                hashChanger.attachEventOnce("hashChanged", () => {
+                    resolve()
+                })
             })
+
+            // get component and trigger router
+            // sName, oParameters?, oComponentTargetInfo?, bReplace?
+            router.navTo(sName, oParameters, oComponentTargetInfo, bReplace)
+            // wait for hashChanged event
+            await hashChangedPromise
+            return {
+                status: 0,
+                result: window.compareVersions.compare("1.75.0", sap.ui.version, ">")
+                    ? hashChanger.getHash()
+                    : hashChanger.hash
+            }
         },
         sComponentId,
         sName,

client-side-js/allControls.cjs

@@ -1,37 +1,43 @@
 async function clientSide_allControls(controlSelector, browserInstance) {
     controlSelector = await Promise.resolve(controlSelector) // to plug into fluent async api
-    return await browserInstance.executeAsync((controlSelector, done) => {
+    return await browserInstance.execute(async (controlSelector) => {
         const waitForUI5Options = Object.assign({}, window.wdi5.waitForUI5Options)
         if (controlSelector.timeout) {
             waitForUI5Options.timeout = controlSelector.timeout
         }
 
-        window.wdi5.waitForUI5(
-            waitForUI5Options,
-            () => {
-                window.wdi5.Log.info("[browser wdi5] locating " + JSON.stringify(controlSelector))
-                controlSelector.selector = window.wdi5.createMatcher(controlSelector.selector)
-                window.bridge
-                    .findAllDOMElementsByControlSelector(controlSelector)
-                    .then((domElements) => {
-                        // window.wdi5.Log.info('[browser wdi5] control located! - Message: ' + JSON.stringify(domElement));
-                        // ui5 control
-                        let returnElements = []
-                        domElements.forEach((domElement) => {
-                            const ui5Control = window.wdi5.getUI5CtlForWebObj(domElement)
-                            const id = ui5Control.getId()
-                            window.wdi5.Log.info(`[browser wdi5] control with id: ${id} located!`)
-                            const aProtoFunctions = window.wdi5.retrieveControlMethods(ui5Control)
-                            // @type [String, String?, String, "Array of Strings"]
-                            returnElements.push({ domElement: domElement, id: id, aProtoFunctions: aProtoFunctions })
-                        })
+        try {
+            await window.wdi5.waitForUI5(waitForUI5Options)
+        } catch (error) {
+            return window.wdi5.errorHandling(error)
+        }
+
+        window.wdi5.Log.info("[browser wdi5] locating " + JSON.stringify(controlSelector))
+        controlSelector.selector = window.wdi5.createMatcher(controlSelector.selector)
+        let domElements;
+
+        try {
+            domElements = await window.bridge.findAllDOMElementsByControlSelector(controlSelector)
+        } catch (error) {
+            return window.wdi5.errorHandling(error)
+        }
+
+        // ui5 control
+        let returnElements = []
+        domElements.forEach((domElement) => {
+            const ui5Control = window.wdi5.getUI5CtlForWebObj(domElement)
+            const id = ui5Control.getId()
+            window.wdi5.Log.info(`[browser wdi5] control with id: ${id} located!`)
+            const aProtoFunctions = window.wdi5.retrieveControlMethods(ui5Control)
+            // @type [String, String?, String, "Array of Strings"]
+            returnElements.push({
+                domElement: domElement,
+                id: id,
+                aProtoFunctions: aProtoFunctions
+            })
+        })
 
-                        done({ status: 0, result: returnElements })
-                    })
-                    .catch(window.wdi5.errorHandling.bind(this, done))
-            },
-            window.wdi5.errorHandling.bind(this, done)
-        )
+        return { status: 0, result: returnElements }
     }, controlSelector)
 }