Python Selenium - 如何在#shadow-root（打開）下的textarea中定位和添加數據

Question

我正在嘗試在以下代碼的文本區域中找到並輸入數據。

但它沒有定位元素。

HTML：

    <label _ngcontent-c8="" class="form__label form__label--bottom" for="description ">
        <span _ngcontent-c8="" class="form__label-inner-wrap"> Product description <span _ngcontent-c8="" aria-label="required">*
        </span></span>
    </label>
    <eds-textarea _ngcontent-c8="" id="productDescTextArea" maxlength="1000" name="description" ng-version="9.1.13">
        #shadow-root (open)
        <style>....</style>
        <style>...</style>
        <div class="textarea">
            <textarea class="textarea__input u-mb--" placeholder="Please provide a detail description of product." rows="4">
            </textarea>
            <span id="textarea-character-counter" class="textarea__counter">Characters Available: 
                <span aria-atomic="false" aria-live="true" aria-relevant="text">1000/1000
                </span>
            </span>
        <!----></div>
    </eds-textarea>
</div>

我試過 CSS 定位器：

 driver.find_element_by_tag_name("textarea")
            driver.find_element_by_css_selector("textarea[placeholder='Please provide a detail description of product.']").send

還有 XPATH：

//textarea[@placeholder='Please provide a detail description of product.']

找不到元素 - 請幫助！

Answer 1

root = driver.find_element_by_id("productDescTextArea")

textarea = driver.execute_script("return arguments[0].shadowRoot.querySelector('textarea[placeholder=\"Please provide a detail description of product.\"]')",root)

您必須調用 shadowRoot 然后使用 querySelector 查找元素

Answer 2

<textarea>在#shadow-root (open)中。

<eds-textarea _ngcontent-c8="" id="productDescTextArea" maxlength="1000" name="description" ng-version="9.1.13">
    #shadow-root (open)
    <style>....</style>
    <style>...</style>
    <div class="textarea">
        <textarea class="textarea__input u-mb--" placeholder="Please provide a detail description of product." rows="4">
        </textarea>
        <span id="textarea-character-counter" class="textarea__counter">Characters Available: 
            <span aria-atomic="false" aria-live="true" aria-relevant="text">1000/1000
            </span>
        </span>
    <!----></div>
</eds-textarea>

---

解決方案

要在<textarea>字段中發送字符序列，您必須使用shadowRoot.querySelector()並且可以使用以下定位器策略：

• 代碼塊：

   element = driver.execute_script("""return document.querySelector('#productDescTextArea').shadowRoot.querySelector('textarea.textarea__input[placeholder^="Please provide a detail description of product"]')""") element.send_keys("Apeksha Mehta")