程序员老王 发布的文章

// 方案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;
}

let input = iframeDoc.querySelector('pre.edit[contenteditable="true"]')
      await sleep(300)
      await simulateHumanInputAwait(input, "你好")
async function simulateHumanInput(target, value, interval = 80) {
  target.focus()
  target.innerText = ""

  for (let i = 0; i < value.length; i++) {
    const char = value[i]
    target.innerText += char

    // 生成输入事件
    const inputEvent = new InputEvent("input", {
      bubbles: true,
      data: char,
      inputType: "insertText"
    })
    target.dispatchEvent(inputEvent)

    // 键盘事件
    const keyEventDown = new KeyboardEvent("keydown", {
      key: char,
      bubbles: true
    })
    const keyEventUp = new KeyboardEvent("keyup", { key: char, bubbles: true })
    target.dispatchEvent(keyEventDown)
    target.dispatchEvent(keyEventUp)

    await sleep(interval + Math.random() * 30)
  }

  target.blur()
}

assume webstorm program location /opt/webstorm

sudo vim /usr/share/applications/webstorm.desktop

type in

[Desktop Entry]
Name=webstorm
Comment=Run My Program
Exec=/opt/webstorm/bin/webstorm
Icon=/opt/webstorm/icon.png
Terminal=false
Type=Application
Categories=Utility;Application;