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 ?

Asked By: ArnabC

||

Source

Answer 1

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

Answered By: undetected Selenium

How to modify the innerHTML of a contenteditable element

Question:

Answers: