如何使用 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 選擇器 select 它：

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

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

請注意，在第二個版本中，選擇器中有多個點 (.)，告訴引擎使用classNames搜索tagname名 textarea 的元素： tw-block tw- border-radius-medium tw-font-size-6 tw-full-width tw-textarea tw-textarea--no-resize 。 每個單獨的 className 都由Html標記中的空格分隔，因此您使用點 (.) 告訴選擇器將這些 className 鏈接在一起。

如果碰巧你有多個classNames與上面的所有相同的類名，你需要為你想要的 textarea 找到某種唯一標識符。 所以KunduK提供的選擇器就是一個很好的例子。

也許此鏈接將幫助您了解有關 css 選擇器的更多信息：（ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors ）

Answer 2

根據 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 ，並且可以使用以下任一定位器策略：

• 使用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 3

您的 css 選擇器錯誤.textarea在 css 選擇器中識別class name 。

試試下面的 css選擇器。

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