Python Selenium: How to set text of an DIV based editor?

Question

I am trying to send Twitter DM via Python Selenium. I am able to select and click the "editor" but can't send keys. The code is given below:

import time

from selenium import webdriver
from selenium.common.exceptions import NoSuchElementException


def is_dm_enabled():
    driver.get('https://twitter.com/<TWITTER HANDLE YOU FOLLOW>')
    time.sleep(2)
    has_dm = False
    dm_elem = None

    try:
        dm_icon = driver.find_element_by_xpath(
            '//*[@id="react-root"]/div/div/div/main/div/div/div/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div/div[2]')
        if dm_icon:
            has_dm = True
            dm_elem = dm_icon
    except NoSuchElementException:
        has_dm = False
        dm_elem = None
    finally:
        return has_dm, dm_elem


def login_twitter(user, pwd):
    USERNAME = user
    PASSWORD = pwd

    # navigate to the application home page
    driver.get("https://twitter.com/login")

    # get the username textbox
    login_field = driver.find_element_by_name("session[username_or_email]")
    login_field.clear()

    # enter username
    login_field.send_keys(USERNAME)
    time.sleep(1)

    # get the password textbox
    password_field = driver.find_element_by_name("session[password]")
    password_field.clear()

    # enter password
    password_field.send_keys(PASSWORD)
    time.sleep(1)
    password_field.submit()


if __name__ == '__main__':
    driver = webdriver.Firefox()
    driver.implicitly_wait(30)
    driver.maximize_window()

    login_twitter('<YOUR TWITTER USER>', '<YOUR TWITTER PASSWORD>')
    time.sleep(5)
    f, e = is_dm_enabled()
    if f:
        e.click()
        time.sleep(5)
        driver.find_element_by_class_name('DraftEditor-editorContainer').click()
        driver.execute_script("document.querySelector(\".DraftEditor-editorContainer span\").style.display = \"block\"")
        driver.execute_script("document.querySelector(\".DraftEditor-editorContainer span\").innerHTML = 'Take this'")
        # elems = driver.find_elements_by_css_selector('.DraftEditor-editorContainer')
        # print(len(elems))

Screenshot the DOM is given below:

Which line of code, are you facing this problem? – Gokul nath Mar 16 '20 at 09:51 — Gokul nath, Mar 16 '20 at 09:51
@Gokulnath when setting the innerHTML of the element. – Volatil3 Mar 16 '20 at 09:54 — Volatil3, Mar 16 '20 at 09:54

score 1 · Answer 1 · answered Mar 16 '20 at 09:52

1

Instead of executing JS to type in the UI, try sendKeys method.

use the XPATH of the actual input field : //*[contains(@class, 'DraftStyleDefault')]. So that would make your code like:

driver.find_element_by_xpath("//*[contains(@class, 'DraftStyleDefault')]").click()
driver.find_element_by_xpath("//*[contains(@class, 'DraftStyleDefault')]").clear()
driver.find_element_by_xpath("//*[contains(@class, 'DraftStyleDefault')]").send_keys('Your Message here.')

answered Mar 16 '20 at 09:52

Naveen

770
10
22

I did try `send_keys()` - It gives `
is not reachable by keyboard`
– Volatil3 Mar 16 '20 at 09:55
Check out if this answer helps https://stackoverflow.com/a/49872160/7964299 – Naveen Mar 16 '20 at 10:20

score 1 · Accepted Answer · answered Mar 16 '20 at 10:26

1

I have ran this code in Chrome with alternate suggested by Naveen,

driver.find_element_by_xpath("//*[contains(@class, 'DraftStyleDefault')]").click()
driver.find_element_by_xpath("//*[contains(@class, 'DraftStyleDefault')]").clear()
driver.find_element_by_xpath("//*[contains(@class, 'DraftStyleDefault')]").send_keys('Your Message here.')

It's working fine for me, i'm suspecting there may be a mismatch between your browser version and driver version. Try downloading the driver that supports your browser. I too had similar issues in past, it was fixed when i corrected my driver version that matches browser!

answered Mar 16 '20 at 10:26

Gokul nath

494
2
8
17

1

I tried your code with Chrome driver(latest) instead of firefox. It gave another error `selenium.common.exceptions.WebDriverException: Message: unknown error: cannot focus element`. Which web driver did you use? – Volatil3 Mar 16 '20 at 11:38
I'm using Chrome, Chrome Version 80.0.3987.132 ChromeDriver 80.0.3987.106. Pls download chrome driver according to your Chrome version. – Gokul nath Mar 16 '20 at 11:42
Finally worked. But I am surprised why is it not working for Firefox? – Volatil3 Mar 16 '20 at 12:13

Python Selenium: How to set text of an DIV based editor?

2 Answers2