Multiremote support for TestLibrary

examples/fe-app/package.json

@@ -10,7 +10,8 @@
   "main": "webapp/index.html",
   "scripts": {
     "deploy": "npx -p @sap/ux-ui5-tooling fiori add deploy-config cf",
-    "test": "karma start --singleRun",
+    "test": "run-s test:*",
+    "test:multiremote": "wdio run wdio-multiremote.conf.js --headless",
     "test:wdi5": "wdio run wdio.conf.js --headless",
     "serve": "ui5 serve --port 8088"
   },

examples/fe-app/wdio-multiremote.conf.js

@@ -0,0 +1,63 @@
+const { join } = require("path")
+
+exports.config = {
+    wdi5: {
+        screenshotPath: join("app", "incidents", "webapp", "wdi5-test", "__screenshots__"),
+        logLevel: "verbose", // error | verbose | silent
+        waitForUI5Timeout: 30000
+    },
+    //// wdio runner config
+    specs: [join("webapp", "wdi5-test", "**/Multiremote.test.js")],
+    // Patterns to exclude.
+    exclude: [],
+    //// capabilities ("browser") config
+    maxInstances: 10,
+    capabilities: {
+        one: {
+            capabilities: {
+                browserName: "chrome",
+                acceptInsecureCerts: true,
+                "goog:chromeOptions": {
+                    args:
+                        process.argv.indexOf("--headless") > -1
+                            ? ["window-size=1440,800", "--headless"]
+                            : process.argv.indexOf("--debug") > -1
+                            ? ["window-size=1920,1280", "--auto-open-devtools-for-tabs"]
+                            : ["window-size=1440,800"]
+                }
+            }
+        },
+        two: {
+            capabilities: {
+                browserName: "chrome",
+                acceptInsecureCerts: true,
+                "goog:chromeOptions": {
+                    args:
+                        process.argv.indexOf("--headless") > -1
+                            ? ["window-size=1440,800", "--headless"]
+                            : process.argv.indexOf("--debug") > -1
+                            ? ["window-size=1920,1280", "--auto-open-devtools-for-tabs"]
+                            : ["window-size=1440,800"]
+                }
+            }
+        }
+    },
+    //// test config
+    // Level of logging verbosity: trace | debug | info | warn | error | silent
+    logLevel: "error",
+    bail: 0,
+    baseUrl: "http://localhost:8088/index.html#fe-lrop-v4",
+
+    waitforTimeout: 10000,
+    connectionRetryTimeout: 120000,
+    connectionRetryCount: 3,
+
+    services: ["chromedriver", "ui5"],
+
+    framework: "mocha",
+    mochaOpts: {
+        ui: "bdd",
+        timeout: 120000
+    },
+    reporters: ["spec"]
+}

examples/fe-app/wdio.conf.js

@@ -9,7 +9,7 @@ exports.config = {
     //// wdio runner config
     specs: [join("webapp", "wdi5-test", "**/*.test.js")],
     // Patterns to exclude.
-    exclude: [],
+    exclude: [join("webapp", "wdi5-test", "**/Multiremote.test.js")],
     //// capabilities ("browser") config
     maxInstances: 10,
     capabilities: [

examples/fe-app/webapp/wdi5-test/Multiremote.test.js

@@ -0,0 +1,40 @@
+describe("FE basics", () => {
+    let FioriElementsFacades
+    before(async () => {
+        FioriElementsFacades = await browser.fe.initialize({
+            onTheMainPage: {
+                ListReport: {
+                    appId: "sap.fe.demo.incidents",
+                    componentId: "IncidentsList",
+                    entitySet: "Incidents"
+                }
+            },
+            onTheDetailPage: {
+                ObjectPage: {
+                    appId: "sap.fe.demo.incidents",
+                    componentId: "IncidentsObjectPage",
+                    entitySet: "Incidents"
+                }
+            },
+            onTheShell: {
+                Shell: {}
+            }
+        })
+    })
+
+    it("should trigger search on ListReport page on browser one and two", async () => {
+        await FioriElementsFacades.one.execute((Given, When, Then) => {
+            Given.onTheMainPage.onFilterBar().iExecuteSearch()
+            Then.onTheMainPage.onTable().iCheckRows(12)
+            Then.onTheMainPage.onTable().iCheckRows({ identifier: "inc_0002", title: "Password Reset" })
+            When.onTheMainPage.onTable().iPressRow({ identifier: "inc_0002" })
+        })
+
+        await FioriElementsFacades.two.execute((Given, When, Then) => {
+            Given.onTheMainPage.onFilterBar().iExecuteSearch()
+            Then.onTheMainPage.onTable().iCheckRows(12)
+            Then.onTheMainPage.onTable().iCheckRows({ identifier: "inc_0002", title: "Password Reset" })
+            When.onTheMainPage.onTable().iPressRow({ identifier: "inc_0002" })
+        })
+    })
+})

package.json

@@ -48,7 +48,7 @@
     "test:cucumber": "npm run test --workspace=examples/cucumber",
     "test-h:ts-app": "run-p -r _startApp:ts _test-h:ts-app",
     "test:js-app": "run-p -r _startApp:js _startApp:js-tooling _test:js-app",
-    "_test:fe-app": "wait-on tcp:8088 && npm run test:wdi5 --workspace=examples/fe-app",
+    "_test:fe-app": "wait-on tcp:8088 && npm run test --workspace=examples/fe-app",
     "test:fe-app": "run-p -r _startApp:fe _test:fe-app",
     "//test:auth": "this runs either locally or on browserstack depending on the env variable BROWSERSTACK",
     "test:auth": "npm run test:authentication:bstack -w examples/ui5-ts-app",

src/lib/wdi5-bridge.ts

@@ -92,8 +92,8 @@ function initBrowser(browserInstance: WebdriverIO.Browser) {
 
     _addWdi5Commands(browserInstance)
 
-    if (!(browserInstance as any).fe) {
-        ;(browserInstance as any).fe = WDI5FE
+    if (!(browser as any).fe) {
+        ;(browser as any).fe = WDI5FE
     }
 
     _setupComplete = true

src/lib/wdi5-fe.ts

@@ -1,5 +1,6 @@
 import { initOPA, addToQueue, emptyQueue, loadFELibraries } from "../../client-side-js/testLibrary"
 import { Logger as _Logger } from "./Logger"
+import { MultiRemoteDriver } from "webdriverio/build/multiremote"
 const Logger = _Logger.getInstance()
 
 const commonFunctions = ["and", "when", "then"]
@@ -24,10 +25,19 @@ function createProxy(myObj: any, type: string, methodCalls: any[], pageKeys: str
 }
 export class WDI5FE {
     constructor(private appConfig: any, private browserInstance: any) {}
-    static async initialize(appConfig, browserInstance = browser) {
-        await loadFELibraries(browserInstance)
-        await initOPA(appConfig, browserInstance)
-        return new WDI5FE(appConfig, browserInstance)
+    static async initialize(appConfig) {
+        if (browser instanceof MultiRemoteDriver) {
+            // create for every instance a new facade and load all relevant libraries
+            return (browser["instances"] as []).reduce(async (facade, browserName) => {
+                await loadFELibraries(browser[browserName])
+                await initOPA(appConfig, browser[browserName])
+                return Object.assign(await facade, { [browserName]: new WDI5FE(appConfig, browser[browserName]) })
+            }, {})
+        } else {
+            await loadFELibraries(browser)
+            await initOPA(appConfig, browser)
+            return new WDI5FE(appConfig, browser)
+        }
     }
 
     async execute(fnFunction) {