How to modify the innerHTML of a contenteditable element

Question

I'm using Selenium with Chrome-driver and python3.6 to test a website. I have code snippet in the webpage as follow:

<div tabindex="-1" class="_3F6QL _2WovP">
<div class="_39LWd" style="visibility: visible;">Type a message</div>
<div class="_2S1VP copyable-text selectable-text" contenteditable="true" data-tab="1" dir="ltr" spellcheck="true">*******</div>
</div>

I want to replace the ******* with Hello World! using Selenium in the webpage. How do I do that ?

https://stackoverflow.com/questions/35922259/modify-innerhtml-using-selenium — Klemen Tusar, Oct 21 '18 at 10:41
Possible duplicate of [Modify innerHTML using selenium](https://stackoverflow.com/questions/35922259/modify-innerhtml-using-selenium) — JeffC, Oct 22 '18 at 02:52
See: [How do I do X?](https://meta.stackoverflow.com/questions/253069/whats-the-appropriate-new-current-close-reason-for-how-do-i-do-x) The expectation on SO is that the user asking a question not only does research to answer their own question but also shares that research, code attempts, and results. This demonstrates that you’ve taken the time to try to help yourself, it saves us from reiterating obvious answers, and most of all it helps you get a more specific and relevant answer! See also: [ask] — JeffC, Oct 22 '18 at 02:54

score 2 · Accepted Answer · answered Oct 21 '18 at 16:38

To replace the text ******* with the text Hello World! as the element is a React element you need to induce WebDriverWait for the element to be clickable and you can use either of the following solutions:

Using CSS_SELECTOR:

element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.copyable-text.selectable-text[data-tab='1']")))
element.click()
element.clear()
element.send_keys("Hello World!")

Using XPATH:

element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[contains(@class,'selectable-text')][contains(.,'*******')]")))
element.click()
element.clear()
element.send_keys("Hello World!")

Note: You have to add the following imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

How to modify the innerHTML of a contenteditable element

1 Answers1

Linked