selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable while sending text to contenteditable div element

Question

I am having trouble with a selenium send keys on discord. I am attempting to send a message to a user.

The error I get is:

selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable

The HTML is as follows:

The Object im trying to send_keys that is highlighted by the xpath is as follows:

My code is as follows

inputMessage = wait.until(EC.visibility_of_element_located((By.XPATH,"//div[contains(text(),'Message @')]/..")))

#inputMessage = driver.find_element_by_xpath("//div[contains(text(),'Message @')]/..") 

inputMessage.send_keys(msg,Keys.ENTER) 

I have attempted several ways to try to solve the error but have not succeeded. Any help would be appreciated. Thank you.

Answer 1

The ElementNotInteractableException error tells you that you can't use the send_keys() method on this webElement. I can't really tell you what could work, considering the lack of information considering the problem, but here are some clues :

• Using the ActionsChains to try to input what you want in the field:

from selenium.webdriver.common.action_chains import ActionChains
actions = ActionChains(self.driver)
actions.send_keys('your_data')
actions.perform()

• Try inputMessage.click() before you try to send keys

Otherwise, it happened to me too, and the thing was that i tried to send keys to the div, and not to the element which was inside it.

Hopes it help !

Answer 2

HTML contenteditable Attribute

By using some JavaScript event handlers you can transform your web page into a full and fast rich text editor only by setting the contenteditable attribute on nearly any HTML element to make it editable. As an example, to create a <div> element whose contents an user can edit would be:

<div contenteditable="true">
  This text can be edited by the user.
</div>

When an HTML element has contenteditable set to true, the document.execCommand() method is made available. This lets you run commands to manipulate the contents of the editable region. However, there seem to be some difference in usage of contenteditable across different browsers. As an example, when you press Enter or Return to create a new line of text inside an editable element:

• Firefox inserted <br> elements
• IE/Opera used <p> elements
• Chrome/Safari used <div> elements
• Firefox 60 wraps the separate lines in <div> elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.

---

This usecase

As per the HTML it seems the next <div> with attribute aria-label="Message @Ticketing" has the property contenteditable="true". So ideally you should be able to invoke send_keys() on this element.

---

Solution

Finally, to interact with an element you need to to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

• Using CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div[aria-label='Message @Ticketing'][data-slate-editor='true'][role='textbox']"))).send_keys(msg) 
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@aria-label='Message @Ticketing' and @data-slate-editor='true'][@role='textbox']"))).send_keys(msg) 
  

• 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