Hello everyone,
I'm facing a bit of a challenge here that I've been struggling with for some time now. I'm trying to create an automation strategy for a Trading Platform (specifically Trading212) using C# and Selenium.
Everything was going smoothly until I encountered the overlay for Placing an order. I attempted to use sendKeys as usual, but it didn't work out well:
Issues
-Error ElementNotInteractableException (Can't be scrolled into view)
-Error ElementNotInteractableException (Element is not reachable by keyboard)
-js.ExecuteScript("arguments[0].value='12345';", TargetPriceInput); (Changes a value just not the value)
The problem lies with the Price field, which seems impossible to modify. It has a dynamically changing ID, making it challenging to select. I could only identify it by looking for an input with "Text".
Element in Question:
<div class="spinner _focusable" tabindex="-1" data-dojo-attach-event="onkeydown: onKeyDown" id="uniqName_0_131" widgetid="uniqName_0_131">
<span class="spinner-placeholder" data-dojo-attach-point="placeholderNode">Price</span>
<input type="text" autocomplete="off" id="uniqName_0_132" widgetid="uniqName_0_132">
<div class="spinner-arrow-container">
<div class="spinner-arrow spinner-down svg-icon-holder" data-dojo-attach-point="spnLeftNode"><svg class="svg-icon dropdown-arrow-down-icon" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd">
<polyline stroke="#6F6F7F" points="20.5 14.5 16 19 11.5 14.5" stroke-linecap="round"></polyline>
</g>
</svg>
</div>
<div class="spinner-arrow spinner-up svg-icon-holder" data-dojo-attach-point="spnRightNode"><svg class="svg-icon dropdown-arrow-up-icon" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd">
<polyline stroke="#6F6F7F" points="20.5 18.5 16 14 11.5 18.5" stroke-linecap="round"></polyline>
</g>
</svg></div>
</div>
<div class="spinner-disabled-click-catcher" data-dojo-attach-point="clickCatcherNode"></div>
</div>
It appears that JavaScript controls the updates when a key is pressed while the box is selected. However, I couldn't figure out how to make Selenium select the box or input data into it. There are events attached to the input box, but I can't find a way to proceed.
TargetPrice.Click();
TargetPrice.SendKeys("05485.00000");
Both attempts resulted in errors and did not work as expected. Here is the original appearance of the panel
Upon inspecting with Firefox Inspector, I discovered that the hidden value of the Element is like a string: "1.31407". Despite being able to update it using ExecuteScript, the validation fails. The value updates visibly, but upon clicking elsewhere, it reverts back.
Further investigation revealed that there might be JavaScript scripts manually evaluating my keypresses and interfering. I'm unsure how to overcome this obstacle.
Event OnKeyDown
function, o = i.checkIntegerPartLength, s = i.onKeyPressed, l = this.state, d = l.currentValue, u = l.maxInputLength, h = this.getPrecision(), f = !1;
for (var p in r.default)
if (void 0 === v[p] && r.default[p] === t.keyCode) {
f = !0;
break
}(t.altKey || 18 === t.keyCode) && (t.stopPropagation(), t.preventDefault());
var g = String.fromCharCode(t.keyCode);
!f && isNaN(parseInt(g, 10)) && 190 != t.keyCode && 110 != t.keyCode && 109 != t.keyCode && 189 != t.keyCode && (t.stopPropagation(), t.preventDefault()), 190 != t.keyCode && 110 != t.keyCode || 0 != h && -1 === this.domNode.value.indexOf(".") || (t.stopPropagation(), t.preventDefault()), 189 != t.keyCode && 109 != t.keyCode || (this.onMinusPress(), t.stopPropagation(), t.preventDefault()), t.shiftKey && !isNaN(parseInt(g, 10)) && (t.stopPropagation(), t.preventDefault());
var m = (g = t.keyCode || t.charCode) == r.default.HOME || g == r.default.END || g == r.default.DELETE || g == r.default.BACKSPACE || g >= 37 && g <= 40;
if (!m && !o && c.default.getLength(this.domNode.value.replace(/\s/g, "")) >= u + h && this.domNode.selectionStart == this.domNode.selectionEnd && t.preventDefault(), !(a || t.keyCode !== r.default.NUMPAD_0 && f)) {
var C = this.domNode.value.split("."),
y = n(C, 1)[0],
b = 48 == t.keyCode || 96 == t.keyCode,
w = this._getTextSelection(this.domNode),
T = w.start,
L = w.length,
_ = this.domNode.value.length === L;
0 === T && "." !== this.domNode.value.charAt(L) && !_ && y.length && b && t.preventDefault()
}
if (o && !m && 190 !== t.keyCode && 110 !== t.keyCode) {
var N = this.domNode.value.split("."),
S = n(N, 2),
E = S[0],
I = S[1],
x = this.domNode.value.indexOf("."),
M = this._getTextSelection(this.domNode),
O = M.start,
P = M.length,
A = E.substr(O, P),
D = A && (A.length > 1 || 160 !== A.charCodeAt(0));
E.replace(/\s/g, "").length >= u && !D && (!I && -1 === x || O <= x) && t.preventDefault()
}
"0" != d || h || m || 48 != t.keyCode && 96 != t.keyCode || t.preventDefault(), 65 == g && t.ctrlKey && this.domNode.select(), setTimeout((function() {
e._destroyed || (s(), e.updateState(e.domNode.value, {
isUserTyping: !0,
keepCursorPosition: !0
}))
}), 5)
}, onFocusEvent: function() {
var t = this.props,
e = t.o
I'm willing to provide any additional information needed. The trading212 demo webpage I'm working on is publicly accessible if you have any insights on how to tackle this issue.
I've already attempted virtual keystrokes using a separate library, but even Windows-based methods don't seem to work strangely.
EDIT: After extensive examination and retesting, utilizing the XPath system suggested in the answer below, I discovered that the reason none of my previous attempts made sense was because I was modifying the wrong element, similar to the correct one. To temporarily resolve this, I used Firefox inspection, selected the target input field, right-clicked, and copied -> XPath.
This provided me with a direct path to the correct XPath.
IWebElement XPathInput = driver.FindElement(By.XPath("/html/body/div[7]/div[2]/div[3]/div[2]/div[1]/div[3]/div/div[2]/div/input"));