Unable to Set Text or Send Keys to Phone Number field

Web Testing
1

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:

image
image1047Ă—554 60.8 KB

Screenshot of code:

image
image380Ă—165 6.54 KB

1 Like
2

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).

3

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.

4

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?

2 Likes
5

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
6

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
7

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.

8

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

3 Likes
9

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)

image
image1360Ă—708 69.1 KB
image
image1436Ă—297 20.9 KB
image
image757Ă—267 22.8 KB

1 Like
10

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
11

Thank you! It works :slight_smile:

1 Like