Entered Masked phone number text disappeared

I have a peculiar problem to which I was unable to find an answer. I use Javascript to input masked phone number into the field of salesforce application. I can see the text going in, but as I click create account button, the text in the phone number field disappears.

Note : I tried with SetText, SendKey and also Set Masked Text keywords but in this case text itself not appeared but katalon shows step has passed that’s why I used Javascript.

Can someone help me to over come this issue.

Code :

WebUI.verifyElementPresent(findTestObject(‘Mobile Buy Journey/version_2/obj_TC_05_toVerifyCustomerDetailsSection/inputPrimaryPhoneNumber’),
5)

WebElement pno = WebUiCommonHelper.findWebElement(findTestObject(‘Mobile Buy Journey/version_2/obj_TC_05_toVerifyCustomerDetailsSection/inputPrimaryPhoneNumber’),
30)

WebUI.executeJavaScript(‘arguments[0].value="(989) 898-0909"’, Arrays.asList(pno))

Phone Number appears when Javascript executed:

Phone Number Disappear after clicking CreateAccount Button
image

Here is Element Input Snap :

Your target HTML has a fragment:
<input vlocity_cmt_maskedinput_maskedinput_slds ...

What is vlocity_cmt_maskedinput?

I made a Google search and found the following stuff.

© 2021 Vlocity LLC, a Salesforce company

I (@kazurayam) knew nothing about this product, but I would guess that vlocity_cmt_maskedinput is a JavaScript&CSS library that does a lot of mysterious things behind the scene.

a quote from the page 171:

Constrain Product Attributes Using a Format Mask

You can constrain attribute values using a format mask. For example, if a field contains a telephone number, you can define an attribute mask that constrains the value to an appropriate set of data, such as (999) 999-9999. By applying a format mask, you ensure that a user can type only in a predetermined pattern. The format mask is a part of setting up product attributes on a product.

This description tells me that the Vlocity’s Format Mask software will intervene between the character input by the key stroke and the output on the display as echo. The Vlocity Format Mask software will display only characters that it accepted as valid.

You should be aware that such sophisticated processing is done behind the scene.

Usually in a simple (poorman’s ) web page, when you call setText() to put text “foo” into a <input type="text"> element, the text “foo” will be displayed. But you wrote that your text did not appeared. I do not know exactly what happened. I guess the “Vlocity” library did something myterious behind the scene. I presume, the “Vlocity” only recognise keys typed by a user manually; it does not recognize text trasferred by Selenium SetText command, etc. So that “Vlocity” did not echoed the text you set by setText() keyword.

I think that this javascript code changes the value property of the <input type="tel" value="..."> element.

https://www.w3schools.com/jsref/prop_text_value.asp

The value property contains the default value OR the value a user types in (or a value set by a script).

I guess, the text “(989)898-0909” was set into the value property. It was visible only until you clicked the Create Account button.

When you do “click”, the page will be re-drawn: this may result the phone number field is refreshed. When you do “click”, the Vlocity library does something for the <input> element. I guess, the Vlocity library did not recognize the “value” property that you set by WebUI.executeJavaScript(...) call. The text was ignored by the library.

On the page after the click, beside the “Primary Phone” field, you can find a notification “Required” in red color. This proves that the Vlocity library did not recognize the text “(989)898-0909” at all.

@maltesh.c

I tried to describe my guess what happened.

I have no idea how to modify your test script so that you get comfortable about it.

“The text didn’t appear” — I think, it is not a big issue. You shouldn’t worry about it much because you are not debugging the Vlocity product. If tests for your web app run forward, I think, it’s good enough.

Since the “Primary Phone” already has the parenthesis and hyphen displayed, and with @kazurayam’s information, enter the phone number without them, such as "989 898 0909", or "9898980909" or "989\\t898\\t0909".