CODEWITHSUNDEEP
pythonseleniumcontenteditablewebdriverwaitsendkeys
Abdul Moiz
Abdul Moiz

Reputation: 15

How to enter text within a non-input tag using Selenium and Python?

I was trying to automate a site, it is simple, I just want to add a comment of mine to it automatically but the problem there is no 'input' tag I have used the inspect element's search to find it too but it doesnot have an input tag, the divs are not taking the inputs, the site is tiktok and here is the structure of comment box.

<div data-e2e="comment-input" class="tiktok-1vwgyq9-DivInputAreaContainer ecav6zu2"><div data-e2e="comment-text" class="tiktok-qpucp9-DivInputEditorContainer ecav6zu3"><div class="tiktok-ybf3r7-DivInputAreaContainer eryqhwq0"><div class="DraftEditor-root"><div class="public-DraftEditorPlaceholder-root"><div class="public-DraftEditorPlaceholder-inner" id="placeholder-99joi" style="white-space: pre-wrap;">Add comment...</div></div><div class="DraftEditor-editorContainer"><div aria-describedby="placeholder-99joi" class="notranslate public-DraftEditor-content" role="textbox" spellcheck="false" style="outline: currentcolor none medium; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;" contenteditable="true"><div data-contents="true"><div class="" data-block="true" data-editor="99joi" data-offset-key="1eq4b-0-0"><div data-offset-key="1eq4b-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="1eq4b-0-0"><br data-text="true"></span></div></div></div></div></div></div></div></div><div data-e2e="comment-at-icon" class="tiktok-1vi8qz3-DivMentionButton ecav6zu4"><svg width="1em" height="1em" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C28.0553 42 31.7921 40.6614 34.8006 38.401L35.6001 37.8003C36.0416 37.4686 36.6685 37.5576 37.0003 37.9992L38.2016 39.5981C38.5334 40.0397 38.4443 40.6666 38.0028 40.9983L37.2033 41.599C33.5258 44.3619 28.9513 46 24 46C11.8497 46 2 36.1503 2 24C2 11.8497 11.8497 2 24 2C36.1503 2 46 11.8497 46 24V26C46 30.4843 42.1949 34 37.8438 34C35.1966 34 32.8496 32.7142 31.3935 30.733C29.5649 32.7403 26.9303 34 24 34C18.4772 34 14 29.5228 14 24C14 18.4772 18.4772 14 24 14C29.5228 14 34 18.4772 34 24C34 24.5814 33.9502 25.1528 33.8541 25.7096C33.8473 25.8052 33.8438 25.902 33.8438 26C33.8438 28.2091 35.6347 30 37.8438 30C40.1201 30 42 28.1431 42 26V24C42 14.0589 33.9411 6 24 6ZM24 18C20.6863 18 18 20.6863 18 24C18 27.3137 20.6863 30 24 30C26.9395 30 29.3891 27.8841 29.9013 25.0918C29.9659 24.7392 30 24.3744 30 24C30 20.6863 27.3137 18 24 18Z"></path></svg></div><div data-e2e="comment-emoji-icon" class="tiktok-1yq6goo-DivEmojiButton ecav6zu5"><svg width="1em" height="1em" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6ZM2 24C2 11.8497 11.8497 2 24 2C36.1503 2 46 11.8497 46 24C46 36.1503 36.1503 46 24 46C11.8497 46 2 36.1503 2 24Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17 23C18.6569 23 20 21.2091 20 19C20 16.7909 18.6569 15 17 15C15.3431 15 14 16.7909 14 19C14 21.2091 15.3431 23 17 23Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M31 23C32.6569 23 34 21.2091 34 19C34 16.7909 32.6569 15 31 15C29.3431 15 28 16.7909 28 19C28 21.2091 29.3431 23 31 23Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M16 28.3431C16 31.4673 19.5817 36 24 36C28.4183 36 32 31.4673 32 28.3431C32 25.219 16 25.219 16 28.3431Z"></path></svg></div></div>

Upvotes: 0

Views: 1443

Answers (2)

Vivek Kumar
Vivek Kumar

Reputation: 59

I have faced the same issue in MS Azure platform where I required to execute the query. And the query box was not an Input/Textbox/Textarea it was plain div tag enter image description here

enter image description here

Here, I used selenium Actions class as below

WebElement ele = driver.findElement(By.cssSelector("div.monaco-mouse-cursor-text div"))
Actions act = new Actions(driver);
act.sendKeys(ele,"Text You Want To Enter").build().perform();

And it worked just fine for me.

Upvotes: 0

undetected Selenium
undetected Selenium

Reputation: 193298

The <div> tag is having the attribute contenteditable="true". So it will accept character sequence.

To send a character sequence you you need 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.DraftEditor-editorContainer > div.notranslate.public-DraftEditor-content[aria-describedby^='placeholder']"))).send_keys("Abdul Moiz")

  • Using XPATH:

    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@class='DraftEditor-editorContainer']/div[@class='notranslate public-DraftEditor-content' and starts-with(@aria-describedby, 'placeholder')]"))).send_keys("Abdul Moiz")

  • 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

Upvotes: 0

Related Questions