How to automate filling out knockout form

Question

Hello I currently have a site with the following section in my chrome dev tools

<div class="itemEditorField-inputsRelation">
   <input class="details-relativeInput-ageOnset js-relativeInput-ageOnset" type="number" data-bind="numeric: ageOnset, attr: { min: 0, max: 999, placeholder: 'Age' }" min="0" max="999" placeholder="Age"></input>
</div>

How do I simulate entering text into the knockoutJS input field? I have tried ...

e = $.Event('keydown');e.keyCode=50;$('input.details-relativeInput-ageOnset.js-relativeInput-ageOnset').trigger(e);

but all it returns is the object itself. I do not have the code itself to plug anything into. I just have Chrome and JQuery to use. Any help would be greatly appreciated. Thanks.

Answer 1

If you had a normal value binding, the trick would be firing the change trigger for the input field. This might work for you, but it's hard to say, since you have a numeric binding, which is not a standard binding handler, but a custom one. Whatever event causes the bound variable to be updated is what you want to trigger.

A demo with a value binding is below.

 var vm = { ageOnset: ko.observable('') }; vm.ageOnset.subscribe(function(newValue) { alert("New value:" + newValue); }); ko.applyBindings(vm); setTimeout(function () { $('input').val('12').change(); }, 500); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div class="itemEditorField-inputsRelation"> <input class="details-relativeInput-ageOnset js-relativeInput-ageOnset" type="number" data-bind="value: ageOnset, attr: { min: 0, max: 999, placeholder: 'Age' }" min="0" max="999" placeholder="Age" /> </div>