Python Selenium - 如何在#shadow-root 下的文本区域中定位和添加数据（打开）

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> 在内。

<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> 字段中发送 字符序列 ，您必须使用 and you can use the following :

代码块：

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

Python Selenium - 如何在#shadow-root 下的文本区域中定位和添加数据（打开）

Python Selenium - How to locate and add data in textarea which is under #shadow-root (open)

python

selenium

textarea

shadow-dom

queryselector

解决方案