1

I'm using Selenium with python and have been trying to click a text box, and input a message. The text box's HTML looks like this:

<div class="tw-block tw-border-radius-large tw-pd-0">
    <div class="tw-relative">
        <div class="chat-input__textarea">
            <textarea data-a-target="chat-input" data-test-selector="chat-input" class="tw-block tw- 
            border-radius-medium tw-font-size-6 tw-full-width tw-textarea tw-textarea--no-resize" 
            autocomplete="Messenger-chat" maxlength="500" placeholder="Send a message" rows="1" 
            style="padding-right: 3.5rem;"></textarea>
        </div>
     </div>
</div>

I have been trying to select it by css selector with this code:

time.sleep(3)
input_box = browser.find_element_by_css_selector(".textarea")
input_box.click()
for ch in message:
    input_box.send_keys(ch)
input_box.send_keys(Keys.ENTER)

It keeps giving me a NoSuchElement. As you can see I don't really know what I am really doing- please help thanks :)

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
Exosylver
  • 135
  • 1
  • 14

3 Answers3

2

.texarea is not going to find any element:

. indicates that the selector should look for the proceeding value in the className of an element.

So, you are telling the selector to look for an element with className textarea.

You are confusing className selector with a tagname selector. If you want to get it by tagname, you just use the tagname without any dot(.), so:

find_element_by_css_selector("textarea")

This would return the first textarea element it finds, which may or may not be what you want. To make it more precise you can do:

find_element_by_css_selector("textarea.tw-block.tw- 
        border-radius-medium.tw-font-size-6.tw-full-width.tw-textarea.tw-textarea--no-resize")

Notice how in the second version there are multiple dots(.) in the selector, telling the engine to search for an element of tagname textarea with classNames: tw-block tw- border-radius-medium tw-font-size-6 tw-full-width tw-textarea tw-textarea--no-resize. Each individual className is seperated by a space in the Html markup, so you use a dot(.) to tell the selector to chain those classNames together.

If by chance you have multiple textarea's with all the same classNames as above, you'd need to find some kind of unique identifier for the textarea you want. So the selector provided by KunduK is a good example of that.

Perhaps this link will help you to learn more about css selectors: (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)

Ryan Wilson
  • 10,223
  • 2
  • 21
  • 40
2

As per the HTML the element is a <textarea> element. So to identify the element the relevant code would have been either of the following:

  • browser.find_element_by_tag_name("textarea")
  • browser.find_element_by_css_selector("textarea[attribute_name='attribute_value']")

Solution

Ideally, to identify and click within the desired element you have to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

  • Using CSS_SELECTOR:

    input_box = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "textarea[data-a-target='chat-input'][data-test-selector='chat-input'][placeholder='Send a message']")))
input_box.click()

  • Using XPATH:

    input_box = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//textarea[@data-a-target='chat-input' and @data-test-selector='chat-input'][@placeholder='Send a message']")))
input_box.click()

  • 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
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
0

Your css selector is wrong .textarea in css selector identify the class name.

Try below css selector.

input_box = browser.find_element_by_css_selector("textarea[data-a-target='chat-input']")
KunduK
  • 32,888
  • 5
  • 17
  • 41