Python Selenium - 如何在#shadow-root（打开）下的textarea中定位和添加数据答案

【问题标题】：Python Selenium - How to locate and add data in textarea which is under #shadow-root (open)Python Selenium - 如何在#shadow-root（打开）下的textarea中定位和添加数据
【发布时间】：2021-05-18 17:19:08
【问题描述】：

我正在尝试在以下代码的文本区域中查找并输入数据。

但它没有找到元素。

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.']

找不到元素 - 请帮忙！

【问题讨论】：

标签： python selenium textarea shadow-dom queryselector

【解决方案1】：

<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()，您可以使用以下Locator Strategy：

代码块：

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

【讨论】：

【解决方案2】：

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 查找元素

【讨论】：

感谢您的快速回复。我尝试了同样的方法：它产生了一个错误。 raise exception_class(message, screen, stacktrace) selenium.common.exceptions.JavascriptException: Message: javascript error: missing ) after argument list
另外，如何在文本字段中添加数据。我试过这个，``` textarea.send_keys("DATA") ```，但是这里好像send_keys不能用。
你有没有转义双引号，
更新了答案