如何在 contenteditable div 上模拟打字？

Question

继我在thread 提出的问题之后，现在我遇到了一个关于如何模拟输入 contenteditable div 的问题。

div标签如下：

<div tabindex="-1" class="input-emoji">
    <div class="input-placeholder" style="visibility: visible;">Type a message</div>
    <div class="input" contenteditable="true" data-tab="1" dir="auto" spellcheck="true"></div>
</div>

为了模拟打字，我的js代码如下：

setTimeout(() => {
    try {
        let inputContainerEl = chatPanelEl[0].getElementsByClassName('input-container');
        let input = inputContainerEl[0].getElementsByClassName('input');

        let message = 'Something to type';
        console.log('MESSAGE: ' + message);
        let chars = message.split('');
        for (let n = 0; n < chars.length; n++) {
            let charCode = chars[n].charCodeAt(0);
            console.log('CHAR: ' + chars[n] + ' => CODE: ' + charCode);

            let keypressEvent = document.createEvent('KeyboardEvent');
            keypressEvent.initKeyboardEvent('keypress', true, true, window, false, false, false, false, charCode, charCode);
            input[0].dispatchEvent(keypressEvent);

            let keydownEvent = document.createEvent('KeyboardEvent');
            keydownEvent.initKeyboardEvent('keydown', true, true, window, false, false, false, false, charCode, charCode);
            input[0].dispatchEvent(keydownEvent);

            let keyupEvent = document.createEvent('KeyboardEvent');
            keyupEvent.initKeyboardEvent('keyup', true, true, window, false, false, false, false, charCode, charCode);
            input[0].dispatchEvent(keyupEvent);
        }
    } catch(err) {
        console.log('ERROR: ' + err);
    }
}, 1000);

我已经在这里检查了一些线程，关于从 vanilla javascript 执行 keydown、keypress 和 keyup 事件。但似乎没有任何效果。

我尝试使用基于 selenium 的解决方案，效果非常好（阅读下面的代码）

public void run() {
    try {
        WebElement container = driver.findElement(By.className("input-container"));
        if (container != null) {
            WebElement input = container.findElement(By.className("input"));
            if (input != null) {
                input.sendKeys("ECHO: " + this.echo);
                Thread.sleep(2000);
                WebElement submitBtn = driver.findElement(By.className("compose-btn-send"));
                if (submitBtn != null) {
                    submitBtn.click();
                }
            }
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}

但由于我不能使用 selenium（由于项目的要求），我不得不改用 Cefsharp。

所以如果有人知道如何在原版 javascript 中执行 selenium "sendKeys" 方法，请帮助我。

谢谢。

Answer 1

这个解决方案对我有用：

element.dispatchEvent(new InputEvent('textInput', {data: keyChar, bubbles: true}));

其中 element 是 contenteditable div 而 keyChar 当然是关键字符 ;)

Answer 2

我有一个 java 代码如下，它可以使用 JavascriptExecutor 执行 sendKeys：-

System.setProperty("webdriver.chrome.driver","E:\\Selenium\\Workplace\\Selenium\\src\\libs\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://www.google.co.in/");
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
WebElement dd= driver.findElement(By.xpath("//input[@id='lst-ib' and @name='q']"));
JavascriptExecutor rightexecutor = (JavascriptExecutor)driver;
rightexecutor.executeScript("arguments[0].setAttribute('value','yahoo')", dd);

替换上面JavascriptExecutor代码中的定位器（即xpath）并将其转换为您的javascript。

或

我找到了解决办法

private void OnIsBrowserInitializedChanged(对象发送者，

IsBrowserInitializedChangedEventArgs args)
{
    if(args.IsBrowserInitialized)
    {
        browser.ExecuteScriptAsync("alert('test');");
    }
}

来源：-

cefsharp execute javascript

看看这个。它有很多方法：-

https://github.com/cefsharp/CefSharp/wiki/Frequently-asked-questions

希望对你有帮助:)

Answer 3

我通过做得到了很好的结果

input [0]. textContent = "my text";