Pfthb

I have faced an issue while using .set(#value) to fill the text field in registering form, e.g: the phone number i wanna put in is 506307 then it ended up with 063075.
The work-around i have been made is executing Javascript block like

execute_script("document.querySelector('#selector').value = '#value'")

However, using the same scripts applying for Webmobile based on React.JS, the scripts above just send the text but didn't send the onChange event, which cause another element cannot be selected/clicked -> made the test failed.

I came up with another approach is to use the send_keys #value to trigger the key-pressed event that would make browser think there was a key-pressed event happen for that form, but it ended up with race-condition like set(#value) as i mentioned.

The another work-around is using What is the best way to trigger onchange event in react js , but i tend to use the native Capybara actions before making that tricky Javascript.

So, is there any other way to interact / fill the form field which won't cause that Race condition issue ?

Thanks everybody in advance.

Note: Any "solution" suggested that is purely the use of execute_script to run some JS is a terrible idea since it completely bypasses the concept of testing what a user can do and can basically make your test worthless.

The root cause of the issue here is the JS behavior attached to the input not being able to handle the key events fast enough. The proper fix would be to fix the JS, however if that's not possible there's a few things you can try

First you can try changing the clear method being used by set

element.set('506307', clear: :backspace)

or

element.set('506307', clear: :none) 

If that doesn't change anything then try clicking on the input, followed by a short sleep before setting the content

element.click
sleep 0.25
element.set('506307')

If none of those work around the issue we need to know exactly what JS behavior you have attached to the input and/or what events that JS behavior is listening to.