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

undetected Selenium · Accepted Answer · 2023-06-28T20:51:27.347

To replace the text ******* with the text Hello World! as the element is a React element and having the attribute contenteditable="true" 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