How to simulate typing on contenteditable div?

Following to my question at this thread, now I'm stuck with a problem on how to simulate typing in a contenteditable div.

The div tag is like below:

<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>

And in order to simulate typing, my code in js is like below:

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);

I checked some threads here already, regarding performing keydown, keypress and keyup events from vanilla javascript. But nothing seems to works.

I tried using selenium based solution and it works like charm (read the code below)

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();
    }
}

But since I'm not able to use selenium (due to project's requirement), I'm forced to use Cefsharp instead.

So if anybody knows on how to perform selenium "sendKeys" method in vanilla javascript, please help me.

Thanks.

Answers:

Answer

This solution works for me:

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

where element is contenteditable div and keyChar is of course key character ;)

Answer

I have a java code as below which can perfrom sendKeys using JavascriptExecutor :-

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);

Replace your locator(i.e. xpath) in above JavascriptExecutor code and convert it into your javascript.

OR

I have found a solution

private void OnIsBrowserInitializedChanged(object sender,

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

Source :-

cefsharp execute javascript

check this out. It having many method :-

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

Hope it will help you :)

Answer

I was able to get good results by doing

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.