How to fill 1 input field divided by different divs? (Example: OTP Verification Input Field)

So in Katalon Studio WebUI Testing Automation, I wanted to fill out this OTP input field (the input is set to static: 1234) but when I fill in the input field, it doens’t add up, if I input the first div with “1” then input the second div with “2”, the “Set Text” command only recognized the last character. (pictures attached for better explanation). How do I solve this?



Try sendKeys.

Still can’t work it won’t fill anything on the input field :frowning:

Please post your test code, the definitions of your Test Objects and any errors you see. (I’ll take a look tomorrow, it’s late here).

This is the code

This is the definition of Test Objects (Input field)

This is where the step on test automation stopped (it won’t fill any input to the input field)

This is the errors

Thank you, Russ! Sorry to bother you, I’ll appreciate it so much if you can check my code and errors.

The error is telling you that element MuiButton-Label can’t be clicked because element <div class="signup-button"> is obscuring it.

image

Try waiting for MuiButton to be visible.

https://docs.katalon.com/katalon-studio/docs/webui-wait-for-element-visible.html

Now I’m gone - 7 hours or so :sleeping:

I think it won’t be visible at all because the input field is never filled. The button at first is unclickable/disabled but when the input field is filled, the button will become enabled/clickable, and on my code the command to fill the input field is never successfully executed.

First State

Second State (when the input field filled, button becomes clickable)