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.only('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)
+
+        expect(invalidControl1).toEqual("specified selector is not valid -> abort")
+        expect(invalidControl2).toEqual("specified selector is not valid -> abort")
+
+    });
 })

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

@@ -142,6 +142,20 @@ function _createWdioUI5KeyFromSelector(selector: wdi5Selector): string {
 
 export async function addWdi5Commands() {
     browser.addCommand("_asControl", async (wdi5Selector: wdi5Selector) => {
+        if (
+            !(
+                wdi5Selector.hasOwnProperty("selector") &&
+                (wdi5Selector.selector.hasOwnProperty("id") ||
+                    wdi5Selector.selector.hasOwnProperty("viewName") ||
+                    wdi5Selector.selector.hasOwnProperty("bindingPath") ||
+                    wdi5Selector.selector.hasOwnProperty("controlType") ||
+                    wdi5Selector.selector.hasOwnProperty("properties"))
+            )
+        ) {
+            Logger.error("specified selector is not valid -> abort")
+            return "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()")