Unable to add a Token to sap.m.MultiInput

[marco-paciucci]

Hello, I need to do the following:

		let oCustomerValueSelector = {
			selector: {
				controlType: "sap.m.MultiInput",
				id: "customerValueID",
				viewName: "view.Risk"
			}
		}
		let oCustomerValue = await browser.asControl(oCustomerValueSelector); 

		let oToken = new sap.m.Token({"key":"012474", "text":"012474"});
		await oCustomerValue.addToken(oToken);

However, the last two lines are not correct, sap.m.Token does not exist and cannot be added to oCustomerValue which is a compound object but does not expose addToken method. How can I achieve this in wdi5?

[vobu]

the key is requiring sap.m.Token in the Node.js-scope - I don't know whether this is possible at all. a quick try with

const Token = require("@openui5/sap.m/src/sap/m/Token")

failed (obviously), as this is browser-scoped code. Probably @matz3 can help here?

[Siolto]

Hi @marco-paciucci,

what you could try, instead of programmatically adding a token to the multi input, to interact with the control like a real user would do (that is always the preferred way). What happens if you use enterText?

const oCustomerValueSelector = {
			selector: {
				controlType: "sap.m.MultiInput",
				id: "customerValueID",
				viewName: "view.Risk",
                                interaction: {
                                    idSuffix: "inner"
                                }
			}
		}
		const oCustomerValue = await browser.asControl(oCustomerValueSelector); 
                await oCustomerValue.enterText("012474")

Regards, Simon

[marco-paciucci]

Hello Simon, that does not work, it doesn't raise any error but doesn't work either. I've done this: await browser.execute(() => { sap.ui.getCore().byId("application-IBPBPOV2-Manage-component---risk--customerValueID").addToken(new sap.m.Token({ "key": "012474", "text": "012474" })); }); and this works fine but I don't think it's the way it should be. Ideas?

[vobu]

I've done this: await browser.execute(() => { sap.ui.getCore().byId("application-IBPBPOV2-Manage-component---risk--customerValueID").addToken(new sap.m.Token({ "key": "012474", "text": "012474" })); }); and this works fine but I don't think it's the way it should be.

this works because browser.executeAsync() runs client-side code in the browser (btw: don't use .execute(), but .executeAsync())

your other coding sample runs in Node.js-scope, using the UI5 RecordReplay API do send code to the browser and receive an outcome in return.

const oCustomerValueSelector = {
	selector: {
		controlType: "sap.m.MultiInput",
		id: "customerValueID",
		viewName: "view.Risk",
                              interaction: {
                                  idSuffix: "inner"
                              }
	}
}
const oCustomerValue = await browser.asControl(oCustomerValueSelector); 
await oCustomerValue.enterText("012474")

And it doesn't work b/c wdi5 reports "control not found", which indicates that your selector is wrong. And indeed, if you use interaction: "root" as the interaction pattern on the selector, things work™. I just verified this via this:

it("should put text into the multi input control", async () => {
  const multiInputSelector: wdi5Selector = {
      forceSelect: true, // we need this as the control receives an input that changes the dom structure
      selector: {
          id: "MultiInput",
          viewName: "test.Sample.tsapp.view.Main",
          interaction: "root"
      }
  }
  await (browser.asControl(multiInputSelector) as unknown as MultiInput).enterText("123")

  const multiInput = (await browser.asControl(multiInputSelector)) as unknown as MultiInput
  const text = await multiInput.getValue()
  expect(text).toEqual("123")
})

[marco-paciucci]

Nope it does not work. I have coded the following, no error is raised at runtime:

`

           let oCustomerValueSelector = {
		forceSelect: true,
		selector: {
			controlType: "sap.m.MultiInput",
			id: "customerValueID",
			viewName: "ibp.ibpbaseplanningobjectmanagement-v2.view.Risk",
			interaction:  "root"
		}
	}
            let oCustomerValue = await browser.asControl(oCustomerValueSelector);
	await oCustomerValue.enterText("012474") `

This time there's no exception but the value is not changed. Any clue? Is it possible to add a recording to this issue?

[vobu]

if it does not work, what's the console output of wdi5? my hunch is still that your control locator is wrong. Because your browser-scoped call via sap.ui.getCore().byId("application-IBPBPOV2-Manage-component---risk--customerValueID") indicates a view of name "risk" (lowercase!) in a Fiori Launchpad-embedded UI5 app in the namespace application-IBPBPOV2-Manage. But you are using a totally different view name(space) in your wdi5 selector: ibp.ibpbaseplanningobjectmanagement-v2.view.Risk

selector: {
  controlType: "sap.m.MultiInput",
  id: "customerValueID",
  viewName: "ibp.ibpbaseplanningobjectmanagement-v2.view.Risk",
  interaction:  "root"
}

What does the wdi5 dialect in the UI5 test recorder report as a selector?

[marco-paciucci]

The console reads this: [wdi5] creating internal control with id customerValueIDcomdanone.ibp.ibpbaseplanningobjectmanagement-v2.view.Risksap.m.MultiInput c:\Users\paciucma\OneDrive - Danone\My Documents\Danone Marco\Projects\E2E Testing Framework\wdi5\tests\ibp\node_modules\wdio-ui5-service\dist\lib\coloredConsole.js:67 [wdi5] call of function _getControl() returned: "application-IBPBPOV2-Manage-component---risk--customerValueID" c:\Users\paciucma\OneDrive - Danone\My Documents\Danone Marco\Projects\E2E Testing Framework\wdi5\tests\ibp\node_modules\wdio-ui5-service\dist\lib\coloredConsole.js:67 [wdi5] _asControl() needed 891.5396000000037 for customerValueIDcomdanone.ibp.ibpbaseplanningobjectmanagement-v2.view.Risksap.m.MultiInput wdi5] call of function interactWithControl() returned: null but the command:

await oCustomerValue.enterText("012474"); doesn't do anything to the field, it stays empty.

The field ID is: application-IBPBPOV2-Manage-component---risk--customerValueID and the view name is "ibp.ibpbaseplanningobjectmanagement-v2.view.Risk" there's no error whatsoever, it's all good. I do not know the algorithm being used by SAP to generate SAP UI5 controls ID but both values are correct. Moreover, if I use this: await browser.executeAsync(() => { sap.ui.getCore().byId("application-IBPBPOV2-Manage-component---risk--customerValueID").addToken(new sap.m.Token({ "key": "012474", "text": "012474" })); });

the assignment works (i.e. the fields is filled out) but it hangs afterwards and does not carry on with the remainder of the script until it times out.

[github-actions[bot]]

hey 👋 - silence for 30 days 🤐 ... anybody? 😀

[github-actions[bot]]

closed 📴 because silencio 🤫 since an additional 14 days after staleness 📠