Firefox C# Selenium 无法使用 sendKeys 设置值，JavaExecutor 似乎没有影响它

Question

Hi all,

Bit of a conundrum here for me, been at it a while to get past this issue but am just seemingly stuck. I am trying to write an automation strategy for a Trading Platform (In this case Trading212) and attempting to use C# with Selenium in order to do so.

All was going fine until I got to the overlay that deals with Placing an order. Much like normal I tried sendKeys but that responded badly with all attempts:

Errors

-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 bit I'm trying to adjust is the Price which apparantly can not be modified from any way I can find and it was hard enough to select as it has a dynamically changing ID, no class to hang on to was only able to get it by finding an input with "Text".

Element I am trying to update:

    <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 seems like it is tied with Javascript to update when a key is pressed and the box is selected but I can't seem to get selenium to select the box nor push data into it. There are events tied to the input box but can't seem to find a way to make it go.

                    TargetPrice.Click();
                    TargetPrice.SendKeys("05485.00000");

Both just give errors and refuse to do the job. original look of the panel

Firefox Inspector also shows me the value of the Element is indeed a string like value: "1.31407" which is hidden but I definitely was able to update with ExecuteScript but it is not Validating it. I can see the value is updated but when I click anywhere else it just gets dumped.

Looking into it further it seems there are some scripts probably JavaScript that manually evaluate what buttons I am pressing and resolve it. Not sure how to get around that.

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

Happy to provide as much details as needed. The page I'm dealing with is the demo webpage for trading212 so freely publically accessible if you happen to know how to make it go.

Tried already to do virtual keystrokes using a separate library but even windows based seem to not be getting picked up weirdly.

EDIT: After a long hard look and some decent retesting using the XPath system advised in the answer below I managed to find out that the reason none of it made sense if because despite my best efforts the Element being attempted to be modified was NOT the correct one but a similar one.

To resolve even if in a temporary way I went into firefox inspected, selected the target input field and right clicked, then I clicked to copy -> XPath.

This gave me a direct route 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"));

Answer 1

EDIT: You should try XPATH like this:

IWebElement XPathSpan = driver.FindElement(By.XPath("descendant::span[@class='spinner-placeholder' and text()='Price']")); //verify it found the span
IWebElement XPathInput = driver.FindElement(By.XPath("following-sibling::input")); //this should be your input

The XPATH you have is fine but if the dom changes so that there's an extra div in the hierarchy it's going to break the one you have. The key parts here is descendant tell it to traverse down through the children, grandchildren, and so on. Since you're using driver.FindElement() it's going to start at the root of the document. The second line we start from the span and tell it to find the first sibling that is of type input which should be the one you're looking for.

Well first, I'd try finding it with XPATH: "descendant::span[text() = 'PRICE']/following-sibling::input"

That would seem to me to be more reliable, in case they add another input or something.

Given that it's parent has the class "spinner _focusable" and some javascript for onkeydown, I'd assume you'd find that element and interact with it first, then you can interact with the price one.

So your steps would be:

1. find input with XPATH above
2. find parent input such as var inputParent = input.FindElement(By.XPath("parent::div")) //assuming input is the name of the variable from step 1
3. inputParent.Click();
4. Thread.Sleep(500); //something like that to wait for the javascript, you could also use a webdriverwait as well
5. input.SendKeys(...);