Enable special characters in UI5 control ids

examples/ui5-js-app/webapp/test/e2e/basic.test.js

@@ -9,4 +9,43 @@ describe("ui5 basic", () => {
         const title = await browser.getTitle()
         expect(title).toEqual("Sample UI5 Application")
     })
+
+    // #118
+    it("should use a control selector with dots and colons", async () => {
+        const selector = {
+            selector: {
+                id: "Title::NoAction.h1",
+                viewName: "test.Sample.view.Main"
+            }
+        }
+
+        // ui5
+        const titleWUi5 = await browser.asControl(selector).getText()
+
+        // working webdriver example with xpath id selector
+        const titleElement = await $('//*[@id="container-Sample---Main--Title::NoAction.h1"]')
+        const titleWwdio = await titleElement.getText()
+
+        expect(titleWUi5).toEqual("UI5 demo")
+        expect(titleWwdio).toEqual("UI5 demo")
+    })
+
+    it("check for invalid control selector", async () => {
+        const selector1 = {
+            selector_: {
+                test: "some.test.string"
+            }
+        }
+
+        const selector2 = {
+            id: "some.test.string"
+        }
+
+        const invalidControl1 = await browser.asControl(selector1)
+        const invalidControl2 = await browser.asControl(selector2)
+
+        // check if result contains the expected validation error
+        expect(invalidControl1).toContain("ERROR")
+        expect(invalidControl2).toContain("ERROR")
+    })
 })

examples/ui5-js-app/webapp/view/Main.view.xml

@@ -17,6 +17,7 @@
 				justifyContent="Center"
 				height="100%">
 				<Title level="H1"
+					id="Title::NoAction.h1"
 					titleStyle="H1"
 					text="{i18n>startPage.title.text}"
 					width="100%"

src/lib/wdi5-bridge.ts

@@ -139,9 +139,39 @@ function _createWdioUI5KeyFromSelector(selector: wdi5Selector): string {
 
     return wdi5_ui5_key
 }
+/**
+ * does a basic validation of a wdi5ControlSelector
+ * @param wdi5Selector: wdi5Selector
+ * @returns {boolean} if the given selector is a valid selector
+ */
+function _verifySelector(wdi5Selector: wdi5Selector) {
+    if (wdi5Selector.hasOwnProperty("selector")) {
+        if (
+            wdi5Selector.selector.hasOwnProperty("id") ||
+            wdi5Selector.selector.hasOwnProperty("viewName") ||
+            wdi5Selector.selector.hasOwnProperty("bindingPath") ||
+            wdi5Selector.selector.hasOwnProperty("controlType") ||
+            wdi5Selector.selector.hasOwnProperty("I18NText") ||
+            wdi5Selector.selector.hasOwnProperty("labelFor") ||
+            wdi5Selector.selector.hasOwnProperty("properties")
+        ) {
+            Logger.error(
+                "Specified selector is not valid. Please use at least one of: 'id, viewName, bindingPath, controlType, I18NText, labelFor, properties' -> abort"
+            )
+            return true
+        }
+        Logger.error("Specified selector is not valid -> property 'selector' is missing")
+        return false
+    }
+    return false
+}
 
 export async function addWdi5Commands() {
     browser.addCommand("_asControl", async (wdi5Selector: wdi5Selector) => {
+        if (!_verifySelector(wdi5Selector)) {
+            return "ERROR: Specified selector is not valid -> abort"
+        }
+
         const internalKey = wdi5Selector.wdio_ui5_key || _createWdioUI5KeyFromSelector(wdi5Selector)
         // either retrieve and cache a UI5 control
         // or return a cached version

src/lib/wdi5-control.ts

@@ -390,7 +390,7 @@ export class WDI5Control {
         // save the webdriver representation by control id
         if (result[2]) {
             // only if the result is valid
-            this._webdriverRepresentation = await $(`#${result[2]}`)
+            this._webdriverRepresentation = await $(`//*[@id="${result[2]}"]`)
         }
 
         this.writeResultLog(result, "getControl()")