Unable to Set Text or Send Keys to Phone Number field

Hi everyone. I am unable to use the Set Text and Send Keys on some phone number fields. The test case runs but the fields are empty and the cursor is at the end of the "(___)___-____". Also, when I use the web recorder, it is not recording the fact that I am manually entering in a phone number, it just shows that I have clicked on the field. This field only allows numbers and I believe the "(___)___-____" inside the field has something to do with it.

I have tried in both Chrome and IE.

How the field looks after the test case is run:
image

Screenshot of web recorder:

Screenshot of code:
image

Commendations for posting a detailed problem report.

However, we’re going to need even more information. Problem is, I’m not sure yet what exactly I need :confused: The other problem you have - the Recorder is highly unlikely to aid you in this case.

Guess: that Kendo/jQuery stuff is very likely what is causing your problem. I think it likely that calling the correct jQuery method will get you past the issue. I suggest you read the Kendo docs and find out the API you need to modify the input control’s value from code. Once you have that, post it (or a link to it) here and I’ll help you write the code to do the job.

Homework: Find the Kendo API doc(s).

On the off-chance it might work using straight vanilla JavaScript, try this in the browser console:

document.querySelector("#WitnessHomePhoneNumber").value = "999-999-9999";

You might need to tweak the value to suit the field mask.

So I found these 2 pages.

https://demos.telerik.com/kendo-ui/maskedtextbox/api

https://docs.telerik.com/kendo-ui/api/javascript/ui/maskedtextbox

Also, running the straight vanilla JavaScript did work in the browser console.

document.querySelector("#WitnessHomePhoneNumber").value = "(999) 999-9999";
document.querySelector("#WitnessHomeWorkNumber").value = "(999) 999-9999";

These both populated the fields. How can I incorporate them into my katalon test case?

Use Script view.

Place this in your test:

String js = 'document.querySelector("#WitnessHomePhoneNumber").value = "999-999-9999";'
WebUI.executeJavaScript(js, null)

Obviously, change the input value to whatever you want.

If normally “things happen” when a user types into the field, you may need to trigger an onchange handler. Hopefully, the code above should do the trick.

2 Likes

And here’s the code using the Kendo API:

String js = '''
 $("#WitnessHomePhoneNumber").kendoMaskedTextBox({
    mask: "(000) 000-0000",
    value: "1234567890"
});
'''
WebUI.executeJavaScript(js,null)

Again, change the value to whatever you want.
I’m pretty sure your mask is already set. In that case you can delete mask: "(000) 000-0000",

1 Like

I’ve had this happen before. If I remember correctly, I was able to resolve it using selenium as follows:

WebElement element = WebUiCommonHelper.findWebElement(findTestObject(“path/to/object”), 30)
element.clear()

You could also try sending the Home key like this:

element.sendKeys(Keys.HOME)

Either of these should (in theory) place the cursor at the beginning of the field, after which you should be able to enter data correctly.

Thank you. This worked! Hoping to do the same thing with the kendo dropdowns.

2 Likes

Hi Russ,

Any idea on how to select dropdowns using javaScript? The “select by…” actions do not work for the KendoDropDownList. I want to select the dropdown by their names (i.e. Passenger)

Sure.

The CSS:

#EntityType_listbox li:nth-child(N) 

Replace N with the 1-based index of the <li> element you need (so Passenger would be 4)

JavaScript

String js = "document.querySelector('#EntityType_listbox li:nth-child(4)').click()"
WebUI.executeJavaScript(js, null)

(I’ll move this to a new thread/topic)

1 Like

Thank you! It works :slight_smile: