为什么在IE 11中Selenium WebDriver的SendKeys上不触发React的onChange事件? [英] Why is React's onChange event not fired on Selenium WebDriver's SendKeys in IE 11?
问题描述
我们有一个相对简单的React组件，其中包含一个input元素:
We have a relatively simple React component with an input element in it:
export class MyInput extends Component {
componentDidMount() {
function log(e) {
console.log(`Event: ${e.type}, isTrusted: ${e.isTrusted}, input value: ${e.target.value}`, e);
}
this.rawInput.addEventListener("change", log);
this.rawInput.addEventListener("input", log);
}
onChanged(e) {
console.log("raw-input.onChanged: e.target.value", e.target.value);
this.props.onChanged(e.target.value);
}
render() {
return (
<div className="my-class">
<input
value={this.props.value}
onChange={this.onChanged.bind(this)}
ref={(input) => { this.rawInput = input; }}
/>
</div>
);
}
}
基本上，这只是一个包装较浅的input元素，而顶部添加的日志记录则是出于调试目的.
Basically, this is just a slightly wrapped input element, while the logging added on top is for debug purposes.
它可以正常处理键入，还可以处理Chrome，Firefox和IE 11中Selenium WebDriver下的SendKeys(前提是WebDriver的EnableNativeEvents是true).
It handles typing just fine in regular usage, it also handles SendKeys under Selenium WebDriver in Chrome, Firefox and IE 11 (provided that WebDriver's EnableNativeEvents is true).
但是，当通过WebDriver在Internet Explorer 11中使用EnableNativeEvents = false运行时，执行SendKeys时不会触发onChanged事件.最奇怪的是，触发了HTML input事件.下面是控制台输出:
However, when run in Internet Explorer 11 by WebDriver and with EnableNativeEvents = false, the onChanged event is not fired when SendKeys is executed. What's most weird is that the HTML input event is fired. Below is the console output:
请注意，在键入"test"时输入的value正在更改，但是没有onChange.
Notice that the input's value is changing while "test" is being typed, but there's no onChange.
以下是WebDriver情况下扩展的input事件:
Below is an expanded input event in case of WebDriver:
如果用户随后通过键盘在同一输入中键入，则会出现onChange事件:
If a user then types via keyboard in the same input, the onChange event is there:
以下是在用户键入的情况下扩展的input事件:
Below is an expanded input event in case of user typing:
紧密分析显示，input事件的唯一区别是在WebDriver isTrusted: false下，而在实际键入isTrusted: true时.
Close analysis shows that the only difference in the input events is that under WebDriver isTrusted: false, while on real typing isTrusted: true.
问题是为什么在第一种情况下onChange事件不会被React触发?
The question is why in the first case onChange events are not fired by React?
我认为这是因为React用isTrusted: false跳过了事件，因为这意味着它们是模拟的，而不是真实的用户事件.但是，我无法为此找到任何证据.如果是这种情况，您介意提供一个指向帖子的链接或处理该帖子的React源中的一行吗?
I assume this is because React skips events with isTrusted: false because this means they are simulated, not real user events. However, I was not able to find any proof for this. If it's the case, would you mind providing a link to a post or a line in React sources that handles it?
- 反应:16.7.0
- Selenium.WebDriver.IEDriver:3.14.0
推荐答案
将nativeEvents功能设置为false(这是使用EnableNativeEvents属性设置的功能)时，您正在告诉IE驱动程序以使用JavaScript模拟事件.通过JavaScript模拟的事件
无法将isTrusted属性设置为true .该属性旨在准确检测您遇到的情况. Firefox和Chrome的驱动程序实现是由供应商为那些浏览器(分别为Mozilla和Google)生产和维护的，因此，这些驱动程序可以以IE驱动程序无法访问(并且很可能永远不会)的方式访问浏览器的内部组件.将)有.如果React确实取消了该属性以触发onChanged事件，那么此处要做的正确的事情是设置EnableNativeEvents = true.
When setting the nativeEvents capability to false (which is what you’re setting with the EnableNativeEvents property), you’re telling the IE driver to use JavaScript to simulate the events. Events simulated via JavaScript
cannot have the isTrusted property set to true. That property is designed to detect exactly the scenario you’re experiencing. The driver implementations for Firefox and Chrome are produced and maintained by the vendors for those browsers (Mozilla and Google, respectively), and as such, those drivers have access to internals of the browser in ways that the IE driver does not (and likely never will) have. If React is indeed keying off that property to fire the onChanged event, then the proper thing to do here is set EnableNativeEvents = true.
这篇关于为什么在IE 11中Selenium WebDriver的SendKeys上不触发React的onChange事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
