// 方案1:针对React的完整事件模拟
async function simulateReactInput(element, text) {
if (!element) return;
// 1. 先聚焦
element.focus();
await sleep(50);
// 2. 清空现有内容
const descriptor = Object.getOwnPropertyDescriptor(element, 'value');
if (descriptor && descriptor.set) {
descriptor.set.call(element, '');
}
// 3. 触发React的onChange事件链
['focus', 'mousedown', 'mouseup', 'click'].forEach(eventName => {
element.dispatchEvent(new MouseEvent(eventName, {
bubbles: true,
cancelable: true,
view: window
}));
});
// 4. 逐个字符输入(更真实的React方式)
for (let i = 0; i < text.length; i++) {
const char = text[i];
// 设置值
element.value += char;
// React主要监听input事件,但要使用正确的属性
const inputEvent = new InputEvent('input', {
bubbles: true,
cancelable: true,
inputType: 'insertText',
data: char,
isComposing: false
});
// 触发input事件(React监听的)
element.dispatchEvent(inputEvent);
// 同时触发React的onChange事件
const changeEvent = new Event('change', {
bubbles: true,
cancelable: true
});
element.dispatchEvent(changeEvent);
// 触发键盘事件(可选)
const keyDownEvent = new KeyboardEvent('keydown', {
key: char,
code: `Key${char.toUpperCase()}`,
charCode: char.charCodeAt(0),
keyCode: char.charCodeAt(0),
which: char.charCodeAt(0),
bubbles: true
});
element.dispatchEvent(keyDownEvent);
await sleep(30 + Math.random() * 50);
}
// 5. 触发blur事件(React可能在这里进行验证)
setTimeout(() => {
element.blur();
element.dispatchEvent(new Event('blur', { bubbles: true }));
}, 100);
return true;
}