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

Question

I am trying to locate and enter data in the text area for below code.

But it does not locate the element.

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>

I tried CSS Locator:

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

Also XPATH:

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

Could not locate the element - Please help !

PDHide · Accepted Answer · 2021-02-15T22:20:53.437

0

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)

you have to call the shadowRoot and then find element using querySelector

edited Feb 15 '21 at 22:20

answered Feb 15 '21 at 20:40

PDHide

18,113
2
31
46

Thank you for the quick response . I tried the same : which generated an error. ```raise exception_class(message, screen, stacktrace) selenium.common.exceptions.JavascriptException: Message: javascript error: missing ) after argument list ``` – Apeksha Mehta Feb 15 '21 at 22:07
Also, How would Add data in the text field. I tried this,``` textarea.send_keys("DATA") ```, but seems like send_keys can not be used here. – Apeksha Mehta Feb 15 '21 at 22:11
Did you escape nthe double quotes , – PDHide Feb 15 '21 at 22:21
Updated the answer – PDHide Feb 15 '21 at 22:22

score 0 · Answer 2 · answered Feb 15 '21 at 22:23

The <textarea> is within a #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>

Solution

To send a character sequence with in the <textarea> field you have to use shadowRoot.querySelector() and you can use the following Locator Strategy:

Code Block:

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 - How to locate and add data in textarea which is under #shadow-root (open)

2 Answers2

Solution