Input input problems directly via browser console (Knockoutjs)

Question

I have been studying for a short time and I am currently with a challenge that I could not win. There is a Javascript library called Knockoutjs which, from what I read in the documentation, automatically updates the output of a page by entering user data. On the lib website itself, there is an example for testing and for getting to know the syntax better. Following link:

https://knockoutjs.com/examples/helloWorld.html 1

In the example, there are two inputs already with written values. If any changes are made to any of the text boxes, lib updates the output that is just below with the changes as soon as the focus changes from one box to another.

I don’t know if it’s a bug, or I’m missing something I haven’t figured out yet, but there is a situation that the lib stops working once you try to make a "cheat"!

If I make any changes via browser console, besides the output does not change, it is not possible to try to click the text box and change normally, because it is also in the same. The only way is to reload the page to get back to normal.

My question is this: It is possible to make console changes that also cause the output update?

I don’t know if it’s some peculiarity of the library or toh doing something wrong. They follow codes I used to try:

Attempt#01 - Direct change

var box = document.getElementsByTagName("input")[0];
box.value = "Planeta";

The value of the input is changed, but the line HELLO, PLANET EARTH, is unchanged;

Attempt#02 - Simulating input focus and blurring

var box = document.getElementsByTagName("input")[0];
box.focus();
box.value = "Planeta";
box.blur();

As the output update is only done after taking the focus of the input, I tried it but without success...

Try #03 - Using Jquery

//importando lib JQuery para o console do Chrome
var jqry = document.createElement('script');
jqry.src = "https://code.jquery.com/jquery-3.3.1.min.js";
document.getElementsByTagName('head')[0].appendChild(jqry);
jQuery.noConflict();

//selecionando input
var box = document.getElementsByTagName("input")[0];

//mudança ocorre no input, mas não é atualizado na saída
$(box).val("Planeto").change();

//tentativa que achei na net...
$(box).keyup();
$(box).val("Planeto").change();
$(box).keydown();

As you can imagine... it didn’t work either!

I am struggling in this challenge, because I have a project that involves a page that uses this lib (Knouckoutjs) and I found problems in changing an input and the change not being recognized by the web application.

I need to figure out a way to input input input via console to build an automation script for a web page. Is there any way around this problem? I can manually force lib to update the output at some point in the script?

Any help is welcome!

Answer 1

In the example you passed, Knockout will reprint the value on the screen whenever one of the fields undergoes the event change. So, if you want, using native browser Apis, to update the value of one of the fields in a programmed way, you must trigger the event after the change.

For this, use the method dispatchEvent:

const box = document.getElementsByTagName("input")[0];
box.value = 'Planeta (Alterado)';

box.dispatchEvent(new Event('change'));