Webbrowser autologin in a modal-dialog

Question

I'm trying to populate fields into an eo.webbrowser control that has the fields appear in a modal-dialog.

The dialog: https://i.stack.imgur.com/jGJbw.jpg

The HTML: https://i.stack.imgur.com/q1Ez5.jpg

I have tried: eowvMain.EvalScript("document.getElementById('rule-0-property-0').value='TEST';");

But I am getting this error: EO.WebBrowser.JSException: ', line 1, col 50 - 51: Uncaught TypeError: Cannot set properties of null (setting 'value')'

Can anyone point in the right direction please?

Edit: This seems to change what the textbox says, but not the actual value.

eowvMain.EvalScript("document.querySelector('[data-test="rule-0-property-0"]').value='TEST';");

Answer 1

That input does not have an id of rule-0-property-0, so you would get null from using getElementById('rule-0-property-0')

Option 1

Using querySelector should work instead:

eowvMain.EvalScript("document.querySelector('[data-test=\"rule-0-property-0\"]').value='TEST';");

There are a few ways that value is assigned to after you set it. If you want to prevent that, you'll need to clone the object to remove all of it's event listeners. Even then, that won't be a catch-all, if it's an event listener on the window that subsequently searches for the element, you could still experience an event handler overwriting it. And, if that element relies on any of those event listeners, you could run into other problems.

string evalScript = @"
    //Find the element through a data attribute selector
    var element = document.querySelector('[data-test=\"rule-0-property-0\"');
    var clone = element.cloneNode(true);

    //replace the element to remove all of its event listeners
    element.outerHTML = clone.outerHTML;
    element.value = 'TEST';
    element.setAttribute('value','TEST');
";

eowvMain.EvalScript(evalScript);

Option 2

Add an id to that input element and use getElementById:

<input id="rule-0-property-0" data-test="rule-0-property-0" class="input" placeholder="Trait *" />