Set Text too fast?

I have a web form with two input fields:
A:

 <input class="c-papkolko-kolicina m-textbox ui-corner-all ui-widget" type="text" style="float: left; margin-left: 4px; width: 38px;" spellcheck="false" maxlength="4">

B:

 <input class="c-papkolko-opis m-textbox ui-corner-all ui-widget" type="text" style="float: left; margin-left: 4px; width: 203px;" spellcheck="false" maxlength="140">

I wish to send text to A, by using CSS selector ‘.m-pap-form-kolko .c-papkolko-kolicina’. And it usually works fine.

However, sometimes the text gets sent to element B.

Is it possible that Katalon is evaluating the CSS class ‘.c-papkolko-kolicina’ too quickly? I mean, it gets to .c-papkolko- and then it decides it is good enough and then sends text to .c-papkolko-opis ? :slight_smile:

Any thoughts?

I suppose, In some cases the focus is getting shifted from A to B. One of the reason could some async call has returned.

Try click action on the text box first and then call the sendkeys

It’s hard to check when and if the focus is getting shifted, because 9 out of 10 times the test goes as intended.
I can just add delays to make it more robust, I just wanted to know what exactly was happening. Thanks for your input.

Mate, it certainly sounds like a focus shift.

1 - Is there any javascript executing? Is there any javascript running via timers (setTimeout/setInterval) ?

2 - Try this to harden your selector:

“.m-pap-form-kolko .c-papkolko-kolicina[maxlength=4]”

If #2 suffers the same issue, then I’d say #1 is highly likely. In which case, I wouldn’t hope to rely on Selenium/Katalon (running in a different process/thread) to be able to control that part of your app reliably 100% of the time.

Solution? Guess what… :slight_smile:

Inject some javascript to apply the change to the element. That javascript will happen in the browser, in a single shot, in sync with the rest of the page (and therefore can’t be interrupted). Then you won’t need to rely on externals (like webdriver code) getting their timing “just right”.

Fair warning: if any code on that page relies on a change event firing when that element is changed, you’ll need to trigger that event yourself at the end of that injection code. Easy to do, but we’re not there yet B)

Try #2 first. Hammer that test for an hour or something… if it works, then all is good. I suspect though, it’s going to fail in the same way.

Let me know…

1 Like

Russ,

I tried #2 and it worked. That’s all good. The test is working.

However, I still don’t know why exactly that happens. That’s what I wanted to know.
I tried figuring out if there is any javascript, but all I can see (via dev tools) is that there some communication with the server, but nothing I can correlate with this focus shift.

Can you expand on the “inject some javascript” stuff? How would you do that?

Hi Mate

I tried figuring out if there is any javascript, but all I can see (via
dev tools) is that there some communication with the server, but nothing
I can correlate with this focus shift.

Use firefox devtools inspector on that element - is there a small “ev” icon at the end of the line in devtools? Here’s an example, using the Upvote button at the end of your message above:

Click the ev icon, it will show the event handler(s) attached to the control. You can try checking other controls, too. My suspicion however, is that the page is executing something in a timer (does the page have animation?) which is stealing the focus.

Can you expand on the “inject some javascript” stuff? How would you do that?

I just meant executing the code you need by running it via WebUI.executeJavaScript. That will help mitigate the timing issue.

About the server communication - what is it? XHR/Ajax? Do you know what the payload is (i.e. what’s contained in the response).

image.png