I’m trying to fill out a user form using javascript, however when I use .value to change the element to the customer’s name it doesn’t work properly. The value change, however once I save the form, the value changed back to its original value. This is the piece of HTML where I’m targeting the customer’s name
<span class="next-input next-medium"><input placeholder="Name" height="100%" autocomplete="off" value="insert-customer-name" data-spm-anchor-id="a2g0o.placeorder.0.i5.f94f29fdF6dfJe"></span>
What I wrote is:
const inputElement = document.querySelector('.next-input.next-medium input');
inputElement.value = 'Customer Name';
I even tried with
const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true, view: window });
inputElement.dispatchEvent(clickEvent);
// Set the value of the input element to 'Customer Name'
inputElement.value = 'Customer Name';
However all the time, the value change to “Customer Name” and then as soon as I manually click on the input or save the form it changed back to ‘insert-customer-name’ which was the original value.
I would have used puppeteer, but I’m trying to build a chrome extension so I have to stick with javascript since puppeteer is not supported.
Could you please help me to solve it? thanks a lot in advance!