JavaScript focus() method not working to click inside element

Dev Zone Code
1

I’m using SeleniumBasic (a fork of Selenium for VBA) in Excel to programmatically update a field on an internal website at my work for around 200 accounts per day. The field I’m updating is an input element and there must be an event listener or something that requires the element to be clicked before dispatching an event or whatever to signal a change was made.

For example, if I run a script like document.getElementById("myElement").value = 1 to update the value for the field and then run another script to click the save button, the page will discard the value I entered and revert it back to the previous value and no change is made.

However, if the input field is clicked (just clicking in the field and nothing else) before running the script to click the save button the change is kept and the update is successful.

I use SeleniumBasic’s Click() method to click [activate] the input element because I cannot figure out how to do this in JavaScript. Here’s the code I use to make the updates:

Ln 1 driver.ExecuteScript "document.getElementById("myElement").value = 1"
Ln 2 driver.findElementById("myElement").Click
Ln 3 driver.ExecuteScript "document.getElementById("saveButton").click()

My question is how do you focus an element when you’re web scraping?

Here’s something I created for troubleshooting, but still can’t seem to figure it out. I spent hours trying different things and searching online. Maybe I just don’t understand how things work, but SeleniumBasic’s Click() method does exactly what I want, so this has to be possible just writing some JavaScript, right?

<body>
<div>input 1<input id='foo' type='text' value='foo'></div>
<div>input 2<input id='bar' type='text' value='bar'></div>
<div>button<button id='btn' type='button'>my button</button></div>
<script>
document.querySelector("#btn").addEventListener('click', function() { 
let input = document.querySelector("#bar");
input.focus();
console.log(Date());
});
</script>
</body>

If I manually click the button the console will output the datetime and the input 2 element is focused (cursor is inside the element). However, in the console if I execute document.querySelector("#btn").click(), the datetime is output but the element isn’t focused [clicked] like it would be when I manually click the button. I’ve tried writing events for dispatching and I get the same result. Hope this makes sense and it’s something simple I’m missing.

2

I am no expert, but I suspect this is due to security reasons?
When you presumably use console in Developer Tools main window doesn’t have focus so browser will defer focusing until it does. If it would do it immediately focus hijacking would be a really big problem.

When you web scrape, you don’t really execute scripts in an unfocused webpage, you basically simulate user input on a browser level.

3

this is a security mechanism unfortunately

you can’t hijack a user agent interaction if the event wasn’t fired from a user agent interaction

it works because the browser detected it as a result of using the mouse to click a button, if you raise a synthetic event in the console you can’t move focus elsewhere or click other things

kinda like you can’t window.open from the console but you can do it from a click event handler if it came from a mouse to open a popup window

4

This makes sense. Circling back to the event that is tied to clicking inside the input element that registers a change was made [user input was received]. If I can’t focus this element, can I somehow dispatch an event that bubbles up and triggers something to signal the input box was clicked into, or would this also be a security issue?

5

Try

document.getElementById("myInput").value = 'New Value';
document.getElementById("myInput").dispatchEvent(new Event('input', { 'bubbles': true }));
document.getElementById("btn").click();
6

@tk11 that doesn’t work

7

Then you’ll have to track down the code that handles the values to figure out how to change them.

8

I don’t know anything about React, but it appears it may be used on the site I’m using. Is it possible to change the value/state of a React component using JavaScript?