如何使用Selenium和Python查找和单击textarea元素

Question

我正在将Selenium与python结合使用，并一直试图单击文本框并输入消息。文本框的HTML如下所示：

<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>

我一直试图通过CSS选择器使用以下代码选择它：

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)

它一直给我一个NoSuchElement。如您所见，我不太了解自己在做什么-请帮助：）

Answer 1

根据HTML，该元素是<textarea>元素。因此，要标识该元素，相关代码应为以下任一代码：

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

解决方案

理想情况下，要标识并单击所需的元素，必须为element_to_be_clickable()引入WebDriverWait，并且可以使用以下Locator Strategies中的任何一个：

• 使用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()
  

• 使用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()
  

• 注：您必须添加以下导入：

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support import expected_conditions as EC
  

Answer 2

您的css选择器错误[css选择器中的.textarea标识class name。

尝试以下css选择器。

input_box = browser.find_element_by_css_selector("textarea[data-a-target='chat-input']")

Answer 3

.texarea不会找到任何元素：

[.表示选择器应在元素的className中寻找进行中的值。

因此，您告诉选择器寻找具有className文本区域的元素。

您正在将className选择器与tagname选择器混淆。如果要通过标记名获取它，则只需使用没有任何点（。）的标记名即可，因此：

find_element_by_css_selector("textarea") 

这将返回它找到的第一个textarea元素，可能不是您想要的。要使其更精确，您可以执行以下操作：

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")

[请注意，在第二个版本中，选择器中如何有多个点（。），告诉引擎使用tagname：classNames搜索

tw-block tw- 
            border-radius-medium tw-font-size-6 tw-full-width tw-textarea tw-textarea--no-resize

文本区域的元素。每个单独的className在Html标记中用空格分隔，因此您使用点（。）告诉选择器将这些className链接在一起。

如果偶然，您有多个具有相同classNames的文本区域，则需要为所需的文本区域找到某种唯一的标识符。因此，KunduK提供的选择器就是一个很好的例子。

也许此链接将帮助您了解有关CSS选择器的更多信息：（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors）